Two images in header. One <h1>. How to balance?

**KingOfMyCastle** · Sep 15, 2006 09:23

Hi, I'm trying to get two images into my header. One is the main header. it's a home page link and a <h1>. The other is an advert which links elsewhere. I'd like the main header to be aligned to the left of the screen and the advert to be aligned to the right.

There's a few ways I've tried to achieve this but both look messy (code-wise). What is the best practice for this?

Here is some sample code:

Code:

<div id="header">
    <div id="headerimg">
        <h1><a href="index.html"><img src="header.gif"></a></h1>
    </div>	
    <a href="sponsor.html"><img src="ad.gif"></a>
</div>

#header {
    text-align: right;
    height: 85px; ** The height of both images
}

#headerimg {
    float: left;
    width: 520px;  ** The width of the main header
}

This way I get the results I desire but I'm not sure if it's 'best practice'. What do you suggest?

**Paul O'B** · Sep 15, 2006 09:49

Hi,

You could easily loose a nesting and do it like this.

Code:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header {
	text-align: right;
	height: 85px; /* The height of both images*/
}
#header p{margin:0}
#header h1{
	float: left;
	width: 520px;  /* The width of the main header*/
}

</style>
</head>
<body>
<div id="header">
	<h1><a href="index.html"><img src="header.gif" width="520" height="85"></a></h1>
	<p><a href="sponsor.html"><img src="ad.gif"></a></p>
</div>
</body>
</html>

You could simply have just one h1 that contains the 2 anchors images and position the images from within that, however it wouldn't be very semantic as the advert isn't really a heading.

Remember to add the image width and height attributes to the img tag otherwise they may get misplaced on first load in firefox.

**KingOfMyCastle** · Sep 15, 2006 10:47

Brilliant! Thanks Paul. I thought there might be a way of dumping that div and you've showed me the light. Align it all to the right and then just float the header to the left, perfect.

There's nothing like clean mark up, it's like having a hot shave after a few day's growth.

Thanks for the tip about adding the image dimensions too!

John..

User Tag List

Thread: Two images in header. One <h1>. How to balance?

Thread Tools

Display

Two images in header. One <h1>. How to balance?

Bookmarks

Bookmarks

Posting Permissions