aherolessheroic
New Member
I am attempting to put an image and <h1> in the top banner/header of my site but the logo for some reason wont go inside the box.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sprocket Web Dev</title>
<link href="css/css].css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header-cont">
<div class="header">
<h1>Sprocket</h1>
<img class="logo" src="http://www.webdesignforum.com/images/Cogwheel.png" alt="Sprocket" />
</div>
</div>
<div class="content"></div>
</body>
</html>
CSS
@charset utf-8;
body {
margin: 0;
background: -webkit-linear-gradient(top, #FFF, #dddde5);
font-family: "Trebuchet MS",Lucida Sans Unicode;
}
.header-cont {
width: 100%;
position: fixed;
top: 0;
}
.header {
height: 130px;
background: #0b0d4c;
border: 1px solid #0a0c3b;
width: 100%;
margin: 0 auto;
z-index:-1;
}
h1 {
color: #FFF;
margin-left: 160px;
font-size: 60px;
position: relative;
z-index:0;
}
.logo {
width:110px;
height:110px;
margin-left:13px;
margin-top:0;
z-index:1;
}
.content {
width: 960px;
background: #F0F0F0;
border: 1px solid #CCC;
height: 2000px;
margin: 145px auto;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sprocket Web Dev</title>
<link href="css/css].css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header-cont">
<div class="header">
<h1>Sprocket</h1>
<img class="logo" src="http://www.webdesignforum.com/images/Cogwheel.png" alt="Sprocket" />
</div>
</div>
<div class="content"></div>
</body>
</html>
CSS
@charset utf-8;
body {
margin: 0;
background: -webkit-linear-gradient(top, #FFF, #dddde5);
font-family: "Trebuchet MS",Lucida Sans Unicode;
}
.header-cont {
width: 100%;
position: fixed;
top: 0;
}
.header {
height: 130px;
background: #0b0d4c;
border: 1px solid #0a0c3b;
width: 100%;
margin: 0 auto;
z-index:-1;
}
h1 {
color: #FFF;
margin-left: 160px;
font-size: 60px;
position: relative;
z-index:0;
}
.logo {
width:110px;
height:110px;
margin-left:13px;
margin-top:0;
z-index:1;
}
.content {
width: 960px;
background: #F0F0F0;
border: 1px solid #CCC;
height: 2000px;
margin: 145px auto;
}
Last edited: