This is a problem that I need to solve before I meet with my boss in an hour and 15 minutes.
What i'm attempting to do here is essentially have all the items in a list float left, but rather than knocking up against the left side center themselves in the UL. I cannot make this an inline style as each float is an image with a caption, please help! XHTML resembles this:
<ul id="products">
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
</ul>
The CSS looks like this. I've attempted text-align: center more times than you can imagine. I'm assuming it has something to do with a margin, and keep in mind that the size of #products is restricted to the size of #content, which is just slightly bigger. If there are less than 6 list items, the other items should center based on how many there are rather than 6.
#products ul {
width: 55em;
display: block;
}
#products li {
margin: 0;
float: left;
width: 15%;
padding: 1em .3em;
background-image: none;
display: block;
}
#products img {
display: block;
padding-bottom: .5em;
clear: both;
}
Thanks in advance for your help!#products ul {
should be
ul#products{
or
#products{
i'll post the whole in a few minutes<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>centered floated list</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul#products{
list-style-type: none;
}
#products li {
margin: 0 auto;
float: left;
text-align: center;
width: 15%;
padding: 1em .3em;
background-image: none;
display: block;
}
#products img {
padding-bottom: .5em;
}
</style>
</head>
<body>
<ul id="products">
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
</ul>
</body>
</html>the margin: 0 auto; should technically work, and I know i've done it on other sites in the past. however, the way this page is set it up is that there is a side navigation bar, and then a content area. the content area is where i want the UL's with an ID of #product to center, and therefore any margins seem to knock the menu out of place.
In the XHTML, the sidenav comes after the content, with the #sidenav floated left and the #content floated right and then both given a width. how can i make it so that the UL centers itself within #product which is within #content.
I will paste code tomorrow if no one knows what I'm talking about
the UL is productssorry, wrong topic...plz deleteI will paste code tomorrow if no one knows what I'm talking aboutBetter yet, put the code up on the Internet and give us a link.
What i'm attempting to do here is essentially have all the items in a list float left, but rather than knocking up against the left side center themselves in the UL. I cannot make this an inline style as each float is an image with a caption, please help! XHTML resembles this:
<ul id="products">
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg">text</a></li>
</ul>
The CSS looks like this. I've attempted text-align: center more times than you can imagine. I'm assuming it has something to do with a margin, and keep in mind that the size of #products is restricted to the size of #content, which is just slightly bigger. If there are less than 6 list items, the other items should center based on how many there are rather than 6.
#products ul {
width: 55em;
display: block;
}
#products li {
margin: 0;
float: left;
width: 15%;
padding: 1em .3em;
background-image: none;
display: block;
}
#products img {
display: block;
padding-bottom: .5em;
clear: both;
}
Thanks in advance for your help!#products ul {
should be
ul#products{
or
#products{
i'll post the whole in a few minutes<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>centered floated list</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul#products{
list-style-type: none;
}
#products li {
margin: 0 auto;
float: left;
text-align: center;
width: 15%;
padding: 1em .3em;
background-image: none;
display: block;
}
#products img {
padding-bottom: .5em;
}
</style>
</head>
<body>
<ul id="products">
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
<li><img src=http://www.webdeveloper.com/forum/archive/index.php/"blah.jpg" alt="blah">text</a></li>
</ul>
</body>
</html>the margin: 0 auto; should technically work, and I know i've done it on other sites in the past. however, the way this page is set it up is that there is a side navigation bar, and then a content area. the content area is where i want the UL's with an ID of #product to center, and therefore any margins seem to knock the menu out of place.
In the XHTML, the sidenav comes after the content, with the #sidenav floated left and the #content floated right and then both given a width. how can i make it so that the UL centers itself within #product which is within #content.
I will paste code tomorrow if no one knows what I'm talking about
the UL is productssorry, wrong topic...plz deleteI will paste code tomorrow if no one knows what I'm talking aboutBetter yet, put the code up on the Internet and give us a link.