CSS Hover Issue

[Alan_Breck]

Hello,

I apologize if this sounds like a stupid question, but I’m learning here!

I’m playing around with having a box appear on the sidebar links when hovered over, but when I add some padding to them, everything below that link shifts down. Can anyone tell me why this is and explain how to avoid it in the future?

The link – http://bonusest.com/clients/ourchosenheritage/
(This site is still in progress, so please excuse the rough nature of the design)

Thank you!

~A.B.

[Alan_Breck]

P.S. Please feel free to critique (aka: rip to shreds) the code – any opportunity to learn is GREATLY appreciated!

[noahgelman]

style.css, line 34

#sidebar a { color:#282828;}

style.css, line 35

#sidebar a:hover { background-color:#282828; color:#FFF; padding:5px;}

On your hover style, you add padding, that’s why it jumps around. Either remove the padding or move the padding on line 35 to line 34

[Alan_Breck]

Thank you so much for the response! Do you have any other general critiques regarding the code’s cleanliness, efficiency, etc.?

Thank you!

[soap]

Code looks fine, matey.

Question:
Why do you have a footer container and a footer? Is this for something you are planning in the future? As it is right now you wouldn’t need two footers..

[Tim_at_PlattFormAd]

Hello – since you seem to be pretty open to some code critiques, I’ll throw my two cents in. These are based on my personal coding style, so feel free to question or not use these pointers.

• Why do you have a script tag above your title tags? Seems like a peculiar place for that. I normally put any Javascript at the bottom of the page before the closing body tag.
• You have a “pageWrap” div and a “bodyWrap” div. I think you could have just styled the body tag in your CSS and dropped those extra divs.
• None of your HTML is tabbed. It makes it hard to scan.
• You comment all of your closing tags – I do this practice as well. I highly encourage it!

Anyways – just giving some feedback. I like your enthusiasm for improving your code!

[Alan_Breck]

Great – thank you all so much for the comments!

@soap: That was an attempt to do something that I’m having trouble doing! I want the footer to be that wine color – no matter how much it is zoomed out, or how large the screen is (like this site’s footer). But I also have the scrawly pattern in the center of the footer. I have a feeling that this should be really simple, but somehow I’m stumped. The idea was to have the ‘footerContainer’ be the color with no width so it goes across the entire screen, and the ‘footer’ be where all the info is, with the scrawly/shadow images as it’s background. You can see the newest version of the site here. Here’s the CSS –

#footerContainer {
background: rgb(105, 70, 70);
margin: 0 auto;
min-height: 250px;
height: auto !important;
height: 250px;
}

#footer {
background: url(“../images/footer_bg.png”) repeat-y, url(“../images/footerContainer_bg.png”) no-repeat;
width: 1100px;
min-height: 110px;
margin: 0 auto;
padding: 28px 0 32px 0;
}

Any ideas how I can make this more efficient… or rather… work?

@Tim_at_PlattFormAd:

[soap]

EDIT:

Just read this:

The footer element is not sectioning content; it doesn’t introduce a new section.

Although footers are typically located at the bottom of a document, this is not required (although it cannot be placed within a header or another footer element, and it cannot contain a header element).

A document/section can have more than one footer.

I gather from that that you can use the footer tag as your site’s main footer as well as footers for other sections of content. Very cool!

[Alan_Breck]

Thank you for checking on that! I had a footer within a footer, so I just changed the inner footer to a div.

Any ideas on keeping the footer at the bottom of the page at all times?

[Author]

Posts