Results are out! Find what you need...fast. Get quick advice or join the chat
Hey there! Sign in to join this conversationNew here? Join for free

A couple of HTML and CSS questions

Announcements Posted on
Applying to Uni? Let Universities come to you. Click here to get your perfect place 20-10-2014
    • Thread Starter
    • 0 followers
    Offline

    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!
    • 5 followers
    Offline

    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.
    • 38 followers
    Online

    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
    • 0 followers
    Offline

    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
    • 0 followers
    Offline

    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??
    • 38 followers
    Online

    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?
    • 12 followers
    Offline

    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.
    • 38 followers
    Online

    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.
    • 12 followers
    Offline

    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.
    • 38 followers
    Online

    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:
    • 5 followers
    Offline

    ReputationRep:
    Yeh, we charge a decent surcharge for IE7 support.

Reply

Submit reply

Register

Thanks for posting! You just need to create an account in order to submit the post
  1. this can't be left blank
    that username has been taken, please choose another Forgotten your password?
  2. this can't be left blank
    this email is already registered. Forgotten your password?
  3. this can't be left blank

    6 characters or longer with both numbers and letters is safer

  4. this can't be left empty
    your full birthday is required
  1. By joining you agree to our Ts and Cs, privacy policy and site rules

  2. Slide to join now Processing…

Updated: August 9, 2012
New on TSR

Submitting your UCAS application

How long did it take for yours to be processed?

Article updates
Useful resources
Reputation gems:
You get these gems as you gain rep from other members for making good contributions and giving helpful advice.