Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Re: horizontal menu

Reply
Thread Tools

Re: horizontal menu

 
 
Andy Dingley
Guest
Posts: n/a
 
      01-26-2009
On 23 Jan, 07:03, The Starmaker <(E-Mail Removed)> 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>
 
Reply With Quote
 
 
 
 
Chaddy2222
Guest
Posts: n/a
 
      01-26-2009
On Jan 27, 1:59*am, Andy Dingley <(E-Mail Removed)> wrote:
> On 23 Jan, 07:03, The Starmaker <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Andy Dingley
Guest
Posts: n/a
 
      01-26-2009
On 26 Jan, 16:39, Chaddy2222 <(E-Mail Removed)>
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).
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-03-2009
In article
<(E-Mail Removed)>,
Andy Dingley <(E-Mail Removed)> wrote:

> On 23 Jan, 07:03, The Starmaker <(E-Mail Removed)> 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
 
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