PDA

View Full Version : Separate Header for All and Only Galleries

nawset
Oct-25-2008, 08:57 AM
I have been searching around to no avail. My home page and category/sub cat pages are 810px wide. All of my gallery pages are 950px. I want a border under my nav bar that is 950px on all gallery pages without having to specifiy each one in the CSS code. Is there a property that I can use that reflects all gallery pages?

Code I am currently working on.

/* Navigation bar border */

#navborder {
width: 810px;
margin: 0 auto;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: #999999;
}

/* Widen the nav bar on the actual gallery pages. */

.gallery #navborder {
width: 950px;
margin: 0 auto;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: #999999;
}

Any thoughts?

My site is www.nawset.com

Cheers,

Pete
jfriend
Oct-25-2008, 11:07 AM
I have been searching around to no avail. My home page and category/sub cat pages are 810px wide. All of my gallery pages are 950px. I want a border under my nav bar that is 950px on all gallery pages without having to specifiy each one in the CSS code. Is there a property that I can use that reflects all gallery pages?

Code I am currently working on.

/* Navigation bar border */

#navborder {
width: 810px;
margin: 0 auto;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: #999999;
}

/* Widen the nav bar on the actual gallery pages. */

.gallery #navborder {
width: 950px;
margin: 0 auto;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: #999999;
}

Any thoughts?

My site is www.nawset.com (http://www.nawset.com)

Cheers,

Pete

Just do a View Source on a gallery page in your browser. Then look at the classes assigned to the <body> tag. In there you will see one named "galleryPage" that is unique to the display of a gallery. Guessing for this stuff never works. You have the source to the page - just look at it and you can find the answer.

So, this code below should work. There's no need to repeat the parameters from the first block since they will already be in force from the #navborder declaration.

/* Navigation bar border */

#navborder {
width: 810px;
margin: 0 auto;
border-bottom: solid;
border-bottom-width: 1px;
border-bottom-color: #999999;
}

/* Widen the nav bar on the actual gallery pages. */

.galleryPage #navborder {
width: 950px;
}
nawset
Oct-25-2008, 01:42 PM
John,

Tried that but I am really new to this stuff and was overwhelmed. Works like a charm. Thanks once again.

Pete
nawset
Oct-25-2008, 02:15 PM
Followup question.

I have the following code to handle bullets in my nav bar:

In CSS:

/* Top nav bar settings */

.largeBullet {font-size: 20pt; color: #ffff00; vertical-align:-15%;}

In Header:

<!-- Top nav bar definition -->
<div id="navcontainer">
<ul>
<li><a href="/galleries">galleries</a></li>
<li class="largeBullet">&bull;</li>
<li><a href="/galleries">about</a></li>
<li class="largeBullet">&bull;</li>
<li><a href=/gallery/6173354_vbft3>guestbook</a></li>
</ul>
</div>

This works perfectly in FF3 and Chrome but is not showing up in ie7. &bull is supposed to be compatible in Internet Explorer. Anyone have any thoughts?
jfriend
Oct-25-2008, 02:38 PM
Followup question.

I have the following code to handle bullets in my nav bar:

In CSS:

/* Top nav bar settings */

.largeBullet {font-size: 20pt; color: #ffff00; vertical-align:-15%;}

In Header:

<!-- Top nav bar definition -->
<div id="navcontainer">
<ul>
<li><a href="/galleries">galleries</a></li>
<li class="largeBullet">&bull;</li>
<li><a href="/galleries">about</a></li>
<li class="largeBullet">&bull;</li>
<li><a href=/gallery/6173354_vbft3>guestbook</a></li>
</ul>
</div>

This works perfectly in FF3 and Chrome but is not showing up in ie7. &bull is supposed to be compatible in Internet Explorer. Anyone have any thoughts?

I don't know why it's not displaying in IE7. IE7 is capable of displaying the entity &bull;. You can see it in this page (http://www.mozilla.org/newlayout/testcases/layout/entities.html) in IE7. You could try • instead or you could try putting spaces around it or you can use images instead of characters for the bullets or you could see if the font you are using doesn't have that character on IE so you need a different font or you could see some other solutions for lists on this page (http://nadeausoftware.com/articles/2007/11/latency_friendly_customized_bullets_using_unicode_ characters).
nawset
Oct-25-2008, 05:35 PM
John,

Thanks Figured it out. It was the vertical alignment in the .largebullet code. I just grabbed that from somewhere without testing it. Now I jst need the bullets to be the same size in ie as they are in ff. I suspect that it has to do with the font choice.

Pete