[thelist] Positioning item with CSS
Maximillian Schwanekamp
lists at neptunewebworks.com
Mon Jul 11 20:17:24 CDT 2005
Dominick Cancilla wrote:
> You're right -- I tried using floats after getting some good advice from
> this board, but went back to absolutes. The problem was the graphic that
> overlaps the text area -- using floats, IE for Windows would not display the
> thin part of the image that was outside of the text area. Do you know a
> workaround?
You should be able to accomplish the same effect using floats and a
negative margin-left on div.Popout. Negative margins are good way to
pull something out of its container a bit, and works pretty well
cross-browser. But for that to work, you should re-order your markup so
that the image occurs in its natural place within the content, i.e.
right after the picture title "Adam & Eve". You'd probably need
something like:
[html]
<h1 class="paintingtitle">Adam & Eve</h1>
<div class="Popout"><img src="art.jpg" alt=""></div>
<p>Oil on Canvas 24 x 36”<br>
Price on Request</p>
<p>Here’s where you write...</p>
[css]
h1.paintingtitle {
font-size: 1em; /* should be same as whatever body is */
font-weight: bold;
margin: 0 0 1em; /* 1em of space below it. */
}
div.Popout {
float: left;
margin-top: -0.5em;
margin-left: -20px;
border: 1px solid #7D999B;
}
Naturally you'd want to test the above on a variety of browsers. Note
the <h1> instead of <p><b>.
PS - Do you know css-discuss? If not, you might be interested in it. A
good CSS-only list, inhabited both by newbies and by some of the world's
authorities on CSS.
http://www.css-discuss.org/
--
Max Schwanekamp
http://www.neptunewebworks.com/
More information about the thelist
mailing list