Reply
How do I change what div overlaps?
Old 10-19-2009, 03:42 AM How do I change what div overlaps?
Average Talker

Posts: 29
Name: Jon
Trades: 0
I have some navigation images overlapping my body background image, but would like the background image to overlap the navigation images instead.

Is it possible to change?

The navigation images are only overlapping the very top of the background image, so it's not like the background image is the page's entire background.

Below is a screen shot of how it currently looks, but I want he white part on top:

Foppa is offline
Reply With Quote
View Public Profile
 
 
When You Register, These Ads Go Away!
Old 10-19-2009, 04:22 AM Re: How do I change what div overlaps?
chrishirst's Avatar
Super Moderator

Posts: 22,281
Location: Blackpool. UK
Trades: 0
if the "background" overlaps the navigation;

A. It won't be a background.

B. The navigation won't be "clickable" any more.

Now, do we get to see the entire page? because images (or part of them) are impossible to use for debugging CSS & HTML "issues".
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Growing old is mandatory - Growing up is optional
Code Samples | People Counting System | Bits & Bobs
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 10-19-2009, 05:06 AM Re: How do I change what div overlaps?
Average Talker

Posts: 29
Name: Jon
Trades: 0
It's not live yet, but below is my code:

HTML:
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Utah SEO Company - Search Engine Optimization - </title>
</head>

<body>
<div id="logo">
    <a href=""><img src="images/logo.png"></a>
</div>
</div>
<div id="nav">
        <a href=""><img src="images/tab-new.png" alt="" /></a>
        <a href=""><img src="images/tab-new.png" alt="" /></a>
        <a href=""><img src="images/tab-new.png" alt="" /></a>
        <a href=""><img src="images/tab-new.png" alt="" /></a>
</div>
<div id="container">
    <div id="content">
        <div id="left">
            <h1>Utah SEO Company</h1>
            
    <p> </p>
            
            
            <h1>Services</h1>
            <div id="photos">
            <a href=""><img src="images/" alt="" /></a>
            <a href=""><img src="images/" alt="" /></a>
            <a href=""><img src="images/" alt="" /></a>
            </div>
        </div>
        <div id="right">
            <img src="images/form2.gif" />
        </div>
    </div>
    
    <div id="footer">Copyright © 2009 - www.DreamPageMedia.com</div>    
</div>
</body>
</html>
CSS:
Code:
body {
    background-image:url(images/bg-3.png);
    background-repeat:repeat-x;
    color:#000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    margin: 0px;
}
a{
    font-size:12px;
}
p{
    margin: 15px 0px;
}
#logo {
    margin: 30px 0px -25px 240px;
}
/********************* Navigation ********************************/
#nav {
    margin-left: 421px;
}
/********************** Content ***************************/
#container {
    background: url(images/content-bg.png) no-repeat;
    margin: auto;
    text-align: left;
    width: 978px;
    margin-top: -33px;
}
#content {
    width:978px;
    height: 787px;
    line-height:1.5;
}
img{
    border-width:0px;
}
h1{
    color:#165788;
    font-size:16px;
    margin: 20px 0px 20px 0px;
}

h2{
    color:#85a157;
    font-size:14px;
    margin: 10px 0px 15px 0px;
}
#left {
    float:left;
    width:620px;
    margin-left:35px;
    padding: 30px 10px 30px 0px;
    display:inline;
}
#left a{color:#28556b;}
#left a:hover{color:#c77e0c;}
#photos a{
    margin-right:80px;
}
#right {
    float:right;
    width:245px;
    padding: 30px 10px 30px 0px;
    margin-top:15px;
    margin-right: 32px;
}
/********************** Footer ***************************/
#footer {
    background: #175787;
    width:968px;
    height: 28px;
    text-align:center;
    font-size: 10px;
    line-height: 2.6em;
    clear:both;
    color: #ffffff;
}
Foppa is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to How do I change what div overlaps?
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 



Page generated in 0.11264 seconds with 13 queries