Horizontal Menu

[Sprechen Sie C++]

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

 

[idle]

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

 

[dorayme]

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

 

[Jukka K. Korpela]

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.

 

[Sprechen Sie C++]

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

 

[dorayme]

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>

 

[Sprechen Sie C++]

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?

 

[dorayme]

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?[/QUOTE]

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.

 

[Sprechen Sie C++]

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.

 

[dorayme]

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?