|
|
Posted by Neredbojias on 07/28/07 01:30
Well bust mah britches and call me cheeky, on Sat, 28 Jul 2007 00:11:54
GMT tshad scribed:
> I am trying to create dynamic menus and started out with using a ul
> list that I then style using classes.
>
> 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).
>
> How do I right justify the list?
>
> **************************************************
> <!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">
> <head>
> <title> Horizontal List - alternative </title>
> <style type="text/css">
> h2, h3, h4 {font-family:arial, verdana, sans-serif; color:#888;}
>
> .menu {
> display:table;
> padding:0;
> margin:0 auto; /* Centering */
> /* margin:0; /* Left justify the list */
> font-family: arial, helvetica, sans-serif;
> white-space:nowrap;
> list-style-type:none;
> }
> * html .menu {
> display:inline-block;
> width:1px;
> padding:0 2px;
> }
> .menu li {
> display:table-cell;
> }
> * 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 {
> display:inline-block;
> 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>
> </ul>
> </body>
> </html>
> ******************************************************
Had like prob, -used a one-cell table and centered it.
--
Neredbojias
Half lies are worth twice as much as whole lies.
Navigation:
[Reply to this message]
|