Reply Thread Tools Search this Thread
Old 10-05-2007, 14:54   #1 (permalink)
longisland6
stephen eighmey
 
Join Date: Oct 2006
Location: earth
Posts: 220
css background image as hyperlink?

i usually make my site logo (in the top, upper left) a hyperlink to the home page of the site. i'm now starting to place all my images as css background images to truly separate content and presentation. is there a way to assign a hyperlink to the css background image so it validates as xhtml strict (with the correct mime type)? thank you.
  Reply With Quote
Old 10-05-2007, 15:01   #2 (permalink)
funkyprem
For all your goober needs
 
funkyprem's Avatar
 
Join Date: Dec 2004
Location: Coventry, UK
Posts: 1,823
put in the a
display: block
height and width
position absolute if you need to but float left is preferable
and you're done.

bear in mind your logo won't print if you do it the way that you're doing this.
__________________
The human race is faced with a cruel choice: work or daytime television.

prem ghinde
  Reply With Quote
Old 10-05-2007, 16:31   #3 (permalink)
longisland6
stephen eighmey
 
Join Date: Oct 2006
Location: earth
Posts: 220
are you saying "put in the a"...href?
  Reply With Quote
Old 10-05-2007, 16:32   #4 (permalink)
funkyprem
For all your goober needs
 
funkyprem's Avatar
 
Join Date: Dec 2004
Location: Coventry, UK
Posts: 1,823
put the anchor inside the div that the background image is attached to yes
__________________
The human race is faced with a cruel choice: work or daytime television.

prem ghinde
  Reply With Quote
Old 11-05-2007, 12:48   #5 (permalink)
microdesign
Senior Member
 
microdesign's Avatar
 
Join Date: Apr 2007
Posts: 236
Send a message via MSN to microdesign
cool didnt know this was posible.
  Reply With Quote
