4 replies [Last post]
thetasigma2
Offline
newbie
Last seen: 15 years 38 weeks ago
Joined: 2007-03-08
Posts: 2
Points: 0

Hi before I get started let me say, thanks for providing a beacon to this lost sailor in the sea of CSS. I'm pretty much totally new to it, and only been learning for approx 4 days now. D'oh forgetting so much in this post...forgot to mention this problem is in FF, ain't tested it in IE yet, I'm thinking of writing a separate stylesheet altogether for use with IE seeing as its so non-standards compliant.

My problem with my page is basically the dreaded

tag. I've managed to align my navigation bar in the horizontal centre of the page. Although after verifying it with several people, I have found it is shifted towards the right.

The code I used to get it to it's current position is as follows.

CSS div.navbar { position: absolute; width: 60%; margin-left: 20%; margin-right: 20%; text-align: center; }

Why will this not work? It has me baffled, after hours of trying various 'fixes' and searching of the forums here...

While I'm at it, I'm curious to know if it may be an issue with the

s not taking up the full width of the body? I've tried to adjust their 'position:' values to '0px;' on 'left:' and 'right:' although this doesn't seem to have the desired effect.

My site is hosted at http://ox.herderbezem.nl/Sorak/

Hope you guys can help me with this!
Thanks

PS
You'll have to excuse the garish colour scheme, I used it on the advice of a friend, to aid in working out where my

s began and ended.

**edit**
oh yeh, I should mention, the look I'm going for is something similar, although obviously different to what you have on this site. A space for an image or banner of some sort at the top with a horizontal navigation bar beneath.
And eventually if I ever get around my divitis... a side navigation bar, for sublinks of the pages in the horizontal navbar.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

The answer to your question

The answer to your question is ...

It HAS to be Sam Carter. Come on. No contest.

I'll take a look at your code now Smile

First impression, the navigation should be a UL not a div, with li's and anchors inside.

There are so many demo's of how to do a ul horizontal menu out there. For simplicity check out pmob, or cssplay. (both .co.uk)

BTW, if I seem a bit high, I'm tucking in to a real cool Kron 1664 listening to Planet Rock. Oh yes.

OK, had a play, see this new css:

div.navbar { position: relative; width: 60%; margin-left: auto; margin-right: auto; text-align: center; } .navbar a { height:2em;line-height:2em;float: left; text-align: center; text-decoration: none; color: black; background-color: blue; display:block;width:25%;}

thetasigma2
Offline
newbie
Last seen: 15 years 38 weeks ago
Joined: 2007-03-08
Posts: 2
Points: 0

Hmmm had a quick look at it,

Hmmm had a quick look at it, and it certainly looks to my eyes to be in a much more centralised location. I'll verify this tomorrow with my buds, and with a ruler (don't have one here Tongue )

Also how does the display: block; affect the s? I'm presuming this merely sets each within a box right?

Anyway, thanks for that little bit of advice, already I feel a little closer to getting over my divitis.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 4 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Display block allows you to

Display block allows you to set fixed height and width, but, causes the element to behave like a div, so they stack vertically, not horizontally. Making them float allows them to line up horiz.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 22 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

I'm gonna have to say

I'm gonna have to say O'Neill. The Groundhog Day episode where he was playing golf with Teal'c through the Stargate? Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies