Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member Keltichiro's Avatar
    Join Date
    Aug 2011
    Location
    Hermitage, Tennessee
    Posts
    7
    Member #
    29062
    Well, I've been searching and I havent really found anything to help yet..unless I've missed it..and if I have, I apologize...

    I know how to make an image a link via HTML - that's easy enough

    but I'm just now learning CSS...and I've run into an issue...I don't know how to make a header image that I've linked through a CSS file, into an actual link

    I'll post a snippet of code to show you:

    <div id="header">
    </div>

    and also from my CSS file:

    #header {
    height: 262px;
    background: url(images/header.gif) no-repeat;
    }

    actually, the link to the site is: tek-garage.com/
    ...if that helps a little more

    I'm at a loss! I just don't know how to do this...again, I'd like to make my header image (the big green one...) into a link..or if possible, the text itself on the image...

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    There are a number of ways to do this:
    1. Place an h1, wrapped in anchor tags, within the div. Set the h1 height/width to that of the div, and set color:transparent for the h1. You should be doing something like this anyway if you're using images for the logo instead of text.
    2. Create a transparent .gif, sized the same as the logo, and put it in the div, wrapped in anchor tags.
    3. Use JavaScript to set the window location onclick to that of the home page, and set the cursor to pointer in the CSS. It would look like so:
    <div id="header" onclick="window.location = 'index.php'">
    </div>
    4. The final way I know of, which won't validate, is just wrap the div in anchor tags. I don't recommend it, because, as I said, it won't validate.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Since your logo image should probably be something that is indexed ( I know I want mine and clients logos picked up ), I'd suggest not using the logo image as a background in your CSS, keep using the div, but set the image with size and alt tags ( another chance for keywords here )

    Just my opinion .

  5. #4
    Junior Member Keltichiro's Avatar
    Join Date
    Aug 2011
    Location
    Hermitage, Tennessee
    Posts
    7
    Member #
    29062
    I didn't think about that til you guys mentioned it...I should probably erase the text that's on my image...and then use an h1 for the header?

    Webzarus, are you saying that I should pop the images into the HTML file instead of the CSS file?

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Quote Originally Posted by Keltichiro, post: 220235
    I didn't think about that til you guys mentioned it...I should probably erase the text that's on my image...and then use an h1 for the header?
    No, that isn't what I was saying, though it isn't an entirely bad idea if you can make it work.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    CSS is great for display purposes, but it's well known that most search engines only look at it to see if people are using the invisible attribute, to see if they ate trying to hide text.

    Logos and anything you feel important to the brand and site should not be set as a background image in the CSS, since they would be basically hidden to most searchengines.

    By inserting the logo image into the HTML instead of the CSS, you are adding the ability to use the alt tags, naming the image appropriately, increasing your keyword count if done properly.

    I have never seen it written down that this is a fact, but looking at it from purely an SEO aspect, it only makes sense. For your code to validate, you must use the alt tag in images, and search engines will only penalize you if you keyword load the alt tags, so... Name the image ( example ... Company_name_logo.jpg , and use the alt tag for a description that includes at least the most important keyword for the site.

    That's just me though.

  8. #7
    Junior Member Keltichiro's Avatar
    Join Date
    Aug 2011
    Location
    Hermitage, Tennessee
    Posts
    7
    Member #
    29062
    Ronald, do I need to be setting the height and width of the h1 tag within the HTML file or the CSS file?

    (I'm going back to the very first reply here, I'm going to give a couple options a shot - mainly for learning purposes lol)

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times

    Quote Originally Posted by Keltichiro, post: 220239
    Ronald, do I need to be setting the height and width of the h1 tag within the HTML file or the CSS file?

    (I'm going back to the very first reply here, I'm going to give a couple options a shot - mainly for learning purposes lol)
    In your CSS.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:38 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com