Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Horizontal Menu

Reply
Thread Tools

Horizontal Menu

 
 
Sprechen Sie C++
Guest
Posts: n/a
 
      07-09-2011
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


 
Reply With Quote
 
 
 
 
idle
Guest
Posts: n/a
 
      07-09-2011
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-ne...ntal-menu.html

--
idle
None of us is as good as all of us.
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      07-09-2011
In article <7eORp.36890$(E-Mail Removed)>,
"Sprechen Sie C++" <(E-Mail Removed)> 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
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      07-09-2011
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/
 
Reply With Quote
 
Sprechen Sie C++
Guest
Posts: n/a
 
      07-11-2011
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



 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-11-2011
In article <HqHSp.47201$(E-Mail Removed)>,
"Sprechen Sie C++" <(E-Mail Removed)> 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
 
Reply With Quote
 
Sprechen Sie C++
Guest
Posts: n/a
 
      07-12-2011
>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?

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-12-2011
In article <HYNSp.40701$(E-Mail Removed)>,
"Sprechen Sie C++" <(E-Mail Removed)> 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
 
Reply With Quote
 
Sprechen Sie C++
Guest
Posts: n/a
 
      07-15-2011
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.

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      07-15-2011
In article <xyWTp.69339$(E-Mail Removed)>,
"Sprechen Sie C++" <(E-Mail Removed)> 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
 
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
Menu items alignment for a horizontal menu Emil ASP .Net 1 12-11-2007 12:01 PM
Horizontal menu with same width menu items Hoa ASP .Net Web Controls 0 08-30-2006 02:31 AM
Horizontal Menu Navigation Web Control - Spaces Between Menu Items Philip ASP .Net Web Controls 1 03-21-2006 01:55 PM
Horizontal Menu and Sub menu in asp.net 2.0 itzikkl ASP .Net 0 03-27-2005 12:50 PM
Horizontal menu at the bottom of the page Bart Schelkens ASP .Net 0 02-07-2005 09:51 PM



Advertisments