|
|
Posted by tshad on 07/28/07 00:11
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>
******************************************************
Thanks,
Tom
[Back to original message]
|