Division placement

**Disturbedguy** · 17-04-2012, 08:09 PM

Hi all,

Hopefully someone can help :/

I have been designing / coding a website recently. However I have been having a problem with division positioning and I just cant seem to get to the bottom of it and its beginning to frustrate me :@

Basically I have the following divs -

navigation - obviously for navigation
then divs named one, two, three and four.

The navigation div has a width of 100% while the other four divs have a width of about 900px or so (for now, will be altering it late more than likely) and the divs are positioned in the centre.

With the nav bar I have it set so if I click a link the nav bar is fixed position, so the page scrolls so to speak but the nav is always visible, done using jquery.

I am trying to get division 1 to appear below the nav bar however a bit of the top of the box is appearing under the navigation bar.

I cant for the life of me get it to appear below the nav bar :/

Hopefully that makes sense :/

**davesom555** · 18-04-2012, 09:51 AM

Have you tried making it:

position: relative;
top: 10px; (10 is the amount you want to shift them down.)

**Disturbedguy** · 18-04-2012, 11:39 AM

I did try that bit it didn't work, however later on I did find an error in the CSS which fixed another problem that may have been affecting this.

Will check when home and see what happens.

**scaryjim** · 18-04-2012, 04:47 PM

Sounds to me like you need to set margin-top on div 1, then just keep increasing that until the div shifts down enough to be seen when your nav bar is fixed. You could probably tie in setting the margin to the link that also fixes your nav bar, so that when the nav bar isn't fixed you don't have a stupidly big margin on the first div (I have understood that right, haven't I? Your nav bar normally moves, but you can click a link to fix it at the top?)

**Disturbedguy** · 18-04-2012, 06:01 PM

Its all fixed
When ive uploaded my fixes I may well upload what I have so far

Edit - http://www.shelleys-shop.com decided to upload now, ignore the odd colours and the fact it looks stupid, I like to get thinks looking ok-ish before I start the proper work on my sites.

**scaryjim** · 18-04-2012, 08:54 PM

hmmm, not bad

One thing though - in Chrome it has a gap at the top of the browser so as the sections scroll you can see them above the nav bar. You should be able to get rid of this by adding

Code:

<!DOCTYPE html>

at the very top of the page (this will also make the page HTML5 compliant

). This tells the browser that the html tag is the root of the document - modern browsers seem to assume that they need to add an anonymous root element if the page doesn't have a doctype

**Disturbedguy** · 19-04-2012, 08:06 AM

Originally Posted by scaryjim

hmmm, not bad

One thing though - in Chrome it has a gap at the top of the browser so as the sections scroll you can see them above the nav bar. You should be able to get rid of this by adding

Code:

<!DOCTYPE html>

at the very top of the page (this will also make the page HTML5 compliant

). This tells the browser that the html tag is the root of the document - modern browsers seem to assume that they need to add an anonymous root element if the page doesn't have a doctype

Thanks still a lot of work to do, hoping that when it has some content added it will look better than what it does now.

Yeah I had noticed that gap and was going to look into removing it today, so thanks for that. Hopefully it will work.

Hhmm didn't appear to work :/

**scaryjim** · 19-04-2012, 01:34 PM

Originally Posted by Disturbedguy

Hhmm didn't appear to work :/

I've just had a look and it's still showing as not having the <!DOCTYPE html> tag - indeed if you view the source in Firefox it highlights that there's an opening tag without <!DOCTYPE html> declaration...

**Disturbedguy** · 19-04-2012, 04:24 PM

Originally Posted by scaryjim

I've just had a look and it's still showing as not having the <!DOCTYPE html> tag - indeed if you view the source in Firefox it highlights that there's an opening tag without <!DOCTYPE html> declaration...

I should have been clearer I tested it at work on another copy of the site (i mess with it at work when bored

) and it didnt work.

I will try again when I am home. For the record the >!DOCTYPE html> should be at the top, right?

**scaryjim** · 19-04-2012, 04:31 PM

yep, should be the first thing on the page - it tells the browser what kind of document to expect.

**Disturbedguy** · 19-04-2012, 10:29 PM

I fixed it, with this

Thread: Division placement

LinkBack

Thread Tools

Division placement

Re: Division placement

Re: Division placement

Re: Division placement

Re: Division placement

Re: Division placement

Received thanks from:

Re: Division placement

Re: Division placement

Re: Division placement

Re: Division placement

Re: Division placement

Thread Information

Users Browsing this Thread

Posting Permissions