Horizontal Menu

Discussion in 'HTML' started by Sprechen Sie C++, Jul 9, 2011.

  1. I have spent a lot of time on Google without finding what I want

    I have a menu now using a table, works

    I was want to copy it using a ul/li object and style, but I am having
    problems spanning it across the full width

    I want each link to be equally spread across the screen as well

    no drop down, simple menu bar is what I want

    ideally each item can have its own style so I can color it etc
     
    Sprechen Sie C++, Jul 9, 2011
    #1
    1. Advertising

  2. Sprechen Sie C++

    idle Guest

    On Fri, 8 Jul 2011 18:33:48 -0700, Sprechen Sie C++ wrote in alt.html:

    > I have spent a lot of time on Google without finding what I want
    >
    > I have a menu now using a table, works
    >
    > I was want to copy it using a ul/li object and style, but I am having
    > problems spanning it across the full width
    >
    > I want each link to be equally spread across the screen as well
    >
    > no drop down, simple menu bar is what I want
    >
    > ideally each item can have its own style so I can color it etc


    http://www.csstea.com/css-gallery-n...xcellent-examples-of-css-horizantal-menu.html

    --
    idle
    None of us is as good as all of us.
     
    idle, Jul 9, 2011
    #2
    1. Advertising

  3. Sprechen Sie C++

    dorayme Guest

    In article <7eORp.36890$>,
    "Sprechen Sie C++" <> wrote:

    > I have spent a lot of time on Google without finding what I want
    >
    > I have a menu now using a table, works


    Perhaps, to take an example of 4 menu items, with HTML a bit like
    this:

    <table>
    <tr>
    <td><a href="item.html">item</a></td>
    <td><a href="item.html">item</a></td>
    <td><a href="item.html">item</a></td>
    <td><a href="item.html">item</a></td>
    </tr>
    </table>

    ?

    And maybe CSS like this:

    body {margin: 0;}

    table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    }

    td {border: 1px solid;}

    td a {text-decoration: none;}


    >
    > I was want to copy it using a ul/li object and style, but I am having
    > problems spanning it across the full width
    >


    With HTML a bit like this:

    <ul>
    <li><a href="item.html">item</a></li>
    <li><a href="item.html">item</a></li>
    <li><a href="item.html">item</a></li>
    <li><a href="item.html">item</a></li>
    </ul>

    ?

    > I want each link to be equally spread across the screen as well
    >
    > no drop down, simple menu bar is what I want
    >
    > ideally each item can have its own style so I can color it etc


    So let's start to add a few styles. To give you a handle for
    individual styling you could class each instance of the list
    element. But just one class will do (for a minor subtlety) should
    do to illustrate a way to mimic a 4-item 4-cell 1-row table way:

    <ul>
    <li><a href="item.html">item</a></li>
    <li><a href="item.html">item</a></li>
    <li><a href="item.html">item</a></li>
    <li class="last"><a href="item.html">item</a></li>
    </ul>

    with

    ul {
    border: 1px solid;
    overflow: hidden;
    padding: 0;
    list-style: none;
    }

    li {
    float: left;
    text-align: center;
    width: 25%;
    }

    li a {
    display: block;
    border-right: 1px solid black;
    text-decoration: none;
    }

    ..last a {border: 0;}

    Of course, if you have more than four menu items, you will need
    to do different maths for the percentages and there are other
    problems to avoid.

    Just for the record, I must say that centring things is
    over-rated and so is force-spreading things across users
    viewports. In fact it could look odd and be impractical on a huge
    monitor with a browser at full screen (practically the first
    thing many folk using Windows seem to do from my observation).

    --
    dorayme
     
    dorayme, Jul 9, 2011
    #3
  4. 2011-07-09 4:33, Sprechen Sie C++ wrote:

    > I have spent a lot of time on Google without finding what I want


    I think you could have spent your time more productively.

    > I have a menu now using a table, works


    So what's the problem, then? If it's not broken, don't fix it.

    > I was want to copy it using a ul/li object and style,


    Just stop wanting that.

    It would get clumsier, less flexible, unless you use CSS features like
    display: table and display: table-cell, which still lack support in
    important browsers.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jul 9, 2011
    #4
  5. I have created a table menu that is more or less where I wanted to be.

    See my gaming site where I rolled it out

    http://www.hardcore-games.tk

    I am using a rather complex style sheet compared to my usual approach
     
    Sprechen Sie C++, Jul 11, 2011
    #5
  6. Sprechen Sie C++

    dorayme Guest

    In article <HqHSp.47201$>,
    "Sprechen Sie C++" <> wrote:

    > I have created a table menu that is more or less where I wanted to be.
    >


    Everyone knows it can be done easily in a table and you knew it
    too. So what is the purpose of *this* post?

    > See my gaming site where I rolled it out
    >
    > http://www.hardcore-games.tk
    >
    > I am using a rather complex style sheet compared to my usual approach


    You asked how to do it with ul/li, another poster told you not to
    want this and you put your tail between your legs and kept your
    table. I suggested a way for you to use a UL list and I say that
    though your website is called "Hardcore" something consider
    changing it to Softcore.

    <g>

    --
    dorayme
     
    dorayme, Jul 12, 2011
    #6
  7. >You asked how to do it with ul/li, another poster told you not to
    want this and you put your tail between your legs and kept your
    table. I suggested a way for you to use a UL list and I say that
    though your website is called "Hardcore" something consider
    changing it to Softcore.

    Can you show me a style and html that can clone the table or is the table
    slightly more powerful?
     
    Sprechen Sie C++, Jul 12, 2011
    #7
  8. Sprechen Sie C++

    dorayme Guest

    In article <HYNSp.40701$>,
    "Sprechen Sie C++" <> wrote:

    > >You asked how to do it with ul/li, another poster told you not to

    > want this and you put your tail between your legs and kept your
    > table. I suggested a way for you to use a UL list and I say that
    > though your website is called "Hardcore" something consider
    > changing it to Softcore. <g>
    >
    > Can you show me a style and html that can clone the table or is the table
    > slightly more powerful?


    Seems illogical to say "Can you show me a style..." after you
    quote my "I suggested a way..."? I did show you how to do it in a
    previous post, I included all the HTML and the CSS.

    As for the table way being slightly more powerful, what does
    powerful mean here?

    * It is *easier* for most authors to make, because a table is
    very much a visual aid, the looks we often want are *natural* and
    *built in* to them. For example, if you have just n cells in a
    one row table, and say to make the table 100% wide, providing the
    content is about the same in width, the browser will tend to do
    the work of dividing into n equal cells across, you not having to
    do any more than tell it to stretch to 100% wide as against its
    natural tendency to shrink to fit its content.

    * A one row table is not all that different in its semantics to a
    simple list. They are close enough to mean the same. However, in
    a sense, the table is overkill, *too powerful* for the job. The
    sense being that a table comes into its own in organising lists
    of things, relating items in these lists to each other in a
    visually suggestive manner. A simple set of menu items hardly
    requires the power of a table. Maybe tables don't like being
    dragged into doing menial things that lesser elements can do,
    consider this.

    * A table is in general not as flexible for a simple menu list:
    for starters, rows do not wrap. If the user has a browser whose
    viewport cannot accommodate all the menu in a horizontal line he
    needs to scroll. With a list that is styled flexibly, the menu
    items that cannot fit in to the right will wrap to the next line
    and so people with narrow viewports need not scroll.

    --
    dorayme
     
    dorayme, Jul 12, 2011
    #8
  9. I agree a table can do the job, I was simply wanting to understand other
    menu approaches should I do another web site.

    My gaming site now is better than it was, mainly due to an overhaul in the
    style sheet.

    CSS is complex and it takes a lot of effort to remember every nuance.
     
    Sprechen Sie C++, Jul 15, 2011
    #9
  10. Sprechen Sie C++

    dorayme Guest

    In article <xyWTp.69339$>,
    "Sprechen Sie C++" <> wrote:

    > I agree a table can do the job, I was simply wanting to understand other
    > menu approaches should I do another web site.
    >
    > My gaming site now is better than it was, mainly due to an overhaul in the
    > style sheet.
    >
    > CSS is complex and it takes a lot of effort to remember every nuance.


    Why did you not say that if someone suggested a way to do what
    you might have wanted, you would in no way comment on it even to
    the extreme extent of not saying whether it actually did what you
    wanted whether you understood it or not?

    --
    dorayme
     
    dorayme, Jul 16, 2011
    #10
    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:
    336
    Bart Schelkens
    Feb 7, 2005
  2. itzikkl
    Replies:
    0
    Views:
    5,775
    itzikkl
    Mar 27, 2005
  3. Emil
    Replies:
    1
    Views:
    536
    Manuel Ricca
    Dec 11, 2007
  4. Philip
    Replies:
    1
    Views:
    319
  5. Hoa

    Horizontal menu with same width menu items

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

Share This Page