different line widths in different pages

[jpc]

I've managed to customize my site without asking a question, until now. I have a red line that's part of my header. It has four different widths depending upon which page you're on:

Homepage = 500
Featured = 700
Categories = 750
Galleries - auto

I'm trying to figure out a way to make "auto" the default width, but override "auto' for my Homepage, Featured and Categories pages. That way I can eliminate a ton of code and I won't have to add gallery ID's to my CSS every time I create one. There must be a way to do this, but I'm stumped. Here's what my code looks like now:


#myHeaderLine {width: auto; height: 5px; border-bottom: 1px solid #ff0000; top:135px;}

.homepage #myHeaderLine {width: 500px; margin: auto;}
.featured #myHeaderLine {width: 700px; margin: auto;}

.category_Nature #myHeaderLine,
.category_Adirondacks #myHeaderLine,
.category_cityscapes #myHeaderLine,
.category_Animals #myHeaderLine,
.category_Still_Life #myHeaderLine {width: 750px; margin: auto;}

.gallery_7248483 #myHeaderLine,
.gallery_7246486 #myHeaderLine,
.gallery_7246171 #myHeaderLine,
.gallery_7246700 #myHeaderLine,
.gallery_7246556 #myHeaderLine,
.gallery_7248643 #myHeaderLine,
.gallery_7248622 #myHeaderLine,
.gallery_7248598 #myHeaderLine,
.gallery_7248469 #myHeaderLine,
.gallery_7248444 #myHeaderLine,
.gallery_7248416 #myHeaderLine,
.gallery_7248320 #myHeaderLine,
.gallery_7248202 #myHeaderLine,
.gallery_7246306 #myHeaderLine,
.gallery_7297750 #myHeaderLine,
.gallery_7297631 #myHeaderLine,
.gallery_7297589 #myHeaderLine {width: auto; margin: auto;}
Thanks in advance for the help.

JP

http://jpcirre.smugmug.com/

[jpc]

^^ bump ^^

[jfriend]

The CSS rule that starts with #myHeaderLine is the one that will be in effect if no other rule matches a given page. Just set that as your default and get rid of all the gallery lines and the category lines.

Then instead of what you have for the categories (which is also impacting you for the galleries in those categories), for all categories, you can use this which will only be in effect in the actual category display (not for the galleries in those categories):

.category #myHeaderLine {width: 750px; margin: auto;}

[jpc]

And of course, that did it! Thanks! You have no idea how much time I spent trying to make this work. I didn't realize that the way I was calling out the categories was also addressing the galleries within those categories.

Thanks again for the support.

JP