If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3

Thread: Overlays

  1. #1
    Junior Member
    Join Date
    Aug 2011
    Member #
    I went through some of the pages here, quiet a few good reads and useful information. Hopefully you guys can help me out in much the same manner.
    My question is how would one have an image overlay a Nav Bar. My thought for the design of the webpage is have a Header, Left Nav Bar, Content to the right, and a Footer. For the page I'm designing I would like to have an image with some transperancy overlaying the Nav Bar with Nav text on the left and overlay kind of on the right side. I wish a had the site built already to show an example but I do not. I could make something in Photoshop if a visual is needed. Thanks for the assistance.


  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Not from USA
    Member #
    2783 times
    I think you're probably going to need that visual.

    But if I'm not mistaken and I've interpreted you correctly, what you can do is slice your layout so that the nav bar and image overlay are all one slice, and use that slice as the background of your nav bar. Then you position your actual nav bar (as in the code) so that it's the width of the left part and the top and left margins allow the nav to fit in the spot you want them.

    To be honest, I'm not sure I made that clear. I may need to draw a visual myself.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member Angie's Avatar
    Join Date
    Sep 2011
    Portland, OR
    Member #
    4 times
    TheGAME1264 is right (if I'm also understanding correctly). You could also create the same effect using CSS3's rgba. (Here's some info on that: That said, CSS3 isn't supported by all browsers, so you may need to resort to Javascript or filters (for < IE9 in particular) to get that to work properly.

    And yes, a visual would help.

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 06:02 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: