Okay, I have never known how to do this… With an UL, how do I make it so that all the LIs are lined up horizontally (y’know, instead of it dropping down to a new line for each LI)?
Thanks as always 
^ Thanks, I’ll remember that [noparse] trick 
[ot]You can put post [NOPARSE]
[/NOPARSE] in a post by wrapping them in [NOPARSE][NOPARSE][/NOPARSE][/NOPARSE] tags: [NOPARSE][NOPARSE]
[/NOPARSE][/NOPARSE]
Also works to prevent URLs become links and smiley text become smilies[/ot]
Well, I’m not sure what the difference is with all that stuff (I’m sure it’ll sink in eventually), but the “centered inline-block LI” code did the trick.
Thank you sooooooo much!!!
Your welcome, glad you found something to work with!
but the “centered inline-block LI” code did the trick
That would have been one of the links that I posted. If you view them in Webkit (chrome/safari) you will see that there is still a 1px gap between them. If it is not critical to your design then it should not be a problem.
However, if it is a problem that is where the “centered inline-block UL” (the code I posted) will resolve the Webkit 1px bug. At the cost of an extra div though.
I have found a workaround for the webkit bug without using an extra div but it is still being tested at this point.
It may take a while for your attachments to be approved, if you have a server you can upload them and post a link.
Were the last two links I posted close to what you were wanting ? (layout wise)
You can post the code too, just paste it in and wrap it in [C ODE] [/COD E] tags (without the spaces)
Like I said above, I did try that code… And then when I resized the window, it went back over to the left anyways.
Anywho, the first attachment is what I have; the second attachment is what I want to have.
Well, I tried to say “text-align: center;” … that didn’t work. So then I tried “margin: 0 auto;” and that didn’t work… The UL is now left aligned, but I need it centered on the page. :sick:
It sounds like you are wanting your list items centered in a full width UL, correct?
If so, the easiest way to do that without dealing with display:inline is to set the UL itself as display:inline-block. Then center it using text-align:center within a parent div simply to give it a full width appearance. You can then float the anchors to keep them as blocks for dimensions and margins. The UL shrinkwraps to the width of the list items and stays centered in the div. It costs an extra div to do that but it saves the trouble of dealing with whitespace nodes had the LIs’ been set as inline-blocks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Widthless Blocks</title>
<style type="text/css">
h1 {
font-size:1.4em;
text-align:center;
}
/*=== Demo Code ===*/
#nav {
width:1000px;
margin:0 auto;
background:#CCC;
text-align:center; /*center the entire ul*/
}
#nav ul {
display:-moz-inline-box;/* for FF2 if needed */
display:inline-block;/* shrinkwrap the ul */
vertical-align:bottom;
margin:0;
padding:0;
list-style:none;
background:#FF0;
}
* html #nav ul {display:inline;}/* IE6 inline-block trip */
*+html #nav ul {display:inline;}/* IE7 inline-block trip */
#nav li, #nav a {float:left}
#nav a {
padding:5px 15px;
text-decoration:none;
color:#000;
font-weight:600;
}
#nav a:active,
#nav a:focus,
#nav a:hover {
background:#000;
color:#FFF;
}
</style>
</head>
<body>
<h1>Centered Widthless Blocks</h1>
<div id="nav">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div>
</body>
</html>
As I pointed out above, the extra wrapping div is the easiest way to bypass whitespace nodes. However there are some other tricks that can be used to eliminate the div and hide the nodes when centering the LIs’ with inline-block
http://www.css-lab.com/demos/inline-block/inline-block-kill-node.html
http://www.css-lab.com/demos/inline-block/inline-block-kill-node-2.html
If that is not what you are after we will need to see your code and possibly an image of what you are wanting.
Well that was stupidly simple. Thanks. Except now I have an issue… I want the UL centered on the page… The content has a particular width, with margin: 0 auto;
Hi,
Just float the LI left (or right) and float the anchors also to prevent the IE staircase bug.
You can set dimensions on the anchor if they are needed.
Here are some simple examples: (view the page source)
http://www.css-lab.com/demos/nav/easy-dropdown.html
http://www.css-lab.com/bug-test/staircase-bug.html
Easy as Pie
What is the problem with centering the ul?
Well… I tried that code but it is not working. It moved over a little 
My backgrounds and things are set to 100%. I did make an inner div for my navigation (since it was set to 100% for the background), and I made sure all the code was the same, but it only moved over about 140 px…
I guess I should post the code, huh?