On 9/22/11 4:01 PM, "G.Sørtun" <gunla...@c2i.net> wrote:
>On 22.09.2011 16:38, Giles, Sarah wrote:
>> I want to add an img before a<div> tag using CSS content. Is this
>>possible?
>
>Yes, no problem.
>
>Example-page: http://www.gunlaug.com/index.html
>
>...where I use the following site-wide styles to insert 3 birds, an (R)
>and a (C) in the header-area, and a cat at the cross-point between right
>column and footer. All images absolute positioned relative to their
>containers, and all discretely injected as page-decoration :-)
This is what I went with:
<style>
body{
background-color:#c1a574;
}
.wrapper{
width:600px;
margin:50px auto;
}
.featured_offer:before{
content:url(http://myimage.png);
left: -60px;
position: relative;
top: -20px;
}
.featured_offer{
border:1px solid #44220e;
margin:10px 0px;
background-color:#e8deb6;
padding:0 20px 20px 40px;
color: #44220e;
}
.featured_offer h1{
margin:-15px 0px 8px -20px ;
padding:0px;
font-family: "Palatino Linotype","Book Antiqua",Palatino,serif;
font-size: 1.9em;
}
</style>
</head>
<body>
<div class="wrapper">
<section class="featured_offer">
<h1>blah balh balh</h1>
<p>
Some stuff about blah blah blah. <p>
<h2>blah balh balh:</h2>
<ul>
<li>blup</li>
<li>blup</li>
<li>blup</li>
<li>blup</li>
</ul>
</section>
</div>
</body>
I haven't tested it yet in all browsers how it will work.
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
