Help out a newbie

A

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;
}
 
Last edited:
notarypublic

notarypublic

New Member
Hi heroic,

The problem is that you are trying to position two block-level elements in a container with a specified height.

There are two aspects of CSS to consider: display, and float. Both of these articles should put you on the right track -
http://alistapart.com/article/css-floats-101
http://alistapart.com/article/css-positioning-101

I've updated your code in this Pen: By moving the <img> before the <h1> tag and adding a 'float: left;' property to the image, it 'breaks' the normal flow of the HTML elements. I'd definitely check out those articles to learn the best way to use floats and display properties, you'll use these ones a lot.

Best of luck!
 
You must log in or register to reply here.
Top