Why is my site's sidebard doing this?

astronaut

New Member
I am a newb to web design so please have patience with me. I help out with the web site for the hardware store I work for. It's nothing fancy and I wouldn't boast that it is. But what I will say is that it was working just fine a week ago. I didn't make any changes to it, and now all of a sudden, the right sidebar is appearing in the middle of the screen and I'm now getting a horizontal scroll bar. Does anyone have any idea why this is?

The URL is www.pacificacehardware.com

Thanks!
 

PixelPusher

Super Moderator
Staff member
The ads on the right are absolutely positioned, so they will always be, in your situation, 27 pixels from the right of the browser window. If you drag the window out (resize) you will see the ad-bar stick to the right side of the window, that is the nature of AP.

The horizontal scroll bar is a little weird....i could not see an obvious reason why this is happening, however it could be due to the bad coding of that ad-bar. List items (LI) are meant to be inside a list element (UL), not placed inside a header tag (H2). There is no need for that H2 tag, remove it. If you want to list the ads as list items (LI), my suggestion is to remove the div as well, because ULs are block level elements so you dont need to wrap them in a division (DIV). Style the UL with the same styles as the div and each time you add a LI it will just add to the bottom. Here is an example:

CSS
Code:
ul#adpanel {
background-color:#fff;
border:4px double #000000;
width:179px;
height:auto;
margin:0;
padding:0;
}
ul#adpanel li {
list-style-type:none;
width:173px;
padding:0;
margin:3px;
}
ul#adpanel a:link, ul#adpanel a:visited, ul#adpanel a:hover, ul#adpanel a:focus {
outline:0;
}
ul#adpanel img {
border:0;
}
 

astronaut

New Member
The ads on the right are absolutely positioned, so they will always be, in your situation, 27 pixels from the right of the browser window. If you drag the window out (resize) you will see the ad-bar stick to the right side of the window, that is the nature of AP.

The horizontal scroll bar is a little weird....i could not see an obvious reason why this is happening, however it could be due to the bad coding of that ad-bar. List items (LI) are meant to be inside a list element (UL), not placed inside a header tag (H2). There is no need for that H2 tag, remove it. If you want to list the ads as list items (LI), my suggestion is to remove the div as well, because ULs are block level elements so you dont need to wrap them in a division (DIV). Style the UL with the same styles as the div and each time you add a LI it will just add to the bottom. Here is an example:

CSS
Code:
ul#adpanel {
background-color:#fff;
border:4px double #000000;
width:179px;
height:auto;
margin:0;
padding:0;
}
ul#adpanel li {
list-style-type:none;
width:173px;
padding:0;
margin:3px;
}
ul#adpanel a:link, ul#adpanel a:visited, ul#adpanel a:hover, ul#adpanel a:focus {
outline:0;
}
ul#adpanel img {
border:0;
}

Awesome, thanks!

And the sidebar is just a list of our featured brands, not the usual ad you would see on a web site, so I'm not sure if that makes any difference with the way I would treat the code (I doubt it would).
 

PixelPusher

Super Moderator
Staff member
Your welcome astronaut, and in regards to the sidebar being your brands or a sponsored ad...there is no difference. (i was just guessing what that was)
 
Top