Old 11-05-2007, 16:01   #6 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
I usually put the logo in the markup (unless I'm using some kind of image replacement technique). That way I can include it in the print stylesheet.

There's nothing wrong with putting images in markup if they're content. Now, you could argue both ways with a logo - it's essential branding, the identity of your company. Does that make it content? Maybe.

Also, float: left; (if you use it) will automatically set it to display: block. No need for both.

If I use image replacement for the logo (i.e. if it's a logotype and not a graphic), I'll usually do something like this:

HTML Code:
<a id="logo" href="/"><span>Logo Text</span></a>
Then...

Code:
#logo { display: block; /* Or float left, whichever is necessary... */ width: SOMEpx; height: SOMEpx; background-image: url(/path/to/image.gif); } #logo span { /* Hide the "Logo Text" from view... */ display: block; width: 0; height: 0; overflow: hidden; }
Pro: Better for SEO than an alt attribute, I believe, and perfectly accessible.
Con: Difficult to make it print.

Otherwise, it's just:

HTML Code:
<a href="/"><img src="/path/to/image.gif" alt="Logo Text" /></a>
Pro: Will print by default (most printers won't print background images).
Con: SEO and graphics in markup (not that that's always a bad thing).
  Reply With Quote
Old 12-05-2007, 02:08   #7 (permalink)
b v
Senior Member
 
b v's Avatar
 
Join Date: May 2006
Posts: 450
Quote:
Originally Posted by pgo
Also, float: left; (if you use it) will automatically set it to display: block.

you mean inline?
  Reply With Quote
Old 12-05-2007, 03:19   #8 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
When you float something it becomes a block element.
  Reply With Quote
Old 12-05-2007, 05:17   #9 (permalink)
b v
Senior Member
 
b v's Avatar
 
Join Date: May 2006
Posts: 450
Quote:
Originally Posted by pgo
When you float something it becomes a block element.

block elements are on their own line though.

ex: Block and floated boxes

modified htmldog example
  Reply With Quote
Old 12-05-2007, 16:12   #10 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
Yes, of course. They're still converted to block elements even though they don't appear the same way since they're taken out of the normal document flow.
  Reply With Quote
Old 12-05-2007, 18:11   #11 (permalink)
b v
Senior Member
 
b v's Avatar
 
Join Date: May 2006
Posts: 450
what makes it a block element then?

Last edited by b v : 12-05-2007 at 18:39.
  Reply With Quote
Old 12-05-2007, 19:57   #12 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
What makes a <p> a block?

Floatutorial: Float basics

Quote:
When you float an element it becomes a block box.

...

A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.
It's a "floating" block.
  Reply With Quote
Old 13-05-2007, 11:08   #13 (permalink)
R1gM
Senior Member
 
R1gM's Avatar
 
Join Date: Sep 2006
Posts: 271
I always use the text indent function personally.

Like others have said do display block and set the width and height. If for example you use <li> elements with links for navigation as is the norm then it works well. Once you use the display block and set width height and background then add in text-indent: -9999px; and you are all set.

This way there is no need to introduce a span into your coding.

HTML Code:
<a href="gosomewhere" id="test">Testing</a>

Code:
a#test{ display:block; width:100px; height: 50px; background: url(your background) no-repeat; text-indent: -9999px; }

Of course if you want to get super special look at naviagtional matrix technique for menus as this way you create a one block navigational image and use css to create the rollovers and different buttons from this one image (the image holds all your states on one piece which is often a shorter load than loading all individual images separately).

And usually you use the link inside a div or <li> element so I usually give that element the id then use the css selector to select the tags within that element rather than actually assign the id to the tag.
  Reply With Quote
Old 15-05-2007, 09:05   #14 (permalink)
Joneorange
Registered User
 
Joneorange's Avatar
 
Join Date: Mar 2007
Location: Northampton UK
Posts: 17
Quote:
Originally Posted by pgo
Pro: Will print by default (most printers won't print background images).
Con: SEO and graphics in markup (not that that's always a bad thing).

I have never tried this butů You could combine both:

HTML Code:
<a id="logo" href="/"><span>Logo Text</span> <span id="pint_logo" ><img src="logo-bw.gif" alt="Logo Text" /></a>


Screen stylesheet
Code:
#pint_logo { display: none; }

Print stylesheet
Code:
#logo span { /* Hide the "Logo Text" from view... */ display: block; width: 0; height: 0; overflow: hidden; }

I usually just hide my span I like way you have done it.
  Reply With Quote
Old 09-10-2010, 12:15   #15 (permalink)
awa92130
Registered User
 
Join Date: Oct 2010
Posts: 2
External Link, CSS

Hello,

I got a webstore (magento), with a picture called "image.png". The store have two sides (English, French) but both of them use the same picture "image.png". The picture "image.png" is called by a css file named "styles.css". My problem is how to link the picture "image.png" to 2 different external pages. For e.g on French Side of the store the link should be "link1" and on English Side of the store "link2".
Thank you in advance.
LSM
  Reply With Quote
Old 09-10-2010, 12:50   #16 (permalink)
Shiro
社長
 
Shiro's Avatar
 
Join Date: Aug 2007
Location: Yokohama, Japan
Posts: 14,639
You can't really do that. The href attribute of an anchor tag cannot be set through CSS. You will have to output a separate anchor tag on each side of the store. Give the anchor tags on both sides of the store the same ID though, and you can use that ID to set the background image for both links.
__________________
This space for rent.

Jaypan | Ramenities
  Reply With Quote
Old 09-10-2010, 14:17   #17 (permalink)
awa92130
Registered User
 
Join Date: Oct 2010
Posts: 2
Thank you Shiro, but how do I "output a separate anchor tag on each side of the store"

Thanks you !!!!
  Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search


Contact Us - Web Design Forums - Archive
vBulletin © 2000-2009 Jelsoft Enterprises Limited.
Search Engine Optimization by vBSEO 3.0.0 RC8