Positioning Dynamic menus

Discussion in 'HTML' started by tshad, Jul 28, 2007.

  1. tshad

    tshad Guest

    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
     
    tshad, Jul 28, 2007
    #1
    1. Advertising

  2. tshad

    Neredbojias Guest

    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.
     
    Neredbojias, Jul 28, 2007
    #2
    1. Advertising

  3. tshad

    John Hosking Guest

    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
     
    John Hosking, Jul 28, 2007
    #3
  4. tshad

    dorayme Guest

    In article <1Rvqi.74$>,
    "tshad" <> 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
     
    dorayme, Jul 28, 2007
    #4
  5. tshad

    tshad Guest

    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" <> 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.
     
    tshad, Aug 2, 2007
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tma

    Dynamic Menus

    tma, Jul 16, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    439
    Bobby Ryzhy
    Jul 16, 2004
  2. paulakeijzers

    creating dynamic menus with submenus from sql

    paulakeijzers, Nov 8, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    3,539
    Mr Newbie
    Nov 8, 2005
  3. news.west.cox.net

    Select menus above flyout menus? help?

    news.west.cox.net, Dec 8, 2004, in forum: HTML
    Replies:
    8
    Views:
    820
  4. Philip Townsend

    problems with flyout menus and positioning

    Philip Townsend, Sep 30, 2003, in forum: Javascript
    Replies:
    1
    Views:
    119
  5. Aaron
    Replies:
    2
    Views:
    89
    Vladdy
    May 12, 2004
Loading...

Share This Page