Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!


Sponsored Content

 

 
 

Photo
- - - - -

Proper Image Linking Code For Css


  • Please log in to reply
6 replies to this topic

#1 Hans G.

Hans G.

    HR 3

  • Members
  • PipPipPip
  • 99 posts

Posted 01 October 2007 - 05:37 PM

Hi, all. I need help with what I'm sure will be an easy task for most of you here. I'm new to CSS and I've got the following code working beautifully and now I need to make the image I specify below linkable. In short, I need myurl.com/image.jpg to link to myurl.com/index.htm. What is the extra piece of code that I need to add?

Above the </head>, I have:
CODE
<style type="text/css" media="screen">
body
{
image:
url('http://myurl.com/image.jpg')
}

body {margin:0px; padding:0px;}
img.y
{
position:absolute;
left:50%;
width:40px;
margin-top:-354px;
margin-left:252px;
padding:15px;
z-index:1000
}
</style>


and below the <body>, I have:

CODE
<img class="y" src=http://myurl.com/image.jpg width="198" height="26" alt="menu">


#2 Randy

Randy

    Convert Me!

  • Moderator
  • 17,540 posts

Posted 01 October 2007 - 08:45 PM

It's not a function of CSS. Simply create the link via HTML.

CODE
<a href="http://www.myurl.com/index.htm"><img class="y" src=http://myurl.com/image.jpg width="198" height="26" alt="menu"></a>


You'll probably want to add a border="0" to your img tag so that no outline is created around the linked image. And personally I'd link just to the base domain name and leave out the index.htm part.

#3 Hans G.

Hans G.

    HR 3

  • Members
  • PipPipPip
  • 99 posts

Posted 02 October 2007 - 02:46 PM

Worked like a charm. Thanks!

#4 JohneeMac

JohneeMac

    HR 4

  • Active Members
  • PipPipPipPip
  • 217 posts
  • Location:Scotland

Posted 04 October 2007 - 07:29 AM

QUOTE(Randy @ Oct 2 2007, 02:45 AM) View Post
add a border="0" to your img tag


Depending on validators that may be invalid.

Much better to use css to hide the border:

At the start of stylesheets i have

QUOTE
*{ border:0;
margin:0;
}

img{border:0;
}


Although some people use a different CSS reset method but it involves a little more code.

#5 Jill

Jill

    High Rankings Advisor

  • Admin
  • 32,317 posts

Posted 04 October 2007 - 11:35 AM

Offtopic
Has anyone EVER used the image border since 1993 or so?

Why is it still a default? Who makes up these rules?


#6 qwerty

qwerty

    HR 10

  • Moderator
  • 8,291 posts
  • Location:Somerville, MA

Posted 04 October 2007 - 12:31 PM

Never. I might apply a shadow, but that becomes part of the image, and you certainly don't want to wrap a shadow in a border puke.gif

Going back to the image that's anchoring a link: keep in mind that if you've got some effect like a background color set up for the hover pseudoclass of your links, it will apply to images that are links as well, so you may need to set up a class of anchor like a.img that you can define as having no background.

#7 Tom Philo

Tom Philo

    Photographer

  • Active Members
  • PipPipPipPipPip
  • 507 posts
  • Location:Beaverton, Oregon

Posted 09 October 2007 - 05:16 PM

QUOTE(Jill @ Oct 4 2007, 09:35 AM) View Post
Offtopic
Has anyone EVER used the image border since 1993 or so?

Why is it still a default? Who makes up these rules?

I always use an image border - since my site is heavy with images (and sell prints of them if people want them) so I use 100x100 pixel versions on pages so that people know to click on them to see a larger image.

I sometimes will put just an image on there with no larger version - this way people know NOT to click on it based on past experience on the site. No border no clickie.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users