HTML CSS horizontal align problem

redeye_uk

redeye_uk

redeye_uk

Associate
Joined
1 May 2007
Posts
1,901
Location
London
Scratching my head a little on this one. Should be a fairly basic, but just dont seem to be able to get it working.

I have the following

Code: 
<div id="wrapper">
    <div id="header">
        <ul>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
             <li></li>
        </ul>
    </div>
</div>

header has margin: 0 auto; width: 500px; which horizontally aligns fine. The problem comes with the content in the <ul>; its dynamic and sometimes items are hidden [display:none;]. This gives the visual appearance that the content isn't horizontally aligned. Obviously the problem is with the width:500px.

I just cant see a good alternative other than either using javascript to dynamically set the width of the header when items are hidden or by having various CSS classes for the various widths.

I guess the question is, how would you do this?
 
Can we see what you mean in action?

Considering the 500px is applied to the header the affect of display:none on the list elements shouldn't interfere at all with the horizontal alignment.
 
I'm no front end developer but i would change the design such that header width would be able to compass the maximum width of the ul when all is displayed. Also align left or centre the ul
 
Thats the exact problem; the alignment stays the same.

Its a TV app so I cant link to a site. But imagine the following...

----------[<li><li><li><li><li>]----------

if i then hide the first <li>

----------[--<li><li><li><li>]----------

header is still horizontally aligned, but visually the content doesnt look centered because of the fixed width.

Does that make a little more sense?
 
Ah so your list elements are also horizontally aligned? Like buttons? You using inline-blocks for them?

But, if you use display:none on the first list element the others shouldn't remain where they are, they should move left to fill the space.
 
gord said:
Ah so your list elements are also horizontally aligned? Like buttons? You using inline-blocks for them?
Click to expand...

The <li> are all floated left and have fixed widths.

gord said:
But, if you use display:none on the first list element the others shouldn't remain where they are, they should move left to fill the space.
Click to expand...

True, but the problem stays the same.

----------[<li><li><li><li>---]----------

There will always be white space in the header because of its fixed width. I would need to dynamically change this width based on the visible content inside. I was just curious whether there was a way of doing this without using javascript or multiple css classes.
 
I see what you mean now.

Can you get away with not providing the fixed width header, maybe apply the width on the parent wrapper? And using text-align to centralise the ul? I don't think you'd be able to use float with this either.

This is my mock page. It has 5 list elements, and I have display:none on the last one. They are always centrally aligned by the header. I've only tested this in FF.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#wrapper {
	width: 960px;
	margin: 0 auto;
}
#header{
	background-color: #CCCCCC;
	text-align:center;
}
li {
	display: inline-block;
	width: 100px;
	padding: 0;
	margin: 0;
	background-color: #666666;
}
ul {
	padding: 0;
	margin: 0;
}
</style>
</head>

<body>
<div id="wrapper">
    <div id="header">
        <ul>
             <li>1111111</li><li>2222222</li><li>3333333</li><li>4444444</li><li style="display:none">5555555</li>
            
        </ul>
    </div>
</div>
</body>
</html>
 
No worries. It is a bit of hack though, text-align shouldn't be used for this purpose, but if it gets the job done! ;)
 
You must log in or register to reply here.
Back
Top Bottom