I've tried everything from adding line-height, to changing the 'display' property to 'table-cell' to the li, but somehow i cant seem to get the images to be vertically aligned.
the css:
ul.columns { list-style: none; padding:25px }
ul.columns li {width:180px; height:180px; float:left; margin:16px; position:relative; overflow:hidden; border:1px solid gray}
ul.columns li img {margin:auto; display:block;}
http://jsfiddle.net/Sdt8M/3/
appreciate the help guys...
Do those images need block display? If not, you can just give those lis a line-height:180px, and vertical-align:middle those images.
http://jsfiddle.net/Sdt8M/20/
Have a look at this example http://www.brunildo.org/test/img_center.html
hey try this..
Add padding-top:10px to ul.columns li
ul.columns { list-style: none; padding:25px }
ul.columns li {width:180px; height:180px; padding-top:10px; float:left; margin:16px; position:relative; overflow:hidden; border:1px solid gray}
ul.columns li img {margin:auto; display:block;}
Hope it will help you.
Related
I've been fighting with this for probably 6 hours now and am completely stumped. I can't get the submenu to appear vertical on mouse hover. Here's the link from cssdesk. What am I messing up? I know it's something really simple.
http://www.cssdesk.com/n8WCm
If the link doesn't work for you, please see this snippet:
.nav8 ul .sub-menu{
position:absolute;
display:none;
}
.nav8 li:hover ul.sub-menu {
display: block;
background:#000;
border: 1px solid #ececec;
}
If there is more that you need, please let me know.
Add To your Css
.nav8 ul li li{
clear:both;
}
.nav8 ul li ul{
width:20% !important;
}
you should make it not floated left like the main menu, so i would suggest to clear it after every submenu li and give it a fixed width
.nav8 li:hover ul.sub-menu li {
clear:both;
width: 200px;
}
I have a list with floated <li> elements, the heights are different, thats the problem. I know I know theres an alternative, display:inline-block but this propery adds extra spaces, and I dont know why.
My css:
ul {
padding:0;
margin:0;
list-style:none;
width:700px;
}
ul li {
float:left;
border:1px solid #000;
width:24%;
margin:0 0.3% 20px 0.3%;
font-size:11px;
}
.yellow {
background:yellow;
}
online preview: http://jsfiddle.net/f3CA3/1/
you can do it clearing the sides as:
clear:both;
or maybe
clear:right;
just as an example, could be also;
clear:left;
I am trying to make a list of links, 6 links in a row.
The problem is I do not know how many links there will be. It could be only 2 or 25.
Please take a look at this fiddle.
I must be doing something wrong with the css because:
If for example there are just 3 links, the border of the .toplist div is not covering the whole length of the wrap div.
Also, I can't get more then two divs aligning before a new row appears.
This is not that important, but In IE6, even if I use overlow:auto I don't see a background for my ul (if I set one), and also, if I set margin-bottom for the ul I don't see it.
Any ideas on whats wrong with the css?
Ty
I made a few changes to your original fiddle to my fiddle. Check this out:
.wrap {
width:960px;
margin:0 auto;
border:1px solid #000
}
.toplist {
border:1px solid #0f6;
padding:0 0 0.5em 1em
}
.toplist ul {
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
.toplist ul li {
float:left;
width:15%;
margin-right:1em;
line-height:1.4em;
border-bottom:solid 1px #222;
}
.toplist ul li a, .toplist ul li .cat {
display:block;
font-size:0.7em;
}
.content{
background-color:#FF2E2E;
color:#FFF;
margin-top:100px;
heyight:40px
}
Hope this works. :) It works in IE 6 too! :)
My following code is not working.Means border and background color is not working
#navigation ul
{
background-color: #85A157;
border:3px solid white;
}
here is my fiddle http://tinkerbin.com/ooJNXsdD
i want like this
please help in correcting my fiddle.
try setting a height on the element like so:
#navigation ul
{
background-color: #85A157;
border:3px solid white;
height: 20px;/*added height*/
}
i hope this helps. i added the change to tinkerbin, not sure if it took :)
Use overflow: hidden on your <ul>, like this : http://tinkerbin.com/AMBfS3MY
After testing this on your Tinkerbin, this worked for me. You need a clearfix. In your CSS:
.clear {
clear: both;
}
Then in your HTML:
<ul>
...
<li class="clear"></li>
</ul>
And if you want the navigation bar to flush against the top image, add the following margin-top in your CSS:
#navigation ul
{
margin-top: 0;
...
}
I have just updated your fiddle, I hope you can see where your problems where.
http://tinkerbin.com/g63CbYYZ
For example:
ul has usually a margin. So you need to reset it.
Better define styles on div not on ul.
And a lot more...
This should do it for you.
#navigation ul
{
background-color: #85A157;
border:3px solid white;
margin:0px;
height:22px;
}
#navigation ul li
{
list-style:none;
float:left;
}
#navigation ul li a
{
color:white;
text-decoration:none;
margin:0px 37px 0px 0px;
}
I'm having an odd top padding/margin in Firefox.
Given this HTML:
<ul>
<li><textarea>item 1</textarea></li>
<li><textarea>item 2</textarea></li>
<li><textarea>item 3</textarea></li>
<li><textarea>item 4</textarea></li>
</ul>
And this CSS:
ul
{
margin:0;
padding:0;
list-style:none;
border:1px solid black;
width:300px;
}
ul li
{
margin:0;
padding:0;
height:17px;
}
ul li textarea
{
margin:0;
padding:0;
border:1px solid black;
font-size:11px;
height:15px;
}
When the list renders, the first element is displayed with a small extra top-margin causing the textareas inside to overflow the list as seen here:
http://jsfiddle.net/asgerhallas/2fwJZ/
I do not have this issue in Chrome. Does anyone has an explanation and a way to get rid of it?
Add display: block to ul li textarea:
http://jsfiddle.net/2fwJZ/1/
Or, add vertical-align: top:
http://jsfiddle.net/2fwJZ/2/
The problem in this case is that Firefox defaults to vertical-align: text-bottom for textarea elements, whereas Chrome defaults to vertical-align: baseline.
you can all so add line-height:1; if you gust want a different
approach