Hello. How's your CSS knowledge?
I want to use a small image at the beginning of a paragraph but i want text to fall underneath the image when it extends beyond the image (like a drop-cap behaves).
I am going to do this is two stages as I am putting the code together and thought this could be an option. The following code uses first:letter as a method of making a drop cap on a paragraph without the use of an image. It works best with Firefox but shows well in IE6+
<html>
<head>
<title>Drop Caps</title>
</head>
<style>
p#DC:first-letter
{
font-family: Old English Text MT, Old English Text, Old English, Georgia,serif;
float: left;
font-size: 310%;
line-height: 0.8em;
margin-right: 0.05em;
margin-bottom:-0.05em;
}
</style>
<body>
<p id="DC">
But soft, what light through yonder window breaks?
It is the east, and Juliet is the sun.
Arise, fair sun, and kill the envious moon,
Who is already sick and pale with grief
That thou, her maid, art far more fair than she.</p>
</body>
</html>
Jerry I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
In addition this can be used as a background image to a letter or left black to have just the image shown. My image in 5 pixels square so I have a repeat but you can change it to no-repeat
<html>
<head>
<title>Drop Caps</title>
</head>
<style>
.cap {
float: left;
width: 1.5ex;
font-size: 250%;
line-height: 1.6ex;
font-weight: bold;
font-family: Old English Text MT, Old English Text, Old English, Georgia,serif;
background-image : url(images/write.gif);
padding : 2px;
text-align : center;
border: 1px solid black;
margin-right : 2px;
}
</style>
<body>
<p><span class="cap">B</span>ut soft, what light through yonder window breaks?
It is the east, and Juliet is the sun.
Arise, fair sun, and kill the envious moon,
Who is already sick and pale with grief
That thou, her maid, art far more fair than she.</p>
</body>
</html>
Jerry I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
.cap {
float: left;
width: 1.5ex;
font-size: 150%;
line-height: 1.6ex;
font-weight: bold;
font-family: Old English Text MT, Old English Text, Old English, Georgia,serif;
background-image : url(images/write.gif);
padding-left:20px
background-repeat: no-repeat;
border: 1px solid black;
margin-right : 2px;
}
now you can use no characters
Jerry I’ll be more enthusiastic about encouraging thinking outside the box when there’s evidence of any thinking going on inside it
Hi. I'm getting there. I'm only showing the top-right of the image but I'm sure I can play with the padding, etc.
Looking back to my original post, I hadn't explained myself very clearly. I was hoping to define the image as a background to a paragraph of a class called "note", so that it would automatically appear (without an additional span).
I was able to define the image as a background (no-repeat) and use padding to push text to the right of the image. But I couldn't then force the paragraph text to drop under-neath the image. Perhaps this is not possible with a single selector? Thanks again, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
