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

Images in headings

P: n/a
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)
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Els
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.

Jul 20 '05 #2

P: n/a
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

Jul 20 '05 #3

P: n/a
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.

Jul 20 '05 #4

P: n/a
In article Barbara de Zoete wrote:
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;


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.

Jul 20 '05 #5

P: n/a
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)
Jul 20 '05 #6

P: n/a
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)
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.