Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css Website Help

    Okay. I've been trying for about 2 hours straight and i haven't been able to solve this problem.

    1) I need to create a wrapper and put everything in it.
    2) I need my nav bar to overlap my banner background

    My background is the size of my website. But whenever i put in my navbar, I can't see it because the background overlaps it. I don't know why and i've tried looking for tutorials for that but can't find any. Please help.

    Main Question: Is there any way to create a webpage where the navbar is ontop of the banner?

  • #2
    New Coder zfred09's Avatar
    Join Date
    Dec 2006
    Posts
    69
    Thanks
    0
    Thanked 5 Times in 5 Posts
    1) I need to create a wrapper and put everything in it.
    Code:
    In CSS: #wrapper { width: 100px; height: 100px; } //position accordingly  
    In HTML: Simply put the wrapped div around everything else inside your body, ie 
    <body><div id="wrapper">Your other page stuff</div></body>
    2) I need my nav bar to overlap my banner background
    As far as the nav bar, there are several ways to accomplish this depending on how you have your background setup. If your bg image is the background of a CSS class then you will need to use a float command for you nav bar like this.
    Code:
    #navbar { float: left; }
    Otherwise you could setup your background image to be the background of the body using
    Code:
    body { background: url('url');}
    and then a simple class and div as the first element in HTML should place it on top.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Show us your code or give us a link to your site.

    z-index:value; - click here

    and Here

    z-index is normally used to determine the layer that a div or image occupies.

    Only positioned elements can have z-index

    This site will show you a crude one on one.
    View the source to see the code. Crude but instructive, I hope.

    Frank
    Last edited by effpeetee; 05-23-2008 at 03:46 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Location
    Manila, Philippines
    Posts
    263
    Thanks
    3
    Thanked 12 Times in 12 Posts
    i think what he means is this..

    Code:
    <div id="wrapper">
    
    <div id="header">
       <div id="nav"></div>
    </div>
    
    </div><!--endofwrapper-->
    Code:
    #header{background:url(image);}
    #nav{style....}

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by jhaycutexp View Post
    i think what he means is this..

    Code:
    <div id="wrapper">
    
    <div id="header">
       <div id="nav"></div>
    </div>
    
    </div><!--endofwrapper-->
    Code:
    #header{background:url(image);}
    #nav{style....}
    Possibly, but what I was addressing was-

    2) I need my nav bar to overlap my banner background
    Main Question: Is there any way to create a webpage where the navbar is ontop of the banner?
    Sometimes hard to know what is actually meant.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •