Join TSR now and chat about whatever you’re intoSign up now

A couple of HTML and CSS questions Watch

    • Thread Starter
    Offline

    1
    ReputationRep:
    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!
    Offline

    3
    ReputationRep:
    Can you link to a working demo?

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

    3
    ReputationRep:
    (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.

    Code:
    .nav-bar {
        background-color: #ffffff;
        background-color: rgba(255, 255, 255, 0.5);
    }
    • Thread Starter
    Offline

    1
    ReputationRep:
    (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
    • Thread Starter
    Offline

    1
    ReputationRep:
    (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??
    • TSR Group Staff
    Offline

    3
    ReputationRep:
    (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?
    Offline

    2
    ReputationRep:
    (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.
    • TSR Group Staff
    Offline

    3
    ReputationRep:
    (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.
    Offline

    2
    ReputationRep:
    (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.
    • TSR Group Staff
    Offline

    3
    ReputationRep:
    (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. :console:
    Offline

    3
    ReputationRep:
    Yeh, we charge a decent surcharge for IE7 support.
 
 
 
Poll
What is your favourite film genre?
Useful resources

The Student Room, Get Revising and Marked by Teachers are trading names of The Student Room Group Ltd.

Register Number: 04666380 (England and Wales), VAT No. 806 8067 22 Registered Office: International House, Queens Road, Brighton, BN1 3XE

Quick reply
Reputation gems: You get these gems as you gain rep from other members for making good contributions and giving helpful advice.