Previous Message
Next Message

[css-d] Centred menu at top of page

Sent by Simon Heywood on 29 January 2002 19:07


Dear css-ers,

Just playing about with css really and doubt I will
ever find enough time to finish anything I've started
off.  Got two related questions regarding constructing
a navigation menu that is centred across the top of a
page (bored of the left and right ones).

1) How to create a navigation menu that has a
container div that is centred, with equally spread out
div boxes in this with my navigation links

2) Trying to get away from image maps (so I can use
alt text) and tables, I have a navigation bar that is
made up of sliced up images.  I have positioned these
using a negative margin technique so that each slice
is positioned next to each other, but the composite
effect is that the whole navigation bar remains
centred as the browser window is resized.

You can see this at

homepage.mac.com/heywood_si/test/newlayout.html

please ignore the text (just messing about).  Now
then,  I get the result I want in mozilla 0.9.7 and
ie5.1 (both on mac), but in mozilla the slices of the
images (which obviously are links) do not work on the
left hand side (what? and why?), the centre link
(who?) works as long as the mouse is on the right hand
side and the links on the right hand side (where? and
when?) work as expected.  Something to do with the
negative margin effect I guess.  However in ie5.1 it
works. You can click on all links.  I am gutted
because I am a total mozilla zealot.  FYI the links
are all dead.

Hmmm this doesn't sound too clear.  I hope you get it.

The relevant css is:

div.belowtitleimage1 {
margin-left: -232px;
position: absolute;
left: 50%;
top: 105px;
}

div.what {
margin-left: -245px;
}

div.what, div.why, div.who, div.where, div.when {
position: absolute;
top: 125px;
left: 50%;
}

div.why {
margin-left: -147px;
}

div.who {
margin-left: -49px;
}

div.where {
margin-left: +49px;
}

div.when {
margin-left: +147px;
}

div.navbar {
position: absolute;
top: 10px;
left: 50%;
height: 200px;
width: auto;
}

div.titleimage1 {
margin-left: -232px;
position: absolute;
top: 10px;
left: 50%;
}

div.content {
position: relative;
top: 200px;
margin-left: auto;
margin-right: auto;
width: 500px;
border: 1px solid;
}

Any better ideas and suggestions are welcome.  I have
given up trying myself.  Brain hurts..

Thanks in advance

(If you want you can reply to me directly and I'll
post a summary... kind of up to you)

Simon Heywood

__________________________________________________
Do You Yahoo!?
Everything you'll ever need on one web page
from News and Sport to Email and Music Charts
http://uk.my.yahoo.com
Previous Message
Next Message

Message thread: