Add link and cursor to background image?
claudel
Hi
So, I'm adding a banner image to the top of each page
in my site with
background-image: url("images/banner-top.jpg") ;
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
in the
body{
section of my style sheet
works fine.
I want to add a link back to /index.html to it.
and a
cursor:pointer
to hint at the link
Is this possible?
If so, how?
I've played around a bit and looked around a bit
but haven't come up with the right syntax
thanks
Claude
Daniel Kirsch
> Hi
>
> So, I'm adding a banner image to the top of each page
> in my site with
>
> background-image: url("images/banner-top.jpg") ;
> background-repeat: no-repeat;
> background-position: top center;
> background-attachment: scroll;
>
> in the
>
> body{
>
> section of my style sheet
>
> works fine.
>
> I want to add a link back to /index.html to it.
> and a
>
> cursor:pointer
>
> to hint at the link
>
> Is this possible?
No, you cannot add additional CSS properties to background elements
added by CSS. However you may instead add a transparent element at that
position with the properties you've defined - but instead you may place
your image directly to each page.
Daniel
claudel
Thanks. I was loading the image on each page but adding it to the stylesheet
is much cleaner. I'll try another plan.
Claude
Gus Richter
You can specify this for your HTML:
<a href="#"><div id="banner"></div></a>
Replace # above with the URL to be linked to and then specify in the
stylesheet:
#banner{
width:100%;
height:100px;
background: url(images/banner-top.jpg) no-repeat;
}
Where the width and height for the div id'd as banner are the same as
for the banner image.
The background for the div is the banner image.
The whole div is the link, which is the same as the banner image.
You may also need to provide:
a:hover {cursor:hand;}
in the stylesheet so that IE gets the finger (er, I mean hand).
--
Gus
Stanimir Stamenkov
> claudel wrote:
>
>> I was loading the image on each page but adding it to the
>> stylesheet is much cleaner. I'll try another plan.
The link is content so it is incorrect to be (it can't be) a
background. If browsers had better support for generated content you
could include header markup as separate document/object using the
stylesheet. Till then you have to include it in your main document
content.
> You can specify this for your HTML:
>
> <a href="#"><div id="banner"></div></a>
That's invalid HTML.
Claudel, just use:
<div id="site-header">
<a href="/"><img alt="My Site" src="..."></a>
</div>
Be sure to specify appropriate alternative text for the image,
'cause that's the link content. Use the following styles:
#site-header a, #site-header a img { display: block; border: none }
/* Specify appropriate background color to fill up the rest of
* the block and have foreground color to match the image */
#site-header a { background-color: ...; color: ... }
Note IE has a bug and won't accept the empty part of the A block
as active link area.
If you want the image centered you'll have to add:
#site-header a img { margin-left: auto; margin-rigth: auto }
Because of IE bug you'll have to add, also:
#site-header a { text-align: center }
Do not specify image dimension hints in the stylesheet because in
this case it won't benefit progressive loading - the rest of the
content won't be re-flowed because of the image delayed loading.
Explicit dimension hints are useful only for in-line images. If you
don't specify explicit image dimensions you'll enable browsers to
show the alternative content (when the image is not available) in
area appropriately sized for it rather than taking unnecessary space
for the original image.
And of course if you have more A (link) elements in your site header
you'll have to assign additional attributes (as 'class' or 'id') to
match just the "Home" link.
--
Stanimir
Stanimir Stamenkov
> <div id="site-header">
> <a href="/"><img alt="My Site" src="..."></a>
> </div>
>
> Be sure to specify appropriate alternative text for the image, 'cause
> that's the link content. Use the following styles:
>
> #site-header a, #site-header a img { display: block; border: none }
> /* Specify appropriate background color to fill up the rest of
> * the block and have foreground color to match the image */
> #site-header a { background-color: ...; color: ... }
> [...]
Here are two examples:
http://stanio.info/ban/banner_test.html
http://stanio.info/ban/banner_test2.html
--
Stanimir
claudel
Hi
Thanks.
I have a solution.
I load the header image into each page:
Body {...
background-image: url("/images/banner-top.jpg") ;
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
...}
and overlay a transparent gif at the start of each page.
<a href="/index.php"><img id="banner" alt="" src="images/banner_background.gif "/></a>
#banner {
background: transparent;
width: 100%;
height: 140px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
cursor: pointer;
...}
This installs a link to the home page and alters the cursor like I want.
seems to work without issue.
Claude
Stanimir Stamenkov
> <a href="/index.php"><img id="banner" alt="" src="images/banner_background.gif "/></a>
Just specify non-empty 'alt' text.
--
Stanimir
claudel
Gus Richter
>
> The link is content so it is incorrect to be (it can't be) a background.
My proposal is not to use the background as a link, but the wrapper for it.
> If browsers had better support for generated content you could include
> header markup as separate document/object using the stylesheet. Till
> then you have to include it in your main document content.
>
>> You can specify this for your HTML:
>>
>> <a href="#"><div id="banner"></div></a>
>
> That's invalid HTML.
Thanks for pointing it out. My error for quickly throwing something
together. Here is a modified and *validated* version this time, for
which I would appreciate comments:
<div>
<a href="#"><span id="header"></span></a>
</div>
Replace # above with the URL to be linked to and then specify in the
stylesheet:
#header{
display:block;
width:100%;
height:100px;
background: url(to the banner image) no-repeat;
}
The Block DIV contains the inline Anchor, which in turn contains the
inline SPAN.
Where the width and height (with display:block;) for the SPAN id'd as
header are the same as for the banner image.
The background for the SPAN is the header image.
The whole SPAN is the link, which is the wrapper for the banner image.
--
Gus
Stanimir Stamenkov
> <div>
> <a href="#"><span id="header"></span></a>
> </div>
>
> Replace # above with the URL to be linked to and then specify in the
> stylesheet:
>
> #header{
> display:block;
> width:100%;
> height:100px;
> background: url(to the banner image) no-repeat;
> }
That solution is even worse. You put in an empty link and it doesn't
work at all in IE because of its "block links" bug (the link active
area is only over the link content).
Claude has found a solution using a transparent image:
<div>
<a href="#"><img id="header" alt="Home Page" src="transp.png"></a>
</div>
I suggest adding a 'title' to the link (one would need to add it to
the <img> element because IE bug, again) for the case where the
stylesheet is not available but the transparent image is - rendering
an empty area.
<div>
<a href="#"><img id="header" alt="Home Page"
src="transp.png" title="My Site Home"></a>
</div>
--
Stanimir
Gus Richter
> /Gus Richter/:
>
>> <div>
>> <a href="#"><span id="header"></span></a>
>> </div>
>>
>> Replace # above with the URL to be linked to and then specify in the
>> stylesheet:
>>
>> #header{
>> display:block;
>> width:100%;
>> height:100px;
>> background: url(to the banner image) no-repeat;
>> }
>
> That solution is even worse. You put in an empty link and it doesn't
> work at all in IE because of its "block links" bug (the link active area
> is only over the link content).
With all respect Stan, actually try the above. It validates and works
with FF, Opera *and IE*. How does it not work in your IE?
Please provide a reference describing this "block links" bug.
(The link active area is only over the link content - ? - as it should
be - the active link is the content of the anchor, which is the whole
span area (equal to that of the background image) - the span is declared
to contain a background image.)
The link for the entire span area works if the background image is
smaller than the whole area, or even if the background image is totally
missing.
> Claude has found a solution using a transparent image
There are many ways to skin a cat. I'm glad that he has decided on a
method he is happy with - two images in place of one.
--
Gus
Stanimir Stamenkov
> Stanimir Stamenkov wrote:
>
>> That solution is even worse. You put in an empty link and it doesn't
>> work at all in IE because of its "block links" bug (the link active
>> area is only over the link content).
>
> With all respect Stan, actually try the above. It validates and works
> with FF, Opera *and IE*. How does it not work in your IE?
It validates but the main point of not having an empty link stands.
The solution using an <img> is much better since it provides content
through the 'alt' attribute.
> Please provide a reference describing this "block links" bug.
> (The link active area is only over the link content - ? - as it should
> be - the active link is the content of the anchor, which is the whole
> span area (equal to that of the background image) - the span is declared
> to contain a background image.)
> The link for the entire span area works if the background image is
> smaller than the whole area, or even if the background image is totally
> missing.
Hm, may be I haven't tested with IE for a long time. The issue I'm
talking about is not always apparent. Here's an example where you
could observe it:
http://stanio.info/ban/block_links.html
Anyway, the example you've given misguided me as moving the mouse
over the (empty) link content didn't change the pointer as for
normal links.
--
Stanimir
Gus Richter
>
> It validates but the main point of not having an empty link stands. The
> solution using an <img> is much better since it provides content through
> the 'alt' attribute.
I disagree, in that there is content. The content is SPAN with physical
dimensions.
> Hm, may be I haven't tested with IE for a long time. The issue I'm
> talking about is not always apparent. Here's an example where you could
> observe it:
>
> http://stanio.info/ban/block_links.html
Apples and oranges. Your example/contention does not relate here.
> Anyway, the example you've given misguided me as moving the mouse over
> the (empty) link content didn't change the pointer as for normal links.
Once again, it is *not* an empty link and you did not read everything
that I wrote. See the example live, where I included 'hand' for IE:
http://www.home.golden.net/~richterf/Span/span-background.html
It uses simple markup, uses only one image, validates (except for
cursor:hand; needed for IE) and works in FF, Opera and IE.
--
Gus
Stanimir Stamenkov
> Stanimir Stamenkov wrote:
>
>> It validates but the main point of not having an empty link stands.
>> The solution using an <img> is much better since it provides content
>> through the 'alt' attribute.
>
> I disagree, in that there is content. The content is SPAN with physical
> dimensions.
If you disagree that <P></P> is an empty paragraph there could be
some logic in your opinion but then it is just your opinion.
>> Hm, may be I haven't tested with IE for a long time. The issue I'm
>> talking about is not always apparent. Here's an example where you
>> could observe it:
>>
>> http://stanio.info/ban/block_links.html
>
> Apples and oranges. Your example/contention does not relate here.
Yes, I've just pointed the case where some of my concerns have been
related to/from and to answer your comment "Please provide a
reference describing this "block links" bug.". Not that they turned
out to be related in this exact case.
> Once again, it is *not* an empty link and you did not read everything
> that I wrote. See the example live, where I included 'hand' for IE:
>
> http://www.home.golden.net/~richterf/Span/span-background.html
>
> It uses simple markup, uses only one image, validates (except for
> cursor:hand; needed for IE) and works in FF, Opera and IE.
Validation [1] is not everything you need to have a properly marked
up and accessible content, but you should know it. IE doesn't need
'cursor: hand' - the standard 'cursor: pointer' works just fine.
Now, you could try your page in Opera and switch the style and
images off - I really don't see a link. The same would go in a text
browser like Lynx. Using Mozilla or IE you could use some help from
these bookmarklets:
http://www.squarefree.com/bookmarklets/zap.html
[1] http://www.cs.tut.fi/~jkorpela/html/validation.html
--
Stanimir
Gus Richter
> /Gus Richter/:
>
>> Stanimir Stamenkov wrote:
>>
>>> It validates but the main point of not having an empty link stands.
>>> The solution using an <img> is much better since it provides content
>>> through the 'alt' attribute.
>>
>> I disagree, in that there is content. The content is SPAN with
>> physical dimensions.
>
> If you disagree that <P></P> is an empty paragraph there could be some
> logic in your opinion but then it is just your opinion.
Of course the <p></p> is empty and in the following;
<div><a href="#"><span id="header"></span></a></div>
The div has an anchor as content.
*The anchor has span as content*. (Your erroneous contention is that
<a><span></span></a> is an empty anchor.)
The span, on the other hand, is empty, but it does have dimensions and a
background image. The fact that span is empty is inconsequential in this
context.
Your reason for discounting my solution was:
"You put in an empty link and it doesn't work at all in IE because
of its "block links" bug (the link active area is only over the
link content)."
My response still is:
The link active area is over the link content which is span and
furthermore, the span's area of real estate defined by its dimensions.
> Validation ...
I pointed out that it validates in order to point out that it is valid
markup - that no syntax rules are violated.
> IE doesn't need 'cursor: hand' - the standard 'cursor: pointer' works
> just fine.
True for IE 6 in Standards Mode only, but not with IE5.5, which is in
Quirks Mode all the time. IE 5.5 has, depending on surveys, at least as
many users as FF and Opera combined, so is still important. I should
have said that it was needed for IE Quirks.
> Now, you could try your page in Opera and switch the style and images
> off - I really don't see a link. The same would go in a text browser
> like Lynx. Using Mozilla or IE you could use some help from these
> bookmarklets:
Thank you for the links.
Firefox can also turn off CSS with: View/Page Style/No Style
I believe that your argument has changed. It is now not regarding 'empty
link' per se, but the fact that CSS controls the link area and banner
background image and with CSS turned off, the link area is no longer
available. This I am in agreement with. It is a choice to be made - to
use my proposed method (which fulfills the request) or another, where
the banner image is included in each page, which you promoted and which
does not fulfill the request.
RECAP:
My method *works* by fulfilling the OP's original request, for a method
to *not* specify the banner image for each page.
What I believe you are now saying is that my method works, but fails if
CSS is turned off. I totally agree with that. Yet you point out the OPs
method to be acceptable although it should fail for the same reason.
Additionally, you failed to note and point out to him (as you correctly
did for my original example) that his method of overlaying a transparent
gif at the start of each page is also invalid.
--
Gus
claudel
Why is it that you believe that overlaying a transparent image at the
start of each page is "invalid"?
It accomplishes the intended purpose.
Pages containing that overlay validate as acceptable xhtml 1.0 at w3.org.
Claude
Gus Richter
>
> Why is it that you believe that overlaying a transparent image at the
> start of each page is "invalid"?
For the same reason that Stanimir reminded me that my first example was
invalid. Per the specs, you cannot have an inline element (Anchor) as a
child of Body. My second example fixed that by placing the Anchor inside
a Div.
> It accomplishes the intended purpose.
I'm sure it does, but it is not Standards conforming.
> Pages containing that overlay validate as acceptable xhtml 1.0 at w3.org.
Very doubtful if you place the Anchor directly into Body, which is what
you indicate you do with:
..... and overlay a transparent gif at the start of each page.
<a href="/index.php"><img id="banner" alt=""
src="images/banner_background.gif "/></a>
In the event that it does indeed validate, it still does not make it valid.
BTW, for XHTML 1.0, Appendix C is not properly applied for IMG, which
should be:
<img id="banner" alt="" src="images/banner_background.gif" />
Please provide a URL example.
--
Gus
claudel
Gus Richter <gusri...@netscape.net> wrote:
>claudel wrote:
>>
>> Why is it that you believe that overlaying a transparent image at the
>> start of each page is "invalid"?
>
>For the same reason that Stanimir reminded me that my first example was
>invalid. Per the specs, you cannot have an inline element (Anchor) as a
>child of Body. My second example fixed that by placing the Anchor inside
>a Div.
>
>> It accomplishes the intended purpose.
>
>I'm sure it does, but it is not Standards conforming.
>
>> Pages containing that overlay validate as acceptable xhtml 1.0 at w3.org.
>
>Very doubtful if you place the Anchor directly into Body, which is what
>you indicate you do with:
>
> ..... and overlay a transparent gif at the start of each page.
> <a href="/index.php"><img id="banner" alt=""
> src="images/banner_background.gif "/></a>
>
>In the event that it does indeed validate, it still does not make it valid.
According to who, besides you?
>
>BTW, for XHTML 1.0, Appendix C is not properly applied for IMG, which
>should be:
> <img id="banner" alt="" src="images/banner_background.gif" />
>
>Please provide a URL example.
>
>--
>Gus
http://www.isaca-lasvegas.org/index.php
All of the pages with the W3 validation button have passed their validation.
Justin Wood (Callek)
> In article <detngj$om...@ripley.aoltw.net>,
> Gus Richter <gusri...@netscape.net> wrote:
>>
>> ..... and overlay a transparent gif at the start of each page.
>> <a href="/index.php"><img id="banner" alt=""
>> src="images/banner_background.gif "/></a>
>>
>> In the event that it does indeed validate, it still does not make it valid.
>
> According to who, besides you?
>
Well, me if you need a name added in. Though I believe Gus chose bad words.
To use this example you quoted in my explanation.
There is no alt text, but simply a empty string. an img element is
needed to have _meaningful_ _alternate_ text. Which simply means that
"no text" is not meaningful. When there is no text at all, there is
nothing to inform the disabled user what the image "is" (no alternative
if the image wont load). Which makes your example non-conforming (not
necessarily non-validating).
In my last skim through of the WhatWG spec(s) they make this distinction
crystal clear, while the W3C, if I dare infer from their previous
statements I have read, entirely agree's but finds it redundant and
needless to make such a distinction as clear in each and every of their
own specs which have similar needs.
~Justin Wood (Callek)
Gus Richter
> Well, me if you need a name added in. Though I believe Gus chose bad
> words.
I agree with what you said about the alt attribute. I assumed that he
only presented the code portion to take up less space, but his page is
identical.
I stand by my declaring it non-valid, invalid, illegal markup not based
on the alt attribute, but on as I describe further down.
This is the worst case scenario. I begin to appreciate more:
<http://www.hixie.ch/advocacy/xhtml>
claudel's page:
<http://www.isaca-lasvegas.org/index.php>
uses XHTML 1.0 Transitional served as text/html with HTML 3.2 markup and
improperly applies Appendix C. i.e. xxx" />, xxx "/>, <br/> with
comment sections throughout and all with table layout.
Indeed it passes XHTML 1.0 Transitional validation:
<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.isaca-lasvegas.org%2Findex.php>
Although Transitional, it should not have validated and should have
thrown the same first error as in Strict, IMHO.
It does *not* pass XHTML 1.0 Strict validation however:
<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.isaca-lasvegas.org%2Findex.php&charset=%28detect+automatically%29&doctype=XHTML+1.0+Strict>
where the first reported error is the one I was talking about, namely
that in HTML 4.01 only a block element may be the content of body.
The anchor, <a> element, being an inline element, is not a permitted
content of body. It is illegal and not valid markup, hence *invalid*
even though the validator stamped it as valid. The simple solution is to
wrap it in a block like either a p or div.
Please come to c.i.w.a.html where Stanimir and I need some help.
claudel: Use a Strict Doctype (there is no reason to use Transitional
nowadays) and forget about deprecated HTML 3.2 tags.
--
Gus
claudel
Somehow the part of the thread where I said that I assigned
a value to "alt" has gone missing...
Claude
claudel
Gus Richter <gusri...@netscape.net> wrote:
>
>claudel: Use a Strict Doctype (there is no reason to use Transitional
>nowadays) and forget about deprecated HTML 3.2 tags.
Will do. I'm in the process of cleaning up this code.
Claude
Stanimir Stamenkov
> Somehow the part of the thread where I said that I assigned
> a value to "alt" has gone missing...
It is in another branch of the thread
<news://news.mozilla.org/deng47$lcf$1...@bolt.sonic.net>:
/claudel/:
> In article <dene9o$5q...@ripley.aoltw.net>,
> Stanimir Stamenkov <sta...@domain.invalid> wrote:
>>> /claudel/:
>>>
>>>> <a href="/index.php"><img id="banner" alt="" src="images/banner_background.gif "/></a>
>>>
>>> Just specify non-empty 'alt' text.
>
> Yeah. I plan on updating that to "Home Page"
--
Stanimir
Gus Richter
>
> I stand by my declaring it non-valid, invalid, illegal markup not based
> on the alt attribute, but on as I describe further down.
>
> <http://validator.w3.org/check?uri=http%3A%2F%2Fwww.isaca-lasvegas.org%2Findex.php>
>
> Although Transitional, it should not have validated and should have
> thrown the same first error as in Strict, IMHO.
>
> It does *not* pass XHTML 1.0 Strict validation however:
> <http://validator.w3.org/check?uri=http%3A%2F%2Fwww.isaca-lasvegas.org%2Findex.php&charset=%28detect+automatically%29&doctype=XHTML+1.0+Strict>
>
> where the first reported error is the one I was talking about, namely
> that in HTML 4.01 only a block element may be the content of body.
> The anchor, <a> element, being an inline element, is not a permitted
> content of body. It is illegal and not valid markup, hence *invalid*
> even though the validator stamped it as valid. The simple solution is to
> wrap it in a block like either a p or div.
Correction/retraction is in order.
My assertion that an inline element may not be a child of body is
correct for a Strict document, since per the Strict DTD, the body
element may contain %Block.
With a Strict Doctype, only a block element may be content to body.
I had been assuming Strict all along with only a code segment to go by
and since as I said, nowadays one should be coding Strict, IMHO. The
site link provided 12 hours ago uses Transitional, which validates and
took me by surprise.
Per the Transitional DTD, the body element may contain %Flow.
With a Transitional Doctype, a block or inline element may be content to
body.
The Validator was correct and I was wrong.
--
Gus
Justin Wood (Callek)
> In article <deu7fd$ro...@ripley.aoltw.net>,
> Justin Wood (Callek) <116057...@bacon.NoSpamPlease.qcc.mass.edu> wrote:
>> ~Justin Wood (Callek)
>
> Somehow the part of the thread where I said that I assigned
> a value to "alt" has gone missing...
>
> Claude
If that was said, I missed it, though that was but one of the area's I
chose to expound on, I especially share Gus's other views as well, as he
explained in his reply to my last post in this thread.
~Justin Wood (Callek)
claudel
It's easy to miss a post.
I took Gus' advice and recoded my pages to "Strict". I still
have a few spots to clean up. I'm displaying a RSS feed on
a few different pages and the Validator tries to parse those
as well as the page code and coughs up a bunch of errors, but
most everything else seems to be OK. I also have to redo a
2 column page that goes single column with Explorer and
fix a few other things.
Pages are at
Claude