Sent by A. Prowse on 21 September 2003 23:11
Hi,
I've got a paragraph which I'd like to use CSS to style as follows:
IMAGE text text text text
IMAGE text text text text
IMAGE text text text text
text text text text
text text text text
which, if you're reading this in a monospaced font, looks a bit like a table
layout with the image occupying the left-hand side of the block, and the
text occupying the right-hand side. (The image is just a little "warning
sign" icon; I'm writing a set of instructions and would like to have
something to draw the user's attention to some words of warning!)
To do this, I've tried to use the :before pseudoclass. This works with the
latest Mozilla but not with IE (but that's ok, cos at least all it does is
ignore the image). Unfortunately, I don't seem to be able to get any control
over the image position. Moz displays it like this:
IMAGE
IMAGE
IMAGE text text text text
text text text text text
text text text text text
and nothing I try within the :before selector will make the text start at
the top-right of the image and not occupy the space below the image. [In
particular, float: left doesn't work.] However, if I insert the image in the
marked-up document itself at the start of each paragraph, it could be easily
styled to do what I want by using the following two instructions within the
img selector:
float: left;
margin-bottom: 100%
An example is at
www.soton.ac.uk/~anton/problems/test.html
and the relevant code snippet is below. Any advice appreciated!
Anton
<style>
p.info:before {
content: url("info.png");
}
p.info {
background-image: url("backgroundRed.gif");
background-repeat: repeat-y;
margin-left: 20px;
margin-right: 20px;
padding-left: 50px;
padding-right: 50px
}
</style>
</head>
<body>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing
elit...</p>
</body>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
