0

Basically I have a navbar and a title, that both have the properties, position: fixed; top: (VALUE I INSERTED); My problem is that obviously when I write the main body of the document the text is underneath the title/navbar. I need to get the text to be underneath the title and navbar, but without it having a fixed position. If any more information with code is needed, just comment saying so. Thanks in advance.

orano10000
  • 211
  • 1
  • 2
  • 9

3 Answers3

3

apply to your main content area 

#content {
    margin-top: YOUR HEADER HEIGHT
}
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
1

The best way you can do that is to have the entire site after the bar what you call the main body in a Container like div. This would give you freedom to manipulate it as well as customize it to your needs in future.

For measuring the height in Pixels. Install the web developers extension for firefox And then restart firefox and Click on the option pointed by image below and use the ruler for that.

Click on Miscellaneous as shown and activate 'DISPLAY RULER' enter image description here

Then Click and drag to measure and take the height and width as represented

enter image description here

Shiv Kumar Ganesh
  • 3,799
  • 10
  • 46
  • 85
1

First of all, wrap the main content area in a div (e.g id="wrapper",), then apply the css:

the html will look like so:

<div id="wrapper">
<p class="title">About</p>
<h6 class="bottom"><marquee>This page is the about page of 'Fred's Page'</marquee></h6>
<p class="body">Main body of document. At the moment it's in a fixed position.</p>
</div>

and the css:

#wrapper{
margin-top: 25px; //your actual navigation bar height. (as @Zoltan Toth suggested)
}
menislici
  • 1,149
  • 5
  • 18
  • 35
  • OK, thanks menislici for staying with me :) as I asked shiv kumar ganesh, is there any way i can measure the height in pixels? – orano10000 Jul 07 '12 at 21:03
  • yep i guessed the html, just a basic div tag with the id, I'm also assuming using a class instead is ok? – orano10000 Jul 07 '12 at 21:05
  • btw, I found your navbar value to be 25px thanks to inspect element option in chrome contextual menu, but you can use different tools as well, such as [firebug](https://addons.mozilla.org/en-US/firefox/addon/firebug/) for mozilla – menislici Jul 07 '12 at 21:06
  • ok thanks, the only thing is i need the pixel number to include the title and that spacing too but I guess I'll just slowly measure it :D – orano10000 Jul 07 '12 at 21:07