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) 6 1808
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.
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
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.
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.
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)
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) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: duncan.lovett |
last post by:
I want to generate dynamic heading images, but I won't be able to use
the GD Library, ImageMagick or any other plug-in to generate an image
on the fly due to hosting restrictions.
I have seen,...
|
by: Jeff Thies |
last post by:
I'm working on yet another online editor, this allows non html savy
people to add "blocks" that may contain paragraphs, headings, lists and
images to the editable part of a template. The editable...
|
by: codeslayer |
last post by:
Greetings to everyone in ‘forum-land':
I have a problem that has plaguing me to no end. It is a CSS-related
question, and I have not seen this question posted anywhere in forums
or through...
|
by: mercurius_1 |
last post by:
I need some help with this page:
http://www.sarahpollock.com/new/x.php
I stole much of this layout from "A List Apart," but I'm no CSS guru
and I desperately need some help with the finishing...
|
by: Paula |
last post by:
I need to do a summary using a crosstab query. The data has a Date field
(Not named "Date"). I can do the Row Heading and Value but am having trouble
with the Column Heading. The summary Columns...
|
by: Ellen Manning |
last post by:
I've got an A2K report showing students and their costs. Student info
is in the main report and costs are in a subreport for each student.
The user inputs the program desired then only those...
|
by: Spartanicus |
last post by:
I wrote an article on HTML headings:
http://codewallop.110mb.com/goodpractice/headingology.htm
--
Spartanicus
|
by: petejones |
last post by:
I have a directory of PDF files which contain Headings/Sub Headings
and Page Numbers. I wish to write a script to open the PDF, read the
Headings and any sub headings and write them out to a file....
|
by: neovantage |
last post by:
Hey all,
I have created transparent PNG images from text dynamically. But it edges are pixel-ate or we can say edges are distorted.
Here is my LINK which shows my generated transparent PNG image....
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |