Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
Using Dreamweaver, I've been using the insert command to do this. The code inserted is:
<span class="clear"><img src="../graphics/bullets/ball.gif" alt="tan ball graphic" width="15" height="15" /></span>
I'm completely new to css, but I'm thinking there must be a cleaner way to do this. Can someone please point me in the right direction? And bear in mind I am only just learning css, so it will have to be very basic.
A tiny bit more html to go along with that context would help us too in all likelihood.
Most likely css can add background-images on just about any element you might have, but knowing a bit more about th structure and goal of it is needed to show you the best way.
Still to get you going:
suppose you want to add the ball as a divider between paragraphs:
background: white url(ball.gif) no-repeat top center;
The first statement removes padding and margins from paragraphs (they by default have some (browser dependent just what)
And gives them a white background.
The second one adds an image to the background of paragraphs that are preceded by other paragraphs, and fives them enough padding to have the background stick out over the text.
Padding etc might need to be adapted to the actual image etc.
IE6 doesn't support the sibling selector p+p, so it'll degrade there not to show it at all (there are fixes for that).
Some alternative ways to insert images if they are presentational only (so don't have to be in the html) are:
In your css
background: blue url('../graphics/bullets/ball.gif') no-repeat;
background: transparent url('xhtml10_copy1.gif') no-repeat;
In your html:
<p>This is an example using a background image on a bold element because bold is not used so often, <b> </b> and this is an example using a "bullet" inside styled italics <i>•</i> for the same reason. Neither are very nice from an accessibility perspective, so it would be better to use them in conjunction with an element that already exists in the code.</p>
<li>Increase the padding</li>
<li>to create some</li>
<li>space between the</li>
<li>image and list item</li>