Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Positioning Dynamic menus

Reply
Thread Tools

Positioning Dynamic menus

 
 
tshad
Guest
Posts: n/a
 
      07-28-2007
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


 
Reply With Quote
 
 
 
 
Neredbojias
Guest
Posts: n/a
 
      07-28-2007
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.
 
Reply With Quote
 
 
 
 
John Hosking
Guest
Posts: n/a
 
      07-28-2007
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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-28-2007
In article <1Rvqi.74$(E-Mail Removed)>,
"tshad" <(E-Mail Removed)> wrote:

> 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.


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!

--
dorayme
 
Reply With Quote
 
tshad
Guest
Posts: n/a
 
      08-02-2007
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" <(E-Mail Removed)> 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.



 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
creating dynamic menus with submenus from sql paulakeijzers ASP .Net 1 11-08-2005 10:18 AM
Select menus above flyout menus? help? news.west.cox.net HTML 8 12-09-2004 12:54 PM
Dynamic Menus tma ASP .Net 2 07-15-2004 11:24 PM
Popup menus w/o absolute positioning? Aaron Javascript 2 05-11-2004 11:44 PM
problems with flyout menus and positioning Philip Townsend Javascript 1 09-30-2003 01:52 AM



Advertisments