images overlapping

narjis · January 17, 2012

I've made slices of a psd file and my top navigation has got two images such that one image is overlapping another on one side. But when I try to change padding or margins of logo (in .logo) it hides.Is there any way to overlap two images.

Here is my 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=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<title>tree</title>
</head>

<body>
<div class="wrapper">
<div class="header">
		<div class="logo"><img src="images/logo.gif" /></div>
            <div class="center"><img id="center" src="images/topBan.gif" /></div>
    </div>
    <div class="navigation">
        <ul id="nav-links">
          <li> <a href="#"><img src="images/aboutUs.gif" /></a></li>
       	  <li> <a href="#"><img src="images/portfolio.gif" /></a></li>
          <li> <a href="#"><img src="images/contacts.gif" /></a></li>        	
        </ul>
    </div>
    <div class="content">
    </div>
</div>
</body>
</html>

Here is my css code

@charset "utf-8";
/* CSS Document */

body{
margin:0px;
padding:0px;
width: 100%;
background:#FFF;
}
.wrapper{
margin:0;
padding:0;
width:100%;
}
.header{
margin-left:25%;
margin-right:25%;
}

.header .logo{
margin-top:50px;
width:180px;
}
.header .center{
padding-top:-50px;
overflow:hidden;

}
.navigation {
width:546px;
height:26px;
margin-left:25%;
margin-right:25%;
background-image:url(images/white_12.gif)
}
.navigation ul#nav-links{
float:right;
}
.navigation ul#nav-links li{
list-style:none;
display:inline;
padding-top:10px;
width:26px;
}
.navigation ul#nav-links li a{

width:26px;
}

scootstah · January 17, 2012

<div class="header">
  <div class="logo"></div>
</div>

.header {
    background:url(images/topBan.gif) repeat-x;
}

.logo {
    background:url(images/logo.gif) no-repeat;
}

You will need to give the header and logo classes a height and width.

Sign In

images overlapping

Recommended Posts

narjis

Link to comment

Share on other sites

scootstah

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information