Problem with DIV positioning

aix0 · 15 May 2010 at 12:31

Hi Folks

I think this will be an easy one to solve, but I can't get my head around it, mainly because I'm new to CSS and the like.

I'm trying to build a simple navigation bar, as below:

Code:

<div id="navigationBar">
    <div class="navigationButtonCurrent">Home</div>
    <div class="navigationButton">About</div>
    <div class="navigationButton">Contact</div>
</div>

I can't get the first DIV to position correctly, as you can see. The first DIV should sit higher than the others, but it defaults to overflowing at the bottom.

Any ideas how I can fix this?

Thanks

unwashed potato! · 15 May 2010 at 13:07

we need CSS!

have you tried setting it to vertical-align: top;?

aix0 · 15 May 2010 at 13:16

OK, I'll post the CSS. Bare in mind, I'm new to this! It's probably all wrong / big mess / laughable!

Actually, would it be best if I post the site URL?

EDIT -

Here's the URL http://OMGeek.co.uk

I've just chopped this up over the past day, I'm just learning, so it's really messy (the code). Any recommendations / suggestions on re-structuring code etc would be appreciated though!

Thanks

aix0 · 15 May 2010 at 13:53

I don't think it parses correctly in IE. I've only tried it in FF and it works almost as I want it to. The JQuery Corners don't seem to work in IE?

djkav · 15 May 2010 at 15:52

aix0 said:
Hi Folks

I think this will be an easy one to solve, but I can't get my head around it, mainly because I'm new to CSS and the like.

I'm trying to build a simple navigation bar, as below:

Code:

<div id="navigationBar"> <div class="navigationButtonCurrent">Home</div> <div class="navigationButton">About</div> <div class="navigationButton">Contact</div> </div>

I can't get the first DIV to position correctly, as you can see. The first DIV should sit higher than the others, but it defaults to overflowing at the bottom.

Any ideas how I can fix this?

Thanks

*For starters, your green current tab looks to be bigger in height than the main "navigationBar" div wrapper.

Also you could use the Unordered List for the navigation buttons. Divs are mainly used for content seperation/section division. Don't get in to the habbit of wrapping everying within a div tag. Theres many other tags for specific uses. Just my opinion

*Not seen ur CSS code yet, im just going from obersvation.

aix0 · 15 May 2010 at 16:01

Thanks for your reply. That's a fair point about the DIVs, I'll try and change it to use a list instead. Most of the tutorials I've come across on the 'net suggest using a list, I was just sticking with what I know'ish.

It is a work in progress, hopefully I can use this thread for any help I might need along the way. Last time I attempted to build a site, tables were the norm for positioning - it seemed a lot simpler.

Thanks