[Faustus500]

Morning all.

Firstly, I have strange issue with the website I'm creating. All of the HTML pages link to the same CSS document. However, one page insists on having a slightly different margin-left to the others (on the CSS the margins are set to auto.)?

Secondly: I want to overlay a nav bar on top of a background image that forms the top half of a site. I also want to make the nav bar translucent. How would I go about doing this? And would I need Javascript or something

Cheers!

[estel]

Can you link to a working demo?

A translucent nav-bar can be achieved using the background-color: rgba(255, 255, 255, .5) attribute.

[Dez]

(Original post by Faustus500)
Morning all.

Firstly, I have strange issue with the website I'm creating. All of the HTML pages link to the same CSS document. However, one page insists on having a slightly different margin-left to the others (on the CSS the margins are set to auto.)?

Secondly: I want to overlay a nav bar on top of a background image that forms the top half of a site. I also want to make the nav bar translucent. How would I go about doing this? And would I need Javascript or something

Cheers!

I'm guessing the first issue is probably because one page has a scrollbar present, and the rest don't.

For a transparent background your best bet is to use rgba(), but make sure you've got a solid colour fallback, e.g.

.nav-bar {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.5);
}

[Faustus500]

(Original post by Dez)
I'm guessing the first issue is probably because one page has a scrollbar present, and the rest don't.
[/code]

The page did indeed have a vertical scroll bar... why does this change the horizontal position of the stuff ??

Thanks to the both of you as I know have transparency

[Faustus500]

(Original post by estel)
Can you link to a working demo?

A translucent nav-bar can be achieved using the background-color: rgba(255, 255, 255, .5) attribute.

Unfortunately the site is not online yet... However, I have done some Googling and realised that I need to use z-indexs to change where divs are on top of each other... However when I do this it screws up the whole site.

Argh. Any tips??

[Dez]

(Original post by Faustus500)
Unfortunately the site is not online yet... However, I have done some Googling and realised that I need to use z-indexs to change where divs are on top of each other... However when I do this it screws up the whole site.

Argh. Any tips??

"Screws up the site" isn't really descriptive enough for us to help you. If you can't post a HTML file, can you at least post a screenshot?

[fran.ha]

(Original post by estel)
Can you link to a working demo?

A translucent nav-bar can be achieved using the background-color: rgba(255, 255, 255, .5) attribute.

I didn't think this was supported by IE?

For that reason I always use a .png fallback for IE (I guess you could just use a .png for the entire thing but may as well futureproof it) along with any CSS3 opacity.

[Dez]

(Original post by fran.ha)
I didn't think this was supported by IE?

For that reason I always use a .png fallback for IE (I guess you could just use a .png for the entire thing but may as well futureproof it) along with any CSS3 opacity.

Transparent backgrounds are supported in IE9. For IE<9, I think a solid colour is enough of a suitable fallback, but it depends on your audience.

[fran.ha]

(Original post by Dez)
Transparent backgrounds are supported in IE9. For IE<9, I think a solid colour is enough of a suitable fallback, but it depends on your audience.

Yeah, in my job we have to make it as pixel-perfect as we possibly can back to IE7, so a .png would be the fallback rather than solid colour. Seeing as it'd only be a few more minutes work to put a 1px transparent .png in than just write the solid colour hex code in, I think it'd be worth it.

[Dez]

(Original post by fran.ha)
Yeah, in my job we have to make it as pixel-perfect as we possibly can back to IE7, so a .png would be the fallback rather than solid colour. Seeing as it'd only be a few more minutes work to put a 1px transparent .png in than just write the solid colour hex code in, I think it'd be worth it.

You have my sympathy.

[estel]

Yeh, we charge a decent surcharge for IE7 support.