Re: Background to hyperlinks?

by "Kehvan M. Zydhek" <kehvan(at)zydhek.net>
Date:	Sun, 31 Mar 2002 02:49:29 -0800
To:	"Hilma" <Hilma(at)hilma.freeserve.co.uk>, <hwg-techniques(at)hwg.org>
References:	hilma zydhek1 hilma2
	todo: View Thread, Original
Hilma,

> To be honest - i had to drop the "."  from "<.div"   and "<.a href" and
used
> "<div" and "<a href"
> as nothing showed with the . notation; this is something i've only ever
seen
> when declaring classes; so maybe that's my problem, i'm miss-using the
code.

Sorry, I forgot to mention that the . in the tags are there to prevent them
from rendering in HTML email readers. Most of us put the . in our code
samples for just that reason.

> Have you got your code working within style classes and style sheets,
rather
> than within the <div> tags?

Yup, I do. I use external style sheets as much as possible. I suspect the
problem you're having is that you're not linking to the external style sheet
or the selectors you've defined properly.

Without having the specifics for your design available, here's a sample from
one of my sites to guide you...

In the header of my pages, I have:
  <.div id="pageLogo" class="pageLogo"><.a href="content.asp"><.img
src="../images/null.gif" width="261" height="32" alt="Return to the Home
Page / Issues Index" /></a></div>

(note that the . are in there again to prevent autorendering)
ID is for assorted control scripts, both ASP and JS, but is not required.

In my external stylesheet, the class for this div is:
.pageLogo {background: url(../images/inuniform.png); height: 32px; left:
25px; position: absolute; top: 5px; width: 261px;}

(note that the image is a PNG format here, but could be GIF or JPG, too)
Absolute positioning is not required for your design, if I understand it
correctly, but is used here for other reasons. This attribute is used with
the TOP and LEFT attributes to place the logo EXACTLY where I want it. For
your project, though, positioning may be overkill and those tags should be
removed.

To link my external stylesheet, I use the following in the HEAD:
 <.link href="inuniform.css" rel="stylesheet" type="text/css" />

(again, a . is in place to keep it from actually working)

Now, with these three samples, what I get is a background image of 261
pixels wide by 32 pixels high. The hyperlink in the div is for a transparent
gif used to make the logo linkable (divs cannot be encapsulated in anchors,
thus the workaround) -- the linkable logo was something I added AFTER the
site had been built, otherwise I would have done it differently, but it
works, and is a perfect example for what you're wanting to acheive.

Final note: the code samples above are written to XHTML specs (which is why
there's a / at the end of empty tags, such as the link and img tags). The /
is not required for HTML, but generally doesn't cause problems with older
browsers.

You asked if I had used my method in sites per your specs, and here is the
code I use to do just that, on a live site... and it works perfectly in
v6-class browsers. :-)

Try using the samples above, and if they are still causing you problems,
email me offlist and we'll see what can be done.

Good luck,
Kehvan

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
:: NORTON ANTI-VIRUS 2002 scanned this email prior to sending. It is free
:: of any known embedded or attached viruses, trojans, or internet worms.
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::


----- Original Message -----
From: "Hilma" <Hilma(at)Hilma.freeserve.co.uk>
To: "Kehvan M. Zydhek" <kehvan(at)zydhek.net>; <hwg-techniques(at)hwg.org>
Sent: Sunday, March 31, 2002 02:00
Subject: Re: Background to hyperlinks?


> Hi Kehvan-
>
> Many thanks for that -
>
> I've had a play and got some very strange results - much as I had before
> :-(  (but at least i can define more where the problems are)
>
> Using your code, with the style defined within the /<div> tags, i got:
> IE6      - perfect
> NS6:    - perfect
> Opera: - perfect.
>
> I then moved the style declaration up to a class defined within the <head>
> of the html sheet, and got:
> IE6   - perfect
> NS6 - perfect
> Opera: no background image  showing
>
> I then moved the style declaration class thingy into an external style
> sheet, and got:
> IE6    - perfect
> NS6: - background image showing, but only to the height of the text
> Opera: no background showing
>
>
>
>
> thanks - but still puzzling :-(
>
> hilma
> --x----
>
>
>
>
HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA