Need Help with DIV positioning – it seems to not "lock" in place.

[scathach]

Hi CSS Tricks!

My name is Scatt, and I’m new about the place, so first of all thanks for taking the time to help!

Here’s my battle with CSS/HTML;

http://www.neopets.com/~Felsaur

When you first click onto that page, you’ll notice everything is perfect, exactly the way I want it to be. :)

But if you click a navigation link, like “participate”, the rmain DIV ‘jumps’ to the top of the page, it is no longer positioned 198px from the top, like I’ve specified, and it makes a stack of text disappear behind the header image, effectively making it look like it is linking to the wrong section.

I’ve tried giving rmain a top margin, I’ve tried positioning it to the bottom (right now it is set to top), I’ve tried to put a transparent ‘spacer’ image at the top, I’ve tried a spacer div/float – nothing seems to work. I have also tried changing the position type from relative to absolute and fixed, but both of those result in my DIV deciding that it wants a scrollbar (and I really like it with the whole page scroll, as it looks a lot neater).

If there is any way to solve this conundrum, it’d be appreciated greatly!

I’m self-taught, so please explain slowly. ;)

Cheers guys!

~ Scatt.

[Atelierbram]

Curious about which tools ( code-editor, web-developer tools ) and resources you use (looking at your code it looks like they maybe outdated).

Have you ever used W3C validator .
Have you ever heard about web-standards, or semantic markup?

Also what books on web-design do you read, which websites, and what kind of articles on the web do you read?

I’m self-taught, so please explain slowly. ;)

Have you ever considered following a (online) course on web-design?

Don’t want to put you on the spot, but want to help you help yourself.

[scathach]

Curious about which tools ( code-editor, web-developer tools ) and resources you use (looking at your code it looks like they maybe outdated).

^ I don’t use any tools other than myself and the way I taught myself through Google etc. I don’t code for a living, therefore (forgive my ignorance) validation doesn’t really concern me, if it displays right, then I’m content with my little project. But, thank you for the link, I’ll look into it and hopefully learn plenty new. That site also has many coding restrictions, which makes life trickier.

shaneisme; thank you for your explanation. :) I was hoping to keep the header fixed, but I may need to reconsider this as per your advice. Thanks again for the feedback!

Cheers guys. (:

[Paulie_D]

This might be useful: http://learnlayout.com/

and look through some of Chris’ videos like this one: https://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/

[Atelierbram]

@scathach
Getting back to your question, I agree with @shaneisme … if anything, maybe swap margin-top for padding-top.

I used the core of your page to try something else that might not entirely relate to your issue, (fixed navigation on scroll, swaps out the header with javascript) but could also help you out, which as always depends on what you want.

Because I also feel that a fixed header of 175px height on a page isn’t improving any reading experience, and is generally not very user-friendly, it’s replaced here with the page-navigation that becomes sticky on scroll. Even where there’s only a 40px fixed element on top of the page, there’s still this same issue, but here overcome with top-padding that doesn’t need to be so large,( and some pseudo-elements to fix those visual gaps).

That site also has many coding restrictions, which makes life trickier.

When you make an account on Codepen, and fork this pen, then maybe life become less tricky.

validation doesn’t really concern me, if it displays right, then I’m content

Just a thought:
How long will you stay content, when you keep ‘hitting this wall’ ?

Good luck though.

[Author]

Posts