PDA

View Full Version : need help align header image


Webdesigner2009
11-23-2009, 10:10 PM
How would go about align my header image to the center of my div in dreamweaver cs4 . I have try csss and txt align but had no luck with it working.

here my HTML and css

<!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" />
<title>LockDown</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<body>
<div id="wrapper">
<div id="header">
<p><img src="images/header.jpg" width="950" height="200" alt="header" /></p>
</div>
</div>
</body>
</html>


body {
background-color: #000;
background-image:url(../images/lockdown_08.gif);
background-repeat: repeat-x;
text-color


}

wrapper {
width: 950px;
background-image:url(../images/lockdown_08.gif)
background-repeat: repeat-x;
background-color: #000;
margin-left: auto;
margin-right: auto;
border-left: 1px solid #900;
border-right: 1px solid #900;
}

header {
height: 200px;
width: 950px;
}

gentleone
11-23-2009, 10:35 PM
The width of the header image is the same as the width of the header and wrapper, so there is nothing to center.

You mean that you want to center your layout. Explanation here:
http://www.dreamweaverclub.com/css-center-content.php

Webdesigner2009
11-23-2009, 11:30 PM
No layout center by do auto margins left and right in css but every time I use the photoshop slice image of my header it uncenter it.

I got width set same for wrapper and header div I can't figure out how image slice from photoshop cs4 can uncenter it.

gentleone
11-24-2009, 06:57 AM
If I look at your CSS I see that you're not centering the layout properly and I see also now that you have wrapped your header image in a paragraph. Remove the <p> tags and set the header image as background in your CSS (.header) and center the wrapper as mentioned in the tutorial.

Edit: You forgot to add a dot in front of your classes in the CSS. Has to be like .wrapper and .header.

gentleone
11-24-2009, 07:46 AM
Sorry... I mean # in front instead of a dot. You have ID's :)

Webdesigner2009
11-24-2009, 12:35 PM
Yeah see that and fix problem thank for your help.