By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,742 Members | 773 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,742 IT Pros & Developers. It's quick & easy.

Styling title element

P: n/a
Although http://www.w3.org/Style/LieBos2e/enter/ say "The title of a
document does not show up on the canvas, so it is not affected by CSS
styles", there is a note by Seamus P. H. Leahy on styling the title
element in CSSPlay
http://moronicbajebus.com/wordpress/...title-display/
When I tried this to add a background image, the Jigsaw validator
http://jigsaw.w3.org/css-validator/validator-upload didn't complain.

The CSS I used was-
head, title{ display: block; }
title{ height: 0; padding-top: 240px; overflow: hidden;
background-image: url(images/test.jpg); background-repeat: no-repeat; }

While I didn't find much about this by Googling, images and background
colours worked in the first three browsers I tried (Firefox, Opera,
Safari).

Is there any reason not to use this?

--
http://www.ericlindsay.com
Dec 15 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Eric Lindsay <NO*************@ericlindsay.comwrote:
>Although http://www.w3.org/Style/LieBos2e/enter/ say "The title of a
document does not show up on the canvas, so it is not affected by CSS
styles", there is a note by Seamus P. H. Leahy on styling the title
element in CSSPlay
http://moronicbajebus.com/wordpress/...title-display/
When I tried this to add a background image, the Jigsaw validator
http://jigsaw.w3.org/css-validator/validator-upload didn't complain.

The CSS I used was-
head, title{ display: block; }
title{ height: 0; padding-top: 240px; overflow: hidden;
background-image: url(images/test.jpg); background-repeat: no-repeat; }

While I didn't find much about this by Googling, images and background
colours worked in the first three browsers I tried (Firefox, Opera,
Safari).

Is there any reason not to use this?
It can cause User Agents to render the same content twice. It may
prevent a speaking UA's ability to be configured to speak the title or
not. IIRC the specs specify that title content must not be rendered in
the viewport.

CSS allows people to do many things that shouldn't be attempted. A CSS
checker will at best only check the code syntax, it can at best only
guess and warn about whether something is good authoring practice.

The question however is: why on earth would you want to do this?

--
Spartanicus
Dec 15 '06 #2

P: n/a
In article <qo********************************@4ax.com>,
Spartanicus <in*****@invalid.invalidwrote:
Eric Lindsay <NO*************@ericlindsay.comwrote:
Although http://www.w3.org/Style/LieBos2e/enter/ say "The title of a
document does not show up on the canvas, so it is not affected by CSS
styles", there is a note by Seamus P. H. Leahy on styling the title
element in CSSPlay
http://moronicbajebus.com/wordpress/...title-display/
When I tried this to add a background image, the Jigsaw validator
http://jigsaw.w3.org/css-validator/validator-upload didn't complain.

The CSS I used was-
head, title{ display: block; }
title{ height: 0; padding-top: 240px; overflow: hidden;
background-image: url(images/test.jpg); background-repeat: no-repeat; }

While I didn't find much about this by Googling, images and background
colours worked in the first three browsers I tried (Firefox, Opera,
Safari).

Is there any reason not to use this?

It can cause User Agents to render the same content twice. It may
prevent a speaking UA's ability to be configured to speak the title or
not. IIRC the specs specify that title content must not be rendered in
the viewport.

CSS allows people to do many things that shouldn't be attempted. A CSS
checker will at best only check the code syntax, it can at best only
guess and warn about whether something is good authoring practice.

The question however is: why on earth would you want to do this?
The title element seemed to me to be a perfect place to put an otherwise
irrelevant graphic element that was indicative of the type of web site,
rather than the specific content of any page.

The text in the title element still appears as usual in the browsers, so
I would hope most speaking UA would still cope with it.

My architect neighbour thought he should have a web site. After I
gathered some text material for SEO, he sent a list of web sites he
really liked (all of which were invalid, had a splash page with no text
content, and needed Javascript for navigation). They don't appear in the
first hundred or so search results for their areas. However they were
very pretty indeed.

It just seemed to me that a background graphic in the title element was
the perfect place for something pretty that had nothing to do with the
actual page contents. I am looking at using several background graphics
on the site. I imagine I could get the same visual effect in several
other ways, so if it turns out to be a really bad idea I will look
elsewhere.

I am not at all used to doing pages with anything except text, so I am
sort of scratching about with which way to approach a site that has to
look fancy as well as getting into the top two or three search engine
positions.

--
http://www.ericlindsay.com
Dec 15 '06 #3

P: n/a
Eric Lindsay <NO*************@ericlindsay.comwrote:
>The question however is: why on earth would you want to do this?

The title element seemed to me to be a perfect place to put an otherwise
irrelevant graphic element that was indicative of the type of web site,
rather than the specific content of any page.
Why do you think that specifying a background image on the title element
would be any different than using a background image on a body element?
>My architect neighbour thought he should have a web site. After I
gathered some text material for SEO, he sent a list of web sites he
really liked (all of which were invalid, had a splash page with no text
content, and needed Javascript for navigation). They don't appear in the
first hundred or so search results for their areas. However they were
very pretty indeed.

It just seemed to me that a background graphic in the title element was
the perfect place for something pretty that had nothing to do with the
actual page contents. I am looking at using several background graphics
on the site. I imagine I could get the same visual effect in several
other ways, so if it turns out to be a really bad idea I will look
elsewhere.
Its a really daft idea and the above is no justification. You should
also consider that IE doesn't support this. For page authoring SEO is
almost always synonymous with nasty spamming tricks that degrade the
quality of the content considerably.
>I am not at all used to doing pages with anything except text, so I am
sort of scratching about with which way to approach a site that has to
look fancy as well as getting into the top two or three search engine
positions.
Create good quality content, mark it up properly, style it so that it
looks good, forget about SEO completely. When you are finished making
the site, get good quality inbound links to the site, that will do much
more for SE ranking than any "SEO".

--
Spartanicus
Dec 15 '06 #4

P: n/a
In article <cp********************************@4ax.com>,
Spartanicus <in*****@invalid.invalidwrote:
Eric Lindsay <NO*************@ericlindsay.comwrote:
Why do you think that specifying a background image on the title element
would be any different than using a background image on a body element?
Once the head element was included in the display, I didn't think the
title element would be treated any different to a background image on
any other body element. But if that was the case, then I didn't see any
particular reason not to use it.
>
Its a really daft idea and the above is no justification. You should
also consider that IE doesn't support this. For page authoring SEO is
almost always synonymous with nasty spamming tricks that degrade the
quality of the content considerably.
IE doesn't support allowing head to display? I guess that is a good
enough reason not to.

I am resisting anything that approaches SEO spamming tricks. One problem
is the architects are very visually oriented, and basically want the
text left out (or not visible). I have been deliberately not styling the
pages until I get enough content from them, because I know they are
going to be much more interested in the appearance than the content.
I am not at all used to doing pages with anything except text, so I am
sort of scratching about with which way to approach a site that has to
look fancy as well as getting into the top two or three search engine
positions.

Create good quality content, mark it up properly, style it so that it
looks good, forget about SEO completely. When you are finished making
the site, get good quality inbound links to the site, that will do much
more for SE ranking than any "SEO".
Good advice. I won't have much problem getting the search engine
position I want, as long as I keep picking on the architect folks for
more and more material I can use. At least, as long as I can keep them
from wanting to imitate sites with no content. The good inbound links
will initially be more of a problem, as usual, although I'll get a few
early ones.

Thanks for the usual helpful comments. When I stop experimenting and
start styling, I'll probably ask for help again.

--
http://www.ericlindsay.com
Dec 15 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.