Forum Home
Press F1
 
Thread ID: 108649 2010-04-06 04:32:00 Help styling Menu with CSS - &^*&%$ CSS Morgenmuffel (187) Press F1
Post ID Timestamp Content User
873465 2010-04-06 04:32:00 Ok

nigel.geek.nz

the image at top is what the person wants, and yes the gaps under the middle dividers are intentional, Unfortunately i just can't get it to work, it looks like such a simple thing to do, but it has beaten me,
I cannot get it to work cross browser,
and for the life of me i can't get the links to "Fill" out the menu, and the menu width of course stretches with the page.

Any help would be appreciated as I have spent since 8am on this and i just can't seem to hit it.

Any help is appreciated, but it does need to work in IE6, IE7, IE8 FF etc
Morgenmuffel (187)
873466 2010-04-06 05:56:00 Any help is appreciated, but it does need to work in IE6, IE7, IE8 FF etc

Pick three. :rolleyes:
pcuser42 (130)
873467 2010-04-06 06:11:00 Do you want equal width for the links? Renmoo (66)
873468 2010-04-06 06:47:00 Do you want equal width for the links?
Not particularly as some of the links are longer and when the site is at it's minimum width it is a bit tight, and if all the divisions where the same width, then some would splill to two lines which I don't want

the reason the spans are all set at an equal width is I just got to that point where you throw everything at it and hope something works

Thanks for looking at
Morgenmuffel (187)
873469 2010-04-06 06:52:00 Pick three. :rolleyes:
I can't get any 3 of those to display the same let alone all browsers
Morgenmuffel (187)
873470 2010-04-06 13:35:00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org
<html xmlns="www.w3.org dir="ltr" lang="en">
<head>
<title>Test</title>
</head>

<body>
<div style="width: 100%; height: 20px; margin: 0 auto; border: 1px solid blue;"><!-- Wrapper -->
<div style="width: 19%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
<div style="width: 9%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
<div style="width: 29%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
<div style="width: 34%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
<div style="width: 4%; float: left; border-right: 1px solid purple;"><a href="link.htm">Link</div>
</div>
</body>
</html>

Hopefully this will provide some sort of inspiration.

You can try reverse-engineer from the existing templates in the OSWD database. Good luck :)
Renmoo (66)
873471 2010-04-06 23:25:00 Thanks Jamuz, that set me on the right track, I only had to do a couple of very minor changes to get the gap working in IE.

Much appreciated
Morgenmuffel (187)
1