[Solved] Fixed nav bar and div layout problem

[blyk]

I am really tired of this. I have asked the same question earlier but now I have made some changes and it screwed everthing again.

Problem:
1. Fixed div which contains ( name + logo + navigation ) is hiding the content. id=”header”
2. The div with the id=”three” has four div creating a 2X2 table like layout are not align properly in the center. Whenever I try to change the width to 50% it messed the layout and other divs float below to the other divs.
3. I am also not abe highlight the default link when the page load for the first time which is “About”.

codepen: http://codepen.io/anon/pen/pafDn

[Paulie_D]

One
This is a JS issue. based on your scrollpoint. I think you need to think in terms of an offset for each. But see comment about box-sizing later on.

$("html, body").animate( {scrollTop: $(navid).offset().top -220},"slow");

Two
Unless you use box-sizing:border-box the widths of your elements will be calculated excluding padding/borders.

So your 50% divs will each be 50%+ 1px wide (which adds up to 100% + 2px and so they don’t fit.

Be aware that once you’ve set it globally it might mean some minor tweaks here and there…alternatively, you could just set it as an when required. Me, I prefer globally.

Tweaked version for you.

http://codepen.io/Paulie-D/pen/fvBgs

I added the box-sizing tweak which reduces the offset by the padding on your header(?) down to 190px.

Three
You need to look into the various ways of setting a default ‘current’ link class. For small sites you c an do this manually by giving each page a class or ID and setting in the CSS like

#About.current {
background:orange;
}

Or there is JS..

[blyk]

oh! Pauli_D thanks again :)

[Author]

Posts