|
|
Posted by tshad on 08/02/07 16:42
I finally found a way to do it. I also originally put a table around the
whole thing and just change the align tag. This was done without the table.
What I did was:
*********************************************************
<style type="text/css">
..nav-menu
{
padding:0;
margin:0;
list-style:none;
border:1px solid #f00;
}
..nav-menu ul
{
padding: 0;
margin: 0;
text-align:left;
}
..nav-menu li
{
display:inline;
margin: 0 4px;
padding: 0;
text-align:right;
}
<div class="nav-menu">
<ul>
<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>
</div>
<br>
*********************************************************
To right align or left align or center align - all you have to do is change
the text-align in the .nav-menu ul section.
Thanks,
Tom
"Neredbojias" <monstersquasher@yahoo.com> wrote in message
news:Xns997ABC31C8DABnanopandaneredbojias@198.186.190.161...
> 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]
|