|
|
Posted by John Hosking on 07/28/07 01:46
tshad wrote:
> I am trying to create dynamic menus and started out with using a ul list
> that I then style using classes.
Good idea.
>
> The problem is I couldn't figure out how to Center or Right-Justify the list
> in all browsers. I did find this on the Net - but it doesn't say how to
> right justify it (even though the articles says it is going to show how to
> left or right justify a list that works for all browsers. IE being the
> problem).
Well, a URL to your source page (where you found this code) would have
been useful, at least for me.
Also, the URL for your attempt is pretty much mandatory for me (for one)
to spend any time looking at your issues. I've pretty much given up on
the new file-copy-paste-upload routine.
>
> How do I right justify the list?
And BTW, just as a bit of pedantry to ease my current grumpiness, if not
be of some small usefulness, there isn't really a term "right justify."
With any given text, one can left-align it, or right-align it, or
justify it (combining the effects of the first two), or leave both edges
"ragged". You want "right aligned" text. (Which is alignment more than
positioning, but I won't mark off points for that. This time. ;-)
>
> **************************************************
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> <title>Untitled Document</title>
> <!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" xml:lang="en" lang="en">
Hey, two doctypes, and neither of them is HTML 4.01 strict. No wonder
I'm grumpy. (Is this really what you got from Stu's place? Does the page
you're playing with [or fighting against] validate?)
> <head>
> <title> Horizontal List - alternative </title>
> <style type="text/css">
> h2, h3, h4 {font-family:arial, verdana, sans-serif; color:#888;}
>
> .menu {
> display:table;
Beware the lack of support in IE.
> padding:0;
> margin:0 auto; /* Centering */
> /* margin:0; /* Left justify the list */
I know this is commented out, but it's wrong anyway. So wrong.
> font-family: arial, helvetica, sans-serif;
> white-space:nowrap;
> list-style-type:none;
> }
> * html .menu {
Beware the change in how IE treats * html selectors starting with IE7.
http://msdn2.microsoft.com/en-us/library/bb250496.aspx
> display:inline-block;
Beware the lack of support in Mozilla.
> width:1px;
> padding:0 2px;
> }
> .menu li {
> display:table-cell;
Beware the lack of support in IE.
> }
> * html .menu li {
> display:inline;
> }
> .menu a {
> display:block;
> padding:0.2em 1em;
> background:#fc6;
> color:#000;
> text-decoration:none;
> border:1px solid #000;
> }
> * html .menu a {
again
> display:inline-block;
again
> margin:0 -2px;
> }
> .menu a:hover {
> color:#fff;
> background:#08c;
> }
> </style>
> </head>
>
> <body>
> <h2>Positioning horizontal unordered lists</h2>
> <h3>10. An alternative horizontal unordered list - centered</h3>
> <h3>For all browsers including Internet Explorer IE6</h3>
> <h4>by Stu Nicholls</h4>
>
> <ul class="menu">
> <li><a href="#nogo" temp_href="#nogo">Item one</a></li>
> <li><a href="#nogo" temp_href="#nogo">Item two</a></li>
> <li><a href="#nogo" temp_href="#nogo">Item three</a></li>
> <li><a href="#nogo" temp_href="#nogo">Item four</a></li>
> <li><a href="#nogo" temp_href="#nogo">Item five</a></li>
What is temp_href
> </ul>
> </body>
> </html>
Uh, what was the question again?
Ah, yes. Did you try text-align:right on the ul.menu?
HTH
--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
[Back to original message]
|