SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Replacing header tags with background images

    Hi everyone, on this site I have a div called work and I just applied a background image to it that contains a nice looking text called work. What I wanted to know was if it would be better to use an h1 tag instead of that div and just apply that same background image to the h1 tag. But I'm not really sure the best way to do that, would I have to text-indent the h1 tag text? Thanks for any info. highly appreciated.

    Here's the css:
    Code:
    /* Content */
    div#content {
    	margin: 0 auto;
    	width: 980px;
    	padding-top: 20px;
    }
    
    /* Work */
    div#work { 
    	background: url(images/heading_work.png) top center no-repeat;
    	width: 100%;
    	height: 17px;
    }
    div#work .leftworkspacer {
    	float: left;
    	margin-left: 10px;
    	width: 420px;
    	height: 1px;
    }
    div#work .rightworkspacer {
    	float: right;
    	margin-right: 10px;
    	width: 420px;
    	height: 1px;
    }
    
    /* Gallery */
    div#gallery { 
    	position: relative;
    	top: 5px;
    	left: 12px;
    	margin: 0 auto;
    	padding: 20px;
    	width: 920px;
    }
    div#gallery .shadow {
    	background: url(images/thumbnail_shadow.png) bottom no-repeat;
    	float: left;
    	width: 290px;
    	height: 230px;
    	margin: 0px 15px 10px 0;
    }
    div#gallery img { 
    	background-color: #FFF;
    	border: 1px solid #666;
    	padding: 10px; 
    }
    html:
    Code:
    	<div id="content">
    		<div id="work">
    			 <div class="leftworkspacer lines"></div>
    			<div class="rightworkspacer lines"></div>
    		</div>	
        	        <div id="gallery">
    			<div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
                            <div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
                            <div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
    			<div style="clear: left;"></div>
    			
    			<div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
                            <div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
                            <div class="shadow"><a href=""><img src="images/placeholder.png" width="264" height="198" alt="" /></a></div>
    			<div style="clear: left;"></div>
    		</div>
    	</div>
    and the screenshot:
    screenshot.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Generally, the ideal approach is to use this image replacement technique: http://www.pmob.co.uk/temp/headerreplacement3.htm

    In other words, you place the image over the h1, so that it's still there with images off.

    However, you can just use the negative intent method, or a slew of others, such as this or this.


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
  •