SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
-
Sep 27, 2007, 01:18 #1
- 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
-
Sep 27, 2007, 01:20 #2
- 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>
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>
-
Sep 27, 2007, 02:50 #3
- 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
-
Sep 27, 2007, 03:03 #4
- 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%; } #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.
-
Sep 27, 2007, 03:42 #5
- 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!
-
Sep 27, 2007, 03:55 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 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.
-
Sep 27, 2007, 04:11 #7
- 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>
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.
-
Sep 27, 2007, 04:48 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Ben
.
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}
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.
-
Sep 27, 2007, 05:19 #9
- 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 cssLast edited by all4nerds; Sep 27, 2007 at 06:01.
-
Sep 27, 2007, 07:29 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by ben
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.
-
Sep 27, 2007, 08:00 #11
- 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'sLast edited by all4nerds; Sep 27, 2007 at 08:52.
Bookmarks