Padding & Alignment Questions

Two questions about this page: http://www.westeros.org/

  1. On the sidebars, is there any way of getting the gold-coloured background beneath the headers to extend across the whole sidebar? There is a padding on the sidebar itself that I can’t seem to remove because if I do, the text in the right sidebar begins in the space between the main content and the sidebar.


#Main {
clear:both;
overflow:hidden;
position:relative;
width:100%;
z-index:4;
}

#MainLeft {
display:inline; 
float:left;
padding:10px 5px 10px 5px; 
position:relative;
width:180px;
z-index:1; 
}

#MainMiddle {
display:inline;
float:left; 
margin-right:-380px;
padding-bottom:20px;
padding-top:20px;
position:relative;
width:100%;
z-index:1;
}

#MainMiddleInner {
margin:0 410px 0 30px;
min-height:0;
overflow:hidden;
}

#MainRight {
display:inline;
float:left;
padding:10px 5px 10px 5px;
position:relative;
width:180px;
z-index:1; 
}

#MainLeft h5, #MainRight h5 {
background:transparent url(http://www.westeros.org/Graphics/bg_enamel-gold.png) repeat;
margin:7px 0px 7px 0px;
width:100%;
}

  1. The index of sub sections shown in the main content area works fine when there’s an even number of sections. However, if its uneven, the last item comes out centered. Is it possible to avoid that?

div.Index {
margin:0 0 0 0;
text-align:center;
width:100%;
}

div.Index ul {
list-style:none;
list-style-position:outside;
list-style-type:none;
margin-left:0;
padding-left:0;
}

div.Index ul li {
display:-moz-inline-box; /* mozilla only */
display:inline-block; /* browsers that support display:inline-block like safari & opera*/
padding:10px;
text-align:center;
vertical-align:top;
width:45%;
}

div.IndexItem {
text-align:left;
}


I think I’ve got all the relevant code in there now, but if anything else is needed I’ll dig that out too, of course. :slight_smile:

is there any way of getting the gold-coloured background beneath the headers to extend across the whole sidebar?
Hi,
I think you may need to be more specific about what you are referring to as “headers with gold BG” in the sidebars.

The only headings I see in the sidebars are the <h5>'s, but there is no BG color on them other than what is on the entire sidebar.

If that is what your talking about and you wanted to put a border under them then you can drag into the column padding with negative margins. You would then put some padding back on the h5 to recover what the column padding was doing.

#MainLeft h5, #MainRight h5 {
[COLOR=Blue]border-bottom:10px solid gold;[/COLOR]
margin:7px [COLOR=Blue]-5px;[/COLOR]
[COLOR=Blue]padding:0 5px;[/COLOR]
}

If it is the BG image width itself that you want to change then that is done on the AP faux columns.
Those are located at line 414 in your css. You could just change the width of the faux sidebars

.MainLeftFix
.MainMiddleFix
.MainRightFix

That’s weird. I’ve definitely got a background colour specified for the sidebar headers. However, I did just switch them from being proper headers to just styling an element.

For example, on the left side, there’s “Recent Entries”. There’s no background colour there for you? I am seeing it in both Chrome and SeaMonkey, but the issue is that it doesn’t extend the full width of the column. I’ll try the negative margin to see if that works, though no clue why you wouldn’t be seeing the background.

Yeah I see where you changed the h5’s to divs

<div class=“SidebarHeader”>Recent Entries</div>

But I see no styles for that div class anywhere in your css

You should really leave them as h-tags though since that is what they are, headings. It’s doubtful that they need to be h5’s though, that would imply that they are sub-headings of an h4. If you were using h5’s just for the font-size then you can change the font-size on any heading level.

Did you update the css on your live site or are you viewing on your local machine?

No BG colors for me on Chrome or FF

The sidebar “headers” are now defined like this in the CSS:


div.SidebarHeader {
background:transparent url(http://www.westeros.org/Graphics/bg_enamel-gold.png) repeat;
font-size:16px;
line-height:1;
margin:7px 0px 7px 0px;
text-transform:uppercase;
width:100%;
}

I am seeing the background in question in chrome and seamonkey, I have someone else checking in firefox and chrome, they also see it. And yeah, its on the actual site, I don’t have it setup for testing offline.

I went away from actual header elements because I don’t think they work properly as part of the structure. Especially since, being on sidebars, one comes before the main body and the other comes after.

Hi,
I see the heading backgrounds now. I had to do a hard clearing of my cache to get the page to reload correctly.

To extend the BG to the full width of the sidebars just drag it out with negative margins. Then add back 5px padding to each side to get the text back in place.

margin: 7px -5px;
padding: 0 5px;

Ah, glad it showed up, wasn’t sure what was going on. :slight_smile:

The negative margins work fine on the right sidebar but on the left they cause the gold background to spill out across the gap between the sidebar and the main section. Hrm, I am not sure why the two sides behave differently, but I admit, I don’t always understand how the whole layout works. I had a lot of help putting it together and there are some margins and paddings I don’t quite get.

The negative margins work fine on the right sidebar but on the left they cause the gold background to spill out
I can’t tell what you did because the headings do not show any changes to the css on your page.

You have to set the neg margins on each side just as I showed, as well as setting up the side paddings. I see no problems with it when doing a live edit via firebug.

I am not sure why the two sides behave differently
Anything that hangs out past the right side of the right column gets clipped off by overflow:hidden; on the parent

Sorry, tested it and took it off again when it was spilling over. I readded it, and of course its working now, so I am left scratching my head yet again.

Thanks. :slight_smile: