UK SEO and Internet Marketing Forums
CSS Image Replacement Help

December 02, 2008, 04:05:25 PM *
Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length
News: We are back and we've changed software
 
   Home   Help Search Login Register  
Del.icio.us Digg FURL FaceBook Stumble Upon Reddit SlashDot

Pages: [1]
  Print  
Author Topic: CSS Image Replacement Help  (Read 137 times)
daniboy
Colonel
*****

Karma: +18/-0
Offline Offline

Posts: 1433



View Profile WWW
« on: July 08, 2008, 11:17:27 PM »

Right I need a bit of help with css image replacement, I'm trying to replace a <h1> tag with an image/logo.

This is for the homepage of a wordpress install, all other pages use the page/post title as <h1> and show the image/logo. The homepage has no <h1> tag and I'd like to make use of this and show the logo, but replace the text for the logo if that makes sense.

Please ignore the fact that we need to run at least two different wordpress headers to do this, that's fine and all sorted.

This is the code in the homepage header that I'm putting the <h1> tag in:

<div id="header">
         
   <div class="headerlefthome">
      <h1><a href="http : //mysite . com" title="my homepage">My Keywords</a></h1>
         </di.....

And this is the code I've come up with for the stylesheet:

.headerlefthome {
        background-image:url(images/disclogo.jpg);
        background-repeat:no-repeat;
        width: 440px;
   height: 105px;
        float: left;
        margin: 0px;
   padding: 0px 0px 0px 0px;

        }

.headerlefthome h1{
        display: none;
        }


So far this work's fine and dandy, it display's the logo and still keeps the <h1> tag in the source code.

The problem is the image isn't a clickable link like all other pages of the site. I know it doesn't really matter as it's the homepage but I like everything uniform and I'm sure I'm going about this all the wrong way.

Does anyone have a better solution to my little hotch potch?
« Last Edit: July 08, 2008, 11:20:21 PM by daniboy » Logged

Discount Shopping UK for Voucher Codes
Savings on LCD TVs, drinks from The Purveyor and the Wii Fit
MuNKy
Global Moderator
General
*****

Karma: +6/-0
Offline Offline

Posts: 3760



View Profile WWW
« Reply #1 on: July 24, 2008, 12:50:48 PM »

Hi Daniboy,

I dont know if you've managed to sort this yet. You're nearly there with the CSS.

You need to make the anchor the same height and width as the image and then set it to display:block to make the link fit the image.

Also it's best not to set the h1 to display: none as this is not accessible. You'll want to use text-indent to move the text off the viewable screen so it's still there but not hidden from screen readers.

So you want to change the css to something like:

div.headerlefthome { background: url(images/disclogo.jpg) no-repeat; width: 440px; height: 105px; float: left; margin: 0px; padding: 0px; }
div.headerlefthome h1 { position:absolute; text-indent: -9999px; }
div.headerlefthome h1 a { display:block; height: (same height as image); width: (same width as image); }


Hope this helps!
 
Logged

daniboy
Colonel
*****

Karma: +18/-0
Offline Offline

Posts: 1433



View Profile WWW
« Reply #2 on: July 24, 2008, 01:01:33 PM »

Cheers Darren, I'd just left it as it was in the first post. I'll change it over sometime over the weekend when I've a spare second.
Logged

Discount Shopping UK for Voucher Codes
Savings on LCD TVs, drinks from The Purveyor and the Wii Fit
Pages: [1]
  Print  
 
Jump to:  

Powered by SMF | SMF © 2006-2008, Simple Machines LLC | Sitemap Valid XHTML 1.0! Valid CSS!


Google visited last this page November 02, 2008, 08:41:21 PM