SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center a horizontal list with unknown width

    Hello,

    I have a horizontal list like this with unknown width and want it centered in the box:

    <div id="box">
    <ul>
    <li><a href="/">text1</a></li>
    <li><a href="/">text1</a></li>
    <li><a href="/">text1</a></li>
    <li><a href="/">text1</a></li>
    </ul>
    <div style="clear:both;"></div>
    </div>

    #box {
    text-align:center;
    background-color:#131313;
    }
    #bottom ul {
    margin:0 auto;
    list-style:none;
    }
    #bottom li {
    float:left;
    }
    #bottom a {
    margin:0 27px;
    text-decoration:none;
    }

    The problem is, it only gets centered when I give a width to #bottom ul
    But the width is unknown, because there can be different strings as link.

    Is there any valid solution?

    Greetings, Andreas

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    use display inline to your advantage
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.x{
    	padding:.95em 0;
    	text-align:center;
    	list-style:none;
    	}
    	html .x .y{border-left:1px solid #0000ff;}
    	
    	.x li{display:inline;font-size:1em;}
    	
    	.x a{
    	padding:.9em 3em;
    	background:#ccccff;
    	border:1px solid #0000ff;
    	border-left:none;
    	
    	}
    	.x a:hover{background:#ffccff;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <ul class="x">
    <li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li>
    </ul>
    
    </body>
    </html>
    yours ?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    *{padding:0;margin:0;}
    
    #box{
    text-align:center;
    background:#131313;
    margin:0 auto;
    list-style:none;
    padding:10px 0;
    }
    
    #box li{display:inline;}
    
    #box a{
    padding:10px 27px 10px 27px;
    text-decoration:none;
    color:#ffffff;
    }
    
    #box a:hover{background:#ff0000;color:#000000;}
    
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    
    <ul id="box">
    <li><a href="##">text1</a></li><li><a href="##">text1</a></li><li><a href="##">text1</a></li><li><a href="##">text1</a></li>
    </ul>
    
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks @ allfornerds

    It works, but isn't it the same like only
    <div>
    <a href="">text1</a>
    <a href="">text2</a>
    <a href="">text3</a>
    <a href="">text4</a>
    </div>

    div {
    text-align:center;
    padding:2px 0;
    background:#foofoo
    }
    a{
    margin: 0 27px;
    }

    when I don't use the floats I get an error in IE7 when using the zoom.
    The <a>'s are loosing their margin/padding then. But only when I have it included in my website, not when I have your example only...

    well, perhaps I will stop caring about those IE illnesses...

    thanks again

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    This works now ? , but there is a little trick getting the padding to work on the A tag, you have to make room for it with a padding on the ul ALSO
    This works in my IE 7 , although the zoom works a little bit different as expected and has it's troubles also, so if your set up is not working probably some other CSS is working on your UL LI A's ?, we need more code or better a link to the page Please
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    *{padding:0;margin:0;}
    
    #box{
    background:#131313;
    margin:0 auto;
    list-style:none;
    padding:10px 0;
    text-align:center;
    }
    
    #box li{display:inline;}
    
    #box a{
    background:url(http://www.google.nl/images/firefox/fox1.gif) no-repeat -1em -1em;
    margin:0 27px;
    padding:10px 0;
    text-decoration:none;
    color:#ffffff;
    min-height:1&#37;;
    }
    
    #box a:hover{background-position:.5em .5em;color:#ff0000;}
    
    
    </style>
    <script type="text/javascript">
    
    </script>
    </head>
    <body>
    
    <ul id="box">
    <li><a href="##">text1</a></li><li><a href="##">text1</a></li><li><a href="##">text1</a></li><li><a href="##">text1</a></li>
    </ul>
    
    </body>
    </html>
    Last edited by all4nerds; Sep 27, 2007 at 03:48.

  5. #5
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok , I will post the link to the page as soon it is online.
    Thanks!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can centre floats using a technique shown in this example:

    http://www.pmob.co.uk/temp/centred-float4.htm

    The only drawback is that if the width of the parent container is a fluid width then when the float items wrap to the next line it aligns to the left of the list.

    If you can keep the elements inline as in all4nerds example then that's also a good method to use but you do run into problems if you have complicated styling with borders, padding and margins as inline elements are limited in what they can contain and does vary between browser.

    All4nerds method may be the best solution here as the styling seems relatively simple. I always find that IE7's zoom causes problems anyway and I think most users will expect the layout to be slightly different when zoomed as long as its readable.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Like I mentioned above, and i know this only very recently, if you give them room inline's style as good as block levels, they behave like a single line of text, but there is a minor disadvantage two words with a brake <br> and the inline is gone
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.x{
    	padding:.95em 0;
    	text-align:center;
    	list-style:none;
    	}
    	/* html .x .y{border-left:1px solid #0000ff;} */
    	
    	.x li{display:inline;font-size:1em;}
    	
    	.x a{
    	padding:.9em 3em;
    	background:#ccccff url(http://www.google.nl/images/firefox/fox1.gif) no-repeat -2em -2em;
    	border:1px solid #0000ff;
    	/* border-left:none; */
    	margin:0 27px;
    	}
    	.x a:hover{background-position:5em 1em;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <ul class="x">
    <li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li>
    </ul>
    
    </body>
    </html>
    make room demo
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.x{
    	padding:1.95em 0;
    	text-align:center;
    	list-style:none;
    	padding-top:2em;
    	}
    	/* 
    	html .x .y{border-left:1px solid #0000ff;}
    	 */
    	.x li{display:inline;font-size:1em;}
    	
    	.x a{
    	padding:.9em 3em;
    	background:#ccccff url(http://www.google.nl/images/firefox/fox1.gif) no-repeat -2em -2em;
    	border:1px solid #0000ff;
    	/* border-left:none; */
    	margin:0 27px;
    	}
    	.x a:hover{background-position:5em 1em;border:1em solid}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <ul class="x">
    <li><a href="##" class="y">12345</a></li><li><a href="##">1234567</a></li><li><a href="##">12345678</a></li><li><a href="##">123</a></li>
    </ul>
    
    </body>
    </html>
    Last edited by all4nerds; Sep 27, 2007 at 04:48.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ben
    if you give them room inline's style as good as block levels,
    I'm not disagreeing with you exactly as I said above in simple situations it can work well .

    To really see what's going on you need to add a border to the list and then check in firefox and IE.

    e.g.

    Code:
    .x li{display:inline;font-size:1em;border:1px solid #000}
    In IE the lists border is pushed out around the anchors border but in other browsers the list border remains at the current line height as it should, because padding on non-replaced inline elements can't affect the line height and the inline elements poke out at the top and bottom which is why you have to make room for them or they will overlap.

    Of course you can fiddle with line height settings and try to match it all up but is soon gets complicated especially if then you have a span inside the anchor that needs to be block level also.

    Inline styling is great if you only need to style the one element but gets complicated (or impossible in a cross browser way) if you need to add styling to the wrappers and inners also. Even my simple floated example would be difficult to do as inline due to the extra two borders I added for the shadow effect.

    There are also other methods using some proprietary code that basically make use of inline-block which eventually will be the preferred method when all browsers adopt it (it'll be a long wait though )

    But as I already said above Ben's method is probably best in this case.

  9. #9
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes I know that a list drags a lot of dirt in to menu's, I never was in favor of slapping them around a link set, the UL LI are only there as a vehicle's to the needs of semantics ?
    The inline property is the interesting future, because it contradicts what is the general opinion, you can't give inline's top and bottom paddings, as you can see it works

    PS as a test you can remove the li's and change the ul in a div, without any change in the css
    Last edited by all4nerds; Sep 27, 2007 at 06:01.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,299
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ben
    because it contradicts what is the general opinion, you can't give inline's top and bottom paddings, as you can see it works
    You could always give an inline element top and bottom padding, there was no doubting that but the problem is that the padding doesn't affect the line height and the padding bleeds into the line above and below as you have found out and accommodated for.

    I am not contradicting you but confirming what you say but at the same time pointing out that it will only work in simple cases like the above when you work on one container. If you want nested containers for certain visual effects such as the shadowed borders in my example then inline styling fails because the parent doesn't grow with the child. The parent stays at the line height while the child pushes through the line-height.

    This varies between browser as well because it isn't specifically defined in the CSS specs. There are ways and means around it but it soon becomes quite complicated to maintain.

    I did research on this myself some years back .

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Nested menu's ?, No that's not flying, but i see a simple link set with a hover ?, and can't get the code of the tread starter any simpler , and i would use it using em's
    PS only Opera's zoom works as expected

    PS Paul you have height + line-height + padding ( or i overlook something ), and i use 2X padding, and there is indeed a relation in font-size/padding if you use em's
    Last edited by all4nerds; Sep 27, 2007 at 08:52.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •