See this pic:
http://twitpic.com/5k3uph
The CSS I use is:
#content_filter_items {
display: none;
background-color: #ccc;
padding: 3px;
margin-bottom: 5px;
clear: both; }
#content_filter_items .filter_item {
display: inline-block;
background-color: white;
width: 200px;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
height: 100px; }
Why is it that I have the extra space on top of the 2nd column?
Thanks
Eric
Where you have display: inline-block, you also need to set vertical-align: top.
See the "baseline" section here for an explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Related
I have a set of DIVs like so:
<div class = 'tag'><a href='#'>gifts for him</a></div>
And the CSS looks like this:
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
Basically I want them to look like the following (gifts for him as an example hover):
However mine look like this:
There is no gap and the hover ignores the padding (I'd like the hover to colour right up to the edges if possible).
If I add margin: 2px I get this, which is even worse:
What have I done wrong?
Thanks!!
i have make for you a fiddle.
DEMO
your css is wrong:
it should look like this:
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
margin-right:5px;
}
.tag a{
color: #666;
text-decoration: none;
}
.tag:hover {
background-color: #a5c5da;
cursor:pointer;
}
.tag:hover a{
color:#FFF;
text-decoration: none;
}
In your CSS, you need to give the .tag alone a margin, not .tag a. Try adding this line:
.tag { margin: 2px; }
Also, give your .tag a a height and width of 100% - this will fill in the entire container:
.tag a { height: 100%; width: 100%; }
In your current CSS, you're giving both the div containing the anchor tag as well as the anchor tag styling, but you only need to be giving it to the .tag div in order to space out the containers.
try this
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
margin:2px;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
height: 100%;
width: 100%;
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
<div class = 'tag'><a href='#'>gifts for him</a></div>
Try with this used only single
gifts for him
Demo:http://jsfiddle.net/stanze/hkkLz0re/
i'm having 3 containers with not the same height and i want to stack them horizontally howver the smaller boxes are at the bottom. How can i fix it?
Here is the code i'm using for the boxes:
.brand{
border: 1px solid black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
padding: 9px;
margin-top: 10px;
background-image: url('/pcbuilds/assets/images/squared_metal.png');
margin-left: auto;
margin-right: auto;
display: inline-block;
width: 200px;
}
vertical-align has to be used for inline and inline-boxe content, defaut vertical-align value is baseline.:
.brand{
border: 1px solid black;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 5px;
padding: 9px;
margin-top: 10px;
background-image: url('/pcbuilds/assets/images/squared_metal.png');
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align:top;
width: 200px;
}
Can you not just put
position:relative;
top:0px;
I want to do items style like here
and I'm doing it with UL. Here is the code what I have http://jsfiddle.net/WVLR9/1/
ul.gallery_items {
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li {
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-left: 19px;
}
ul.gallery_items li:first-child {
margin-top: 25px;
margin-left: 0px;
}
but I have no idea why the 4th item have bigger margin-left option... it should be in the same place like 1st item but in the second line. Can anyone help me?
http://jsfiddle.net/WVLR9/2/
You put margin-left: 19px on the li's rather than margin-right.
Margin left was causing the 4th row to be a certain margin away from the left border
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px;
}
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
You are explicitly giving the first item a different left margin:
ul.gallery_items li:first-child{
margin-left: 0px;
}
ul.gallery_items li{
margin-left: 19px;
}
4th item has the same margin as other items, you just removed margin from the first item:
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
and it looks like something is wrong with 4th element;
You could use margin-right instead of margin-left
You could wrap each row with additional <div class="row">
You could remove margin-left: 0 form the first element, and give margin-left: -19px to the parent element
how about this :)
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 19px; /* maybe you will need to adjust your margin on the ul element. */
}
ul.gallery_items{
width: 831px;
height: auto;
margin: 0 auto;
list-style: none;
}
ul.gallery_items li{
width: 260px;
height: 200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 2px solid #e5e5e5;
float: left;
margin-top: 25px;
margin-right: 10px;}
this should do it.
You've applied a
ul.gallery_items li:first-child{
margin-top: 25px;
margin-left: 0px;
}
thats why first item didnt have left margin
I have this html:
<div id="tagsCloud" class="feedBarSegment">
<div id="tagsCloudHeader" class="segmentHeader">Tags</div><span class="tag">Psalm 33</span><span class="tag">Edgar Allen Poe</span><span class="tag">John</span><span class="tag">Hello</span><span class="tag">Test</span></div>
With this CSS:
.segmentHeader {
font-size: 1.15em;
font-weight: bold;
border-bottom: #7792ad solid 1px;
margin-bottom: 5px;
}
.feedBarSegment {
width: 250px;
margin: 52px 20px 20px 25px;
}
#tagsCloud {
margin-top: 10px;
}
.tag {
display: inline-block;
background: #e9e3c4;
padding: 2px 4px;
border-top: 1px black solid;
border-right: 1px black solid;
}
.subject {
display: inline-block;
background: #f2b2a8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 2px 3px 2px 3px;
border: black solid 1px;
margin: 2px;
}
I want to make it so that on each line, if no more tags fit that the tags on that line have padding added to them so that they completely span the entire line instead of having the extra space at the end. Is this possible to do?
If you can move from inline-block to inline for .tags you can use text-align: justify; on the container.
I believe what you're looking for is:
#tagsCloud {
text-align:justify;
}
http://www.w3schools.com/cssref/pr_text_text-align.asp
It seems like what you want is text-align: justify.
The only answer I can find to my problem is clear the float - but I have non. So hope you can help with another answer :-)
Here is my code, and I am trying to make the parent div of a button follow the expansion done by the padding.
<div class="button">
add
</div>
And css
.button {
background-color: #ccc; }
.button a {
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
width: 120px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
height: 59px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
clear: both;
}
And here is an example of it to play with http://jsfiddle.net/zNLVZ/1/
Change your css to this:
.button {
background-color: #ccc;
}
.button a {
display:inline-block;
background-color: #96BD1E;
color: black;
font-size: large;
padding: 6px 12px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-opera-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 10px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
clear: both;
}