OK so I've got a PHP from that is propagated by a switch loop dependent on the dynamic case at hand (I think). Now, when I add in a checkbox, I want to be able to make the first check box in a div with a top border and sides, no bottom. The following ones just have a side border and the last to have sides and a bottom but no top. Hope this makes sense. This is all the code I have to edit:
case "E":
$str.='<div id="leftcolrightboxcheckattach"><div id="enqattachcheckcontent" ><div id="enqleftcolattachcheckbox"><input type="checkbox" id="answer_question_'.$row['ques_id'].'[]" name="answer_question_'.$row['ques_id'].'[]" value="'.$arrMul[$i]["mul_name"].'" style="border:thick solid #fff" /></div><div id="enqleftcolattachcheckboxright">'.$arrMul[$i]["mul_name"].'</div></div></div>';
break;
and here is my CSS. The standard class works, the last-child works but the first-child doesn't... any ideas why?
#leftcolrightboxcheckattach:first-child{width:96%; margin:5px auto; clear:both; background:#000; border-top:thin solid #E6E6E6; position:relative; }
#leftcolrightboxcheckattach{width:96%; margin:5px auto; clear:both; background:#fff; border-left:thin solid #E6E6E6; border-right:thin solid #E6E6E6; position:relative; }
#leftcolrightboxcheckattach:last-child{width:96%; margin:5px auto; clear:both; background:#fff; border-bottom:thin solid #E6E6E6; position:relative; }
#leftcolrightboxcheckattach:not(:first-child):not(:last-child)
{
.....
}
Related
I have some problems with a button arrangement where I have several buttons forming a grid.
The problem I am encountering is, that as soon as there is more than one line of text inside the button it gets shifted downwards.
I think you see what the problem is.
<button class="boxed" dummy="0" name="x" type="submit" value="x">
SEGEBERGER ZTG.DO
</button>
corresponding CSS
button {
background:#fff;
border: 1px solid #c1c1c1;
padding-left:11px;
padding-right:11px;
height:29px;
margin-top: 5px;
white-space: normal;
}
.boxed {
margin-left:1px;
padding-top:10px;
padding-left:10px;
width:100%;
max-width:150px;
height:150px;
font-size: 10pt;
word-break: break-all;
}
I looked around but did not find anything that fixed it.
https://jsfiddle.net/k1vvsx2h/
Hope someone has a hint on how to fix this.
Have a good one :)
Adding a float:left will fix this issue.
.boxed {
float: left;
margin-left: 1px;
padding-top: 10px;
padding-left: 10px;
width: 100%;
max-width: 150px;
height: 150px;
margin-right: 5px;
font-size: 10pt;
word-break: break-all;
}
button {
background: #fff;
border: 1px solid #c1c1c1;
padding-left: 11px;
padding-right: 11px;
height: 29px;
margin-top: 5px;
white-space: normal;
}
Here also a jsFiddle for you: https://jsfiddle.net/hb8ydyba/1/. Make sure you're using a clearfix with this solution.
If you're looking for a more flexible solution maybe a CSS Framework like Bootstrap or UIKit and their Gridsystems will work out well for you.
I'm having trouble getting the height of my HTML divs to scale with the content of my PHP-generated table.
The table I'm using might change size so I don't want to set the height of the parent divs statically, but I can't seem to get it to work otherwise. I'm not floating anything.
The main script for this page is like this:
<div id="wrapper">
<div id="contentmain">
<div id="contentleft">
<?php
include ('get_table.php');
?>
</div>
<div id="contentright">
</div>
</div>
</div>
I thought that if #wrapper and #contentleft has height:auto or height unset that the table would decide the size of those divisions, but instead the table just sits on its own, extending into white space while the divs sit as thin lines at the top.
CSS:
#contentmain
{
width:940px;
height: 1164px;
background-color:aqua;
margin: 10px 10px 0px 10px;
}
#contentleft
{
width: 700px;
height:inherit;
background-color: #CAE2ED;
position:absolute;
}
table
{
border-spacing:8px;
font-family:Georgia, serif;
padding:0px;
box-shadow:1px 0px 5px 0px #000000;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin:0 auto;
background-color:white;
/*border-collapse: separate;
border-spacing: 0 10px;*/
}
Note: contentleft is resizing with the table properly, but contentmain and wrapper are not.
Any help appreciated!
Try this css:
#contentmain
{
width:940px;
height: 1164px;
background-color:aqua;
margin: 10px 10px 0px 10px;
display:inline;
}
#contentleft
{
width: 700px;
height:inherit;
background-color: #CAE2ED;
position:absolute;
display:inline;
}
table
{
border-spacing:8px;
font-family:Georgia, serif;
padding:0px;
box-shadow:1px 0px 5px 0px #000000;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
margin:0 auto;
background-color:white;
display:inline;
/*border-collapse: separate;
border-spacing: 0 10px;*/
}
have you tried using the clearfix method?
http://jsfiddle.net/zqtWL/
. clearfix{display:block;clear:both; float:none; width:100%;}
You can try this:
- set your #contenmain display to block.
- set your #contentleft and #contentright display to inline-block.
#contentmain { display: block; ...}
#contentleft { display: inline-block; ...}
#contentright { display: inline-block; ..}
I am trying to achieve a divider line between menu items in a Concrete5 site, and tried to implement by adding a border-right to each menu item and then using the :first-child pseudo class to add a separator before the first one. However, the pseudo class is being ignored and borders are being added to both sides of each menu item. Here is the code:
.top-bar-section ul li > a {
display: block;
width: 100%;
color: white;
padding: 12px 0 12px 0;
padding-left: 15px;
font-size: 0.8125em;
font-weight: bold;
background: #0D42C0;
border-right: 1px solid white;
}
.top-bar-section ul li > a:first-child {
border-left: 1px solid white;
}
I don't know the exact structure of the HTML menu that is being produced by the CMS, but these selectors seem to be working. Not sure if there is anything else needed to help with this issue. Let me know if more information is needed to diagnose this problem.
Any help is very appreciated!
All of the <a>s are first children of their respective <li>s. You need to target the first <li> instead. Try this:
.top-bar-section ul li:first-child > a {
border-left: 1px solid white;
}
For future reference, please include your HTML in the question.
I have a link after an image in my xhtml. The browser automatically puts a return character after the image so that the link is below the image. I want the link to be beside the image. How do I modify the CSS/XHTML for this?
PHP generates it like this(example code)
echo "<img class = \"c\" src=\"http:\/\/www.facebook.com\/favicon.ico\" alt=\"\"\/>";
echo "<a name = \"a1\" class = \"b\" href = \"$ass_array[url]\">$ass_array[name]</a>";
CSS
img.c
{
display:??;
}
a.b
{
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
width:100%;
border-bottom:1px solid #cccccc;
}
See: http://jsfiddle.net/thirtydot/vgnAa/
CSS:
.c {
display: block;
float: left;
margin-top: 4px;
margin-right: 4px;
}
.b {
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
border-bottom:1px solid #cccccc;
overflow: hidden;
}
Either float: left, float: right depending which side you want the link to be. Apply that to both, and make sure to have a clear div after.
This way you can still have that display:block on .b.
"float:left;" for both elements will work
I am creating an e-commerce website. While showing discount box, the image of the item is shifted to the left (image below). I want the discount box (blue color) on top of the item class. Can anyone help me with this?
CSS file
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
float:left;
border:1px solid red;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
float:right;
margin-right:30px;
margin-top:10px;
}
HTML File
<div class="item">
<img src="items/1/s/a.jpg"/>
<div class="discount">
50% discount
</div>
</div>
My example -- the blue box is not overlapping the image. Instead it displaces the image.
I want like this: in which discount box overlaps the image/CSS class
You could use z-index and absolute positioning on the top div. Something like:
div.discount
{
width:30px;
position: absolute;
z-index: 10;
top: 8px;
right: 8px;
height:30px;
border:1px solid blue;
}
You could also use percentages instead of px in the top and right to make it a little more flexible.
Edit: You will also have to add position: relative to div.item (absolute position applies based on the closest containing element with a position applied).
z-index is not strictly necessary as long as the thing you want on top appears before the thing on the bottom in the code. I sometimes like to put it in there just in case things get moved around later.
Try positioning the discount label absolute within the item div
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
border:1px solid red;
position :relative;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
position: absolute;
top: 20px;
left: 20px;
}
div.item { position:relative; }
div.discount { position:absolute; top:-5px; left: -5px; }
You can use absolute positioning to place the blue box on top, just make sure that the parent element is set to position:relative.
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
float:left;
border:1px solid red;
position:relative;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
position:absolute;
right:30px;
top:10px;
}
This is something quick I made up, should work for you: JsFiddle Demo