Re: horizontal menu

Discussion in 'HTML' started by Andy Dingley, Jan 26, 2009.

  1. Andy Dingley

    Andy Dingley Guest

    On 23 Jan, 07:03, The Starmaker <> wrote:
    > How do you align the menu so that it looks evenly across, like this:
    >
    > Home Link Link Link Link


    At the most abstract level, you mark it up with HTML and then you use
    CSS to specify the presentation behaviour. In principle. It should be
    possible to take any CSS behaviour and to apply it to any HTML element
    you choose (no matter how contrived a situation) by using appropriate
    selectors.

    The actuality is that most implementations don't permit all CSS
    behaviours to be controlled as they ought to be, so you _might_ still
    find cases where using a particular HTML tag is the only way to access
    the behaviour you want. The usual culprit is <table>.

    That said, in most cases when the half-clueful say, "You must use a
    <table>" they actually mean "I don't know how to do it without a
    <table>", which isn't quite the same thing.


    In this case, you can do a pretty workable CSS implementation of what
    you want based on <ul> / <li>, but only if you know _beforehand_ how
    many entries there are to be in a row - then just set their widths to
    be an appropriate percentage based on this. If you need variable
    numbers across pages, then you can always add more class selectors for
    2,3..7 entries etc.

    If you want to build generalised styling that works for any number of
    columns without needing to adjust their widths, then you're back with
    <table>


    Incidentally, it's important with all these structures to remember
    where the boundaries of the <li> and the <a> are going to be. Which
    one will provide the "coloured highlight box" (or whatever)? Don't let
    yourself get confused and start scatter-gunning them with CSS
    properties until "it looks right". If _you_ don't understand what
    you've written, how do you expect browsers to cope?

    You might also be available to merge the <div class="menu" ><ul>
    into <ul class="menu" > directly, but then you could be trying to play
    with more margins / borders than one element alone could give you, so
    I wouldn't rule it out. The selectors below now cope with either.

    Here's an example of CSS (for your example HTML) that works for <ul> /
    <li>

    <style type="text/css" >

    body {
    font-family: sans-serif;
    }
    ..menu{
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #333;
    }

    ..menu ul,
    ul.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style:none;
    }

    ..menu ul li,
    ul.menu li {
    float: left;
    width: 20%;
    margin: 0;
    padding: 0;
    }

    ..menu ul li a,
    ul.menu li a {
    display:block;
    text-decoration: none;
    color: white;
    padding: 10.5px 11px;
    background-color: #333;
    }

    ..menu li a:visited{
    color: white;
    }

    ..menu li a:hover,
    ..menu li .current {
    color: #fff;
    background-color:#0b75b2;
    }
    </style>
    Andy Dingley, Jan 26, 2009
    #1
    1. Advertising

  2. Andy Dingley

    Chaddy2222 Guest

    On Jan 27, 1:59 am, Andy Dingley <> wrote:
    > On 23 Jan, 07:03, The Starmaker <> wrote:
    >
    > > How do you align the menu so that it looks evenly across, like this:

    >
    > > Home          Link                   Link              Link                 Link

    >
    > At the most abstract level, you mark it up with HTML and then you use
    > CSS to specify the presentation behaviour. In principle. It should be
    > possible to take any CSS behaviour and to apply it to any HTML element
    > you choose (no matter how contrived a situation) by using appropriate
    > selectors.
    >
    > The actuality is that most implementations don't permit all CSS
    > behaviours to be controlled as they ought to be, so you _might_ still
    > find cases where using a particular HTML tag is the only way to access
    > the behaviour you want. The usual culprit is <table>.
    >
    > That said, in most cases when the half-clueful say, "You must use a
    > <table>" they actually mean "I don't know how to do it without a
    > <table>", which isn't quite the same thing.
    >
    > In this case, you can do a pretty workable CSS implementation of what
    > you want based on <ul> / <li>, but only if you know _beforehand_ how
    > many entries there are to be in a row - then just set their widths to
    > be an appropriate percentage based on this. If you need variable
    > numbers across pages, then you can always add more class selectors for
    > 2,3..7 entries etc.
    >
    > If you want to build generalised styling that works for any number of
    > columns without needing to adjust their widths, then you're back with
    > <table>
    >
    > Incidentally, it's important with all these structures to remember
    > where the boundaries of the <li> and the <a> are going to be. Which
    > one will provide the "coloured highlight box" (or whatever)? Don't let
    > yourself get confused and start scatter-gunning them with CSS
    > properties until "it looks right". If _you_ don't understand what
    > you've written, how do you expect browsers to cope?
    >
    > You might also be available to merge the <div class="menu" ><ul>
    > into <ul class="menu" > directly, but then you could be trying to play
    > with more margins / borders than one element alone could give you, so
    > I wouldn't rule it out. The selectors below now cope with either.
    >

    Andy, I would not suggest useing a class for this type of menu, as it
    is a better idea to use an ID especially if the menu is only going to
    appear once on the page. Otherwise you will get a bunch of code that
    you do not need.
    --
    Regards Chad. http://freewebdesignonline.org
    Chaddy2222, Jan 26, 2009
    #2
    1. Advertising

  3. Andy Dingley

    Andy Dingley Guest

    On 26 Jan, 16:39, Chaddy2222 <>
    wrote:

    > Andy, I would not suggest useing a class for this type of menu, as it
    > is a better idea to use an ID especially if the menu is only going to
    > appear once on the page.


    It really is better to use the class. Especially if you want to vary
    behaviours within it (e.g. highlighting individual menu entries).
    Andy Dingley, Jan 26, 2009
    #3
  4. Andy Dingley

    dorayme Guest

    In article
    <>,
    Andy Dingley <> wrote:

    > On 23 Jan, 07:03, The Starmaker <> wrote:
    > > How do you align the menu so that it looks evenly across, like this:
    > >
    > > Home Link Link Link
    > > Link

    >

    ....
    >
    > That said, in most cases when the half-clueful say, "You must use a
    > <table>" they actually mean "I don't know how to do it without a
    > <table>", which isn't quite the same thing.
    >
    >
    > In this case, you can do a pretty workable CSS implementation of what
    > you want based on <ul> / <li>, but only if you know _beforehand_ how
    > many entries there are to be in a row - then just set their widths to
    > be an appropriate percentage based on this. If you need variable
    > numbers across pages, then you can always add more class selectors for
    > 2,3..7 entries etc.
    > ...


    The big plus for using a horiz list is that it can wrap and therefore
    fit into a fluid design better. So it is generally worth the effort if
    there is a reasonable chance of the items not fitting comfortably across
    a browser window.

    > Here's an example of CSS (for your example HTML) that works for <ul> /
    > <li>
    >
    > <style type="text/css" >
    >
    > body {
    > font-family: sans-serif;
    > }
    > .menu{
    > margin: 0;
    > padding: 0;
    > width: 100%;
    > background-color: #333;

    ....

    Just btw, your suggestion, at a rather big user font, will result in:

    <http://dorayme.netweaver.com.au/justPics/horiz.png>

    --
    dorayme
    dorayme, Feb 3, 2009
    #4
    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. Bart Schelkens

    Horizontal menu at the bottom of the page

    Bart Schelkens, Feb 7, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    333
    Bart Schelkens
    Feb 7, 2005
  2. itzikkl
    Replies:
    0
    Views:
    5,763
    itzikkl
    Mar 27, 2005
  3. Emil
    Replies:
    1
    Views:
    531
    Manuel Ricca
    Dec 11, 2007
  4. Philip
    Replies:
    1
    Views:
    316
  5. Hoa

    Horizontal menu with same width menu items

    Hoa, Aug 30, 2006, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    262
Loading...

Share This Page