SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •