nav bar help

  FOEYDO 17:47 11 Apr 06
Locked

Hi Ihave just designed a new website using css, all hand written html. I have placed the nav bar on the right, just for a new look and am happy with the new look, the nav bar doesnt come below the body text. I have used this code in css file

.nav
{
border-style: solid;
background-color: #812B36;
border-bottom-width: 1px;
border-color: #812B36 #812B36 #812B36;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
color: #fff8dc;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-indent: 1px;
text-transform: none;
text-align: center;
position: absolute;
top: 180px;
right: 1px;
width: 170px;

}

Only problem is that when the page is minimised the nav bar appaers in the middle over the body text, i need it to stay where it is and not move. any help would be great

  PurplePenny 20:23 11 Apr 06

Can you post a link? As the nav bar is absolutely positioned it should remain 180 pixels from the top no matter what you do to the window. Is the text moving up underneath it? Make the window smaller gradually and see whether you can spot what is happening.

  splatter 20:25 11 Apr 06

Try settings the posistion to left instead of right? eg:

top: 180px;
left: 400px;
width: 170px;

Just a maybe?

  PurplePenny 20:29 11 Apr 06

Ah, I've just reread your post. It is absolutely positioned on the right (for some reason I missed that and was imagining it across the top). How have you allowed for the space taken by nav bar in the CSS for the main body text?

  FOEYDO 08:16 12 Apr 06

it all is perfect when maximised but only when window is minimised the right hand nav bar is moving across

  PurplePenny 12:43 12 Apr 06

It will do because it is absolutely positioned so it is taken out of the normal flow of the page. It will be in that same position no matter what else is going on onscreen.

You need to allow for it in the CSS of the body text. Give that padding-right of 171px to make room for the nav bar.

  FOEYDO 13:21 14 Apr 06

hi purple penny thanks for your advice can u pleas tell me how to add this and where? thanks im pretty new to css

  PurplePenny 23:14 14 Apr 06

I'll need to know more about the structure of your page and CSS. Can you post a link?

  PurplePenny 21:25 15 Apr 06

Thanks for sending me the link. I'm afraid that there isn't much you can do at the moment. You've got a lot of nested tables in there and because of the arrangement of tables and cells it isn't possible to give any one of them the padding to allow for the absolute positioning.

I think that you would be better off getting rid of the absolute positioning and try to re-order the table cells so that the nav bar comes out in the correct place. (CSS positioning is really meant to be used with Divs, to replace tables for layout.)

  John-277922 17:51 26 Apr 06

Try removing absolute positioning and place in a div and float left
<div style="float:left; padding:10px">Home</div>

  FOEYDO 18:20 26 Apr 06

Hi Jasa Thanks where would I position the div and would I have to add anything to the css

This thread is now locked and can not be replied to.

Nintendo Switch review: Hands on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

Here's what should be coming to Adobe Project Felix in 2017

Apple AirPods review: Apple's beautiful new Bluetooth headphones bring true intelligence to…