469,642 Members | 1,224 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,642 developers. It's quick & easy.

marker in h1

Hello,
I thought it would be a nice idea if I could set an icon in front of a h1
level title. I want to do this as in my site this specific h1 class marks a
certain thing that comes back over and over again. So people recognize this
as what it means.
In fact it is the title of an article, so I want an icon depicting 'article'
in front of the title. I saw in the css2 specs the option of markers. but I
cann't get it to work.

display: marker;
content: url(.....);

shouldn't that be enough?
Dec 17 '06 #1
4 1886
Sjef <ma*************@planet.nlwrote:
In fact it is the title of an article, so I want an icon depicting
'article' in front of the title. I saw in the css2 specs the option of
markers. but I cann't get it to work.
None of the "big" browsers supports markers. But you may use something
like this instead:

h1.article:before {
content: url(image.jpg);
/* ... */
}

This is supported by many browsers.

--
Alexander
Dec 17 '06 #2
jim

Sjef,
Hope the following will work for you.
reference the icon image as a background image for the H1 element; then
position it (if needed) to be centered with the text; lastly, give your
text some padding on the left side so the text does not block the icon:
===============================
<style type="text/css">
..h1icon{
background-image: url(icon.jpg);
background-repeat: no-repeat;
background-position:0% 50%;
padding-left:25px;
}
</style>
</head>
<body >
<h1 class="h1icon"An H1 Element</h1>
===============================

-Jim

Dec 17 '06 #3
Scripsit Sjef:
I thought it would be a nice idea if I could set an icon in front of
a h1 level title.
There are (at least) two ways of achieving that. You can set display:
list-item for the h1 element and then set a suitable marker image. This may
look odd, since it's not really a list item and it's not even syntactically
part of any list, but CSS implementations don't know that. Another approach
is to set a non-repeating background image. This might be a better approach,
since it lets you tune the vertical position of the image with respect to
the heading.

In the first approach, make sure you set a sufficiently large left margin so
that there is room for the image. This is one of the few cases where px unit
makes sense, since the image itself has fixed dimensions in pixels. Example:

h1 { display: list-item;
margin-left: 30px;
list-style-image: url(article.gif); }

In the second approach, you need some suitable left padding. It must be
padding, not margin, since the background image is used for the padding but
not for the margin.

h1 { background-image: white url(article.gif) left center no-repeat;
padding-left: 30px; }
I saw in the css2 specs the option
of markers. but I cann't get it to work.
Such features have almost entirely been left unimplemented, and they have
been removed from the CSS 2.1 drafts.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Dec 17 '06 #4
Thanks for the answers. I will try all options, if only for the sake of
learing!
Sjef

"Jukka K. Korpela" <jk******@cs.tut.fischreef in bericht
news:jJ*****************@reader1.news.saunalahti.f i...
Scripsit Sjef:
>I thought it would be a nice idea if I could set an icon in front of
a h1 level title.

There are (at least) two ways of achieving that. You can set display:
list-item for the h1 element and then set a suitable marker image. This
may look odd, since it's not really a list item and it's not even
syntactically part of any list, but CSS implementations don't know that.
Another approach is to set a non-repeating background image. This might be
a better approach, since it lets you tune the vertical position of the
image with respect to the heading.

In the first approach, make sure you set a sufficiently large left margin
so that there is room for the image. This is one of the few cases where px
unit makes sense, since the image itself has fixed dimensions in pixels.
Example:

h1 { display: list-item;
margin-left: 30px;
list-style-image: url(article.gif); }

In the second approach, you need some suitable left padding. It must be
padding, not margin, since the background image is used for the padding
but not for the margin.

h1 { background-image: white url(article.gif) left center no-repeat;
padding-left: 30px; }
>I saw in the css2 specs the option
of markers. but I cann't get it to work.

Such features have almost entirely been left unimplemented, and they have
been removed from the CSS 2.1 drafts.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Dec 17 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

By using this site, you agree to our Privacy Policy and Terms of Use.