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

Join the conversation

Browse

Activity

Important Information