Positioning Dynamic menus

T

tshad

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
 
N

Neredbojias

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>
******************************************************
Click to expand...


Had like prob, -used a one-cell table and centered it.
 
J

John Hosking

tshad said:
I am trying to create dynamic menus and started out with using a ul list
that I then style using classes.
Click to expand...

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).
Click to expand...

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?
Click to expand...

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">
Click to expand...

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;
Click to expand...

Beware the lack of support in IE.
padding:0;
margin:0 auto; /* Centering */
/* margin:0; /* Left justify the list */
Click to expand...

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 {
Click to expand...

Beware the change in how IE treats * html selectors starting with IE7.
http://msdn2.microsoft.com/en-us/library/bb250496.aspx
display:inline-block;
Click to expand...

Beware the lack of support in Mozilla.
width:1px;
padding:0 2px;
}
.menu li {
display:table-cell;
Click to expand...

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


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>
Click to expand...

What is temp_href
</ul>
</body>
</html>
Click to expand...

Uh, what was the question again?

Ah, yes. Did you try text-align:right on the ul.menu?

HTH
 
D

dorayme

"tshad said:
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.
Click to expand...

Do you mean making the list go to the centre of the containing
element? (right justification is more a term about the line up of
the right edge of a block of text, no raggedness).

First thing is to simplify all that code you quote and see how to
make a simple case work.

This might give you some idea. It is not a simple matter when you
want the list item bullets, but leave out for now and try the
idea in different browsers:

<http://tinyurl.com/2f6dke>

I was a little surprised to see that this looks very similar in
both IE WIn 6 and other non-IE browsers.

To make the text align idea work but without having the lists
items centered in respect to each other (nicer for last two lists
in the url above to be "internally" left aligned, you need to
fiddle about with a wrapper div and distinguish the alignments.

The truth is, as David Doward once said, all this centering is no
trivial matter. It is very liberating not to mostly want it!
 
T

tshad

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Working on mobile css menu with plenty of frustration! 2
Not sure why drop-down is not working. 2
Dropdown menu in a fixed navbar 2
Positioning CSS components 1
Horizontal menu bar header 2
I need help fixing my website 2
Is it possible an iframe can overlapp another? 3
Need help with code on website (noob) 2

Members online

No members online now.
Total: 30 (members: 1, guests: 29)
Robots: 169

Forum statistics

Threads
473,777
Messages
2,569,604
Members
45,227
Latest member
Daniella65

Latest Threads

Top