G 2

I am making a navigation bar that will show up on the bottom of each page; however, each page is a different length. When I first created the nav bar, I moved the styles to an external style sheet so I could link it to other pages as I went along, hoping that I wouldn't have to keep creating new div's and rollover images for the exact same links each time. However, I forgot that the CSS styles record the positioning of each element (link)- when I went to link the CSS sheet to a new page, the navigation links were set up correctly, but in the wrong place (too far down the page). If I manually move them, that will change the positioning on the style sheet and in return, on all pages it is linked to, correct?

Is there a way to keep a style sheet, but change the instance of positioning for each new page- some rule I can write on each page?

Thanks!

  • sounds to me like you are approaching this from the wrong place. can you share a url for some of the pages, so we can suggest a better more robust approach? Tony Crockford about 7 years ago

4 answers

danwellman 5600
1
point

If you want to write the rul on each page you can define all of the base styles in your external stylesheet, then just use something like this in the head of each page:

<style type="text/css">
  #nav_bar { bottom: /*whatever value it needs to be */ }
</style>

Although I wouldn't recommend this as it would quickly become tiresome having to update every page and maintenance could be a pain...

Can't you set the nav bar to be absolutely positioned at bottom:0 with padding-bottom on the container equal to the height of the nav bar?

Answered about 7 years ago by danwellman
G 2
0
points

Hi- thanks for helping. I don't have an actual nav bar, just a bunch of images that make up the navigation on the bottom. In the browser window it looks a bar but each link is actually a rollover image. I haven't uploaded the page yet, so I can't give you a url to check out the code, but hopefully that makes sense...?

Answered about 7 years ago by G
  • Semantically speaking a series of links making up a navigation bar should be contained within an unordered list. This would give you a container for the nav bar that could easily be positioned danwellman about 7 years ago
0
points

A very simple way would be to apply an unique id to the body tag of each page.

<body id="homepage">
<body id="another-page">

etc.

Then, assuming your navigation bar is defined by the id "nav" you would use the following css to change the positioning on each page.

#nav {
/* generic css that doesn't change per page here */
}

#homepage #nav {
/* change positioning */
}

#another-page #nav {
/* change positioning */
}

There is bound to be more efficient ways of achieving the effect you're after, but this is simple solution that'll work.

Answered about 7 years ago by James Burton
G 2
0
points

I see what you are saying, but it doesn't seem to be working. It is now putting them (the nav link images) stacked on top of each other (should be in horizontal layout). I tried making an extra div to contain all the nav elements, like an envelope, but I am not sure if that would work- doesn't seem to show up for some reason.

Answered about 7 years ago by G
  • try floating the <li> to the left, that should make them stack up horizontally. danwellman about 7 years ago