Stylesheets - Images in headings

Author

Images in headings

Lukasz Grabun

2004-02-19, 3:32 pm

Hi,

It's easy using css to swap standard bullet with any image. This can
be done. It is also relatively easy to use images instead of text in
headings.

But how on Earth, does one combine image and text in one heading? I'd
like to achieve something as follows:

[ image ]
[       ]
[       ]
[       ] Heading goes here

As for now, all I get is:

[ image ] Heading goes here
[       ]
[       ]
[       ]

How do I lower the text?

Here's corresponging CSS:

#content h1
{
  margin-top: 0;
  color: #f90;
  background: url(images/hicon.gif);
  background-repeat: no-repeat;
  background-position: left;
  height: 50px;
  padding-left: 20px;
}

--
Lukasz Grabun
(reply-to field is fake, use grabek (at) acn dot waw dot pl to reply)

Els

2004-02-19, 4:30 pm

Lukasz Grabun wrote:

> Hi,
>
> It's easy using css to swap standard bullet with any image. This can
> be done. It is also relatively easy to use images instead of text in
> headings.
>
> But how on Earth, does one combine image and text in one heading? I'd
> like to achieve something as follows:
>
> [ image ]
> [       ]
> [       ]
> [       ] Heading goes here
>
> As for now, all I get is:
>
> [ image ] Heading goes here
> [       ]
> [       ]
> [       ]
>
> How do I lower the text?

You don't. You lift the image ;-)

> Here's corresponging CSS:
>
> #content h1
> {
>   margin-top: 0;
>   color: #f90;
>   background: url(images/hicon.gif);
>   background-repeat: no-repeat;
>   background-position: left;
>   height: 50px;
>   padding-left: 20px;
> }

Ah, you're talking about a background image.
With a regular image, do it like this:
<h1>This is the heading with this <img
src="images/hicon.gif" alt=""> in it.</h1>

and in the css:
#content h1 img {vertical-align:baseline;}

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Barbara de Zoete

2004-02-19, 4:30 pm

Lukasz Grabun wrote:

> But how on Earth, does one combine image and text in one heading? I'd
> like to achieve something as follows:
>
> [ image ]
> [       ]
> [       ]
> [       ] Heading goes here
>

What is the height of the image? Presume it is 100px heigh and 100px wide:

<style>
h1 {
   padding:60px 0 0 0;
   border:0;
   margin:0 0 60px 0;
   text-indent:100px;
   background: transparent url(foo/bar.img) no-repeat bottom left; }
</style>

Will that do?

--

Barbara

http://home.wanadoo.nl/b.de.zoete/html/weblog.html
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html

Lauri Raittila

2004-02-19, 4:30 pm

In article Lukasz Grabun wrote:
> Hi,
>
> It's easy using css to swap standard bullet with any image. This can
> be done. It is also relatively easy to use images instead of text in
> headings.
>
> But how on Earth, does one combine image and text in one heading? I'd
> like to achieve something as follows:

Try this CSS instead what you use now: "" (whiout quotes)
<h1><img>Text</h1>

Or perhaps vertical-align:bottom for img. URL?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Lauri Raittila

2004-02-19, 4:30 pm

In article Barbara de Zoete wrote:
> Lukasz Grabun wrote:
>
>
> What is the height of the image? Presume it is 100px heigh and 100px wide:
>
> <style>
> h1 {
>    padding:60px 0 0 0;

padding top 60px

>    border:0;
>    margin:0 0 60px 0;

margin bottom 60px

Notice that background is not drawn on margin.

>    text-indent:100px;

>    background: transparent url(foo/bar.img) no-repeat bottom left; }

And people with images off will see?

> </style>
>
> Will that do?

No. What if default font size is 10px or 45px? Why on earth text-indent,
text can wrap.

Anyway, why couldn't OP give URL, so we wouldn't need to guess all
relevant information (none were in the post.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Lukasz Grabun

2004-02-19, 4:30 pm

On Thu, 19 Feb 2004 22:14:41 +0200, Lauri Raittila wrote:

> Anyway, why couldn't OP give URL, so we wouldn't need to guess all
> relevant information (none were in the post.)

Sorry, here it is:

http://www.dwarfscorner.com/

--
Lukasz Grabun
(reply-to field is fake, use grabek (at) acn dot waw dot pl to reply)

Lukasz Grabun

2004-02-19, 5:31 pm

On Thu, 19 Feb 2004 21:55:11 +0200, Lauri Raittila wrote:

> Try this CSS instead what you use now: "" (whiout quotes)
> <h1><img>Text</h1>

  Works like a charm. Thank you (and all posters as well).

> Or perhaps vertical-align:bottom for img. URL?

  Sorry; I haven't posted URL for I haven't applied graphics yet. Now
all that fancy stuff is only - the link was given somewhere in the
thread but I dare to type it once again

  http://www.dwarfscorner.com/

--
Lukasz Grabun
(reply-to field is fake, use grabek (at) acn dot waw dot pl to reply)