A better way of doing this menu?

[Hardeep Rakhra]

Heya,

I've just knocked together a menu using the example at

http://css.maxdesign.com.au/floatutorial/tutorial0613.htm

But rather than leave the extra space to the right when your menu
elements do fill it up, I've used additional padding to the left and
right of the links to squeeze the bank space out. But this involves
setting the padding in very precise abouts like 2.77em, which seems crap
way of doing it. Is there any way you can cause each link element to
use up as much space as it possibly can thus creating something like
what i already have.... see here...

http://www.rakhra.org.uk/menusample.png

Thanks in advance for any advice.

Hardeep.

------ css ------

..inlinelist {
list-style-type: none;
padding: 0em;
margin: 0.5em 0em;
float: left;
width: auto;
border: 0.063em solid #ccc;
border-right: none;
}

..inlinelist li {
display: inline;
}

..inlinelist li a {
float: left;
width: auto;
padding: 0.425em 2.75em; /*0.3 */
color: #191970;
background-color: #fff;
text-decoration: none;
border-right: 0.063em solid #ccc;
font-weight: bold;
}

..inlinelist li a:hover
{
padding: 0.3em 2.77em;
font-weight: bold;
background-color: #f2f2f2;
border-bottom: 0.125em solid #ccc;
}

----- html ----

<ul class="inlinelist">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Ask An Expert</a>
</li>
<li>
<a href="#">Gift Ideas</a>
</li>
<li>
<a href="#">How To Buy</a>
</li>
<li>
<a href="#" class="lastmenuitem">Join</a>
</li>
</ul>

 

[Steve R.]

Hardeep Rakhra wrote in message ...

I've just knocked together a menu using the example at
http://css.maxdesign.com.au/floatutorial/tutorial0613.htm

But that is all at a fixed width and as a consequence requires a lot of
scrolling. Why don't you make the page fit any size monitor ?

Please read ...

Design for Any Size:
http://allmyfaqs.com/faq.pl?AnySizeDesign

The Myth of 800x600:
http://www.ddj.com/documents/s=2684/nam1012432092/index.html

How Can I Make My Pages Look Good On All Monitors?
http://www.thepattysite.com/window_sizes1.cfm

 

[Hardeep Rakhra]

Steve R. wrote:

But that is all at a fixed width and as a consequence requires a lot of
scrolling. Why don't you make the page fit any size monitor ?

Actualy I have had a look at those site during the course of follwoing
this group, and even the discussion a few posts down (or up) from this
one.

And when it comes down to I like fixed width layouts.

Anyhow back to the issue, any ideas for thenu prob?

Hardeep.

 

[Steve R.]

Hardeep Rakhra wrote in message ...

And when it comes down to I like fixed width layouts.

But the world at large prefers layouts that fit any size browser, so in
effect you are telling some of your customers to go away, especially with
all the scrolling they currently have to do at that narrow width.

 

[Hardeep Rakhra]

But the world at large prefers layouts that fit any size browser, so in
effect you are telling some of your customers to go away, especially with
all the scrolling they currently have to do at that narrow width.

Me and the world at large just don't see eye to eye i guess. Narrow
with? I would have said it was too wide, page length (vertical scroll)
is another matter all together.

 

[Els]

Heya,

I've just knocked together a menu using the example at

http://css.maxdesign.com.au/floatutorial/tutorial0613.htm

But rather than leave the extra space to the right when your menu
elements do fill it up, I've used additional padding to the left and
right of the links to squeeze the bank space out. But this involves
setting the padding in very precise abouts like 2.77em, which seems crap
way of doing it. Is there any way you can cause each link element to
use up as much space as it possibly can thus creating something like
what i already have.... see here...
http://www.rakhra.org.uk/menusample.png

Easy, but not to the likings of quite a few people in this
group: put them in a table of 100% width.
<table style="width:100%">
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Products</a></td>
<td><a href="#">Ask An Expert</a></td>
<td><a href="#">Gift Ideas</a></td>
<td><a href="#">How To Buy</a></td>
<td><a href="#">Join</a></td>
</tr>

<ul class="inlinelist">
<li>
<a href="#">Home</a>

Well, you would have to skip the <ul> and <li> bit of course...

I've tried first using <ul> and <li>, but the only way I see
to have them nicely spread over a certain width, is indeed
by adding padding or margin.

 

[Hardeep Rakhra]

Easy, but not to the likings of quite a few people in this group: put
them in a table of 100% width.
<table style="width:100%">
<tr>
<td><a href="#">Home</a></td>
<td><a href="#">Products</a></td>
<td><a href="#">Ask An Expert</a></td>
<td><a href="#">Gift Ideas</a></td>
<td><a href="#">How To Buy</a></td>
<td><a href="#">Join</a></td>
</tr>
</table>

Yeah, that's the only real way, but was try to avoid it. Have resigned
to doing it with padding. It's there and work so i'll guess it'll do.

Hardeep.