Issues applying my menu to a forum page

HTML & CSS
1

Hi there everyone!

I’m trying to apply a menu to the top of a template of a forum. The issues I’m having are threefold: One, the forum content is not sliding down the page. It’s showing up underneath, secondly, it’s pushed the menu and logo up the page. Finaly, it’s made the text incredibly small on the menu.

Here’s how the menu looks when it’s operating properly and[URL=“http://schw.im/yakety-yak”] here is how it looks in the forum.

Any help with resolving these issues would be greatly appreciated!

2

Hi,

You can’t just move code into another page without it inheriting whatever is going on in that page :slight_smile: (unfortunately).

Your nav is set to 90% so it gets 90% of whatever you set the parent to and that is different in both those pages. You have also absolutely positioned the nav in the forum page which is why it overlaps.

Looks like these couple of rules would get you back on track.


#top{position:relative;top:0}
#masternav > li > a {font-size:125%}
3

Hi there and thanks very much for your help!

I’ve applied the text-size fix and it worked great, but I think I’ve messed up the application of your fix for the top being overrun. Here’s what I altered in the stylesheet:

html, body, #top {
    height:10%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

to

html, body, #top {
    position:relative;
    top:0;
    height:10%;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

Did I apply this incorrectly? A force-refresh didn’t change the overrun problem.

4

HI,

No you have a rule further down the stylesheet and that is the one that you should be changing.

At Line 642:


#top {
position: absolute;
top: -20px;
}

Change the above to the code I gave you and leave the html body rules alone.

Also note that you are using id=top elsewhere and will cause issues as ids must be unique.

5

Thank you very much for your help! I renamed my added id to stop the conflict with #top in the forum css. Once I did that, the issue went away without having to add anything else to mine. I need to get into the habit of personalizing my ids to stop something like this from happening, I think.

Thank you again!

6

IMO,

You would be ahead of the game if you would get in the habit of using classes instead of IDs. Why?
Classes can be repeated. IDs must be unique on a page.
An object (such as a div) can only have one ID, but it can have several classes.
IDs are “heavy-handed”; it takes a trainload of classes or the !important modifier to override a style in one ID.

IDs are useful as targets for JavaScripts, as targets for fragment identifiers (link targets within a page), and a few other similar things, but if used as the mechanism for distributing styles, they become burdensome.

You can get a better picture by reading about specificity.

My two bits