Div renders behind previous div.

Discussion in 'HTML & Website Design' started by emforce, Dec 21, 2010.

0
  1. #1
    Hi guys I was wondering if any of you could help me.

    I am trying to create my own template right now and currently running into some problems.

    Firstly my website banner renders behind the nav bar which is already there.

    screenie - http://gamercity.co.uk/problem.png

    code - 
    body 
{
    background-color:Blue;
}

#header
{
    background-image:url('media/gamercity banner bg.png');
    background-repeat:repeat-x;
    height:149px;
}

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom:0;
border: 1px solid #ffffff;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}
    Code (markup):
    index.htm

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="Stylesheet" href="StyleSheet.css" type="text/css">
</head>
<body>


<ul class="solidblockmenu">
<li><a href="#">Home</a></li>
<li><a href="#" class="current">CSS Examples</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Webmaster Tools</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Gallery</a></li>
</ul>


<div id="header"> 
<img src="media/Gamercity-logo-01.png" alt="Gamercity" />
</div>

</body>
</html>
    Code (markup):
    So any ideas? :D
     
    emforce, Dec 21, 2010 IP
  2. hypokill

    hypokill Well-Known Member

    Messages:
    271
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    108
    #2
    What are you trying to do? Remove your navbar or place your menu below your banner?
     
    hypokill, Dec 21, 2010 IP
  3. MyEasyCpa

    MyEasyCpa Peon

    Messages:
    336
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey OP, this isnt totally clear whats up?
     
    MyEasyCpa, Dec 21, 2010 IP
  4. emforce

    emforce Member

    Messages:
    308
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #4
    I want to keep the navbar and move the banner so that it is inline with the logo. Like the banner is being rendered partially behind the navbar and I want it to render immediately below the navbar like the logo :D

    hope this clears it up! :D
     
    emforce, Dec 21, 2010 IP
  5. xira

    xira Active Member

    Messages:
    315
    Likes Received:
    8
    Best Answers:
    4
    Trophy Points:
    68
    #5
    If I am understanding correctly, your "banner" is a background image running behind your logo. Since your menu isn't contained in a DIV, the header DIV is treating it like text, and not a container. Therefore I recommend enclosing your menu in a DIV.
    If you choose to not do so, you can change your CSS to move the background down:
    Current CSS: background-image:url('media/gamercity banner bg.png'); background-repeat:repeat-x;
    Change to: background: url('media/gamercity banner bg.png') left 30px repeat-x; (this is short hand)

    Hope this helps
     
    xira, Dec 22, 2010 IP
  6. emforce

    emforce Member

    Messages:
    308
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    30
    #6
    thanks! :D Placed the menu in a container div and its working now :)
     
    emforce, Dec 22, 2010 IP