Sent by Steve Clay on 27 August 2004 15:03
Thursday, August 26, 2004, 7:47:18 PM, Bru, Pierre wrote:
BP> http://www.simonsays.com/thefallen_site/links.htm
BP> I'm trying to learn CSS and as an exercise I thought I will be able to
BP> emulate ... one "line": a blue title, the red line, the thumbnail and
BP> the corresponding text)
Essentially we have:
<h2>Heading that could potentially wrap!</h2>
<img ... />
<p>Paragraph Text</p>
The image and paragraph part is easy. Float the image right with a red
border and left margin and you're done, so we'll take them out of the
problem.
The red lines can be a top and right border of a containing element, and
some right margin would get the line to stop on the right:
<div class="linkHeading">
<h2>Heading that could potentially wrap!</h2>
</div>
..linkHeading {
border-top:2px red solid;
border-right:2px red solid;
margin-right:59px;
}
..linkHeading h2 {
margin:0 40px 0 0;
}
At this point your heading will sit just below the top border and wrap (if
necessary) 40px to the left of the red border. Now we need to move our
heading on top of the top border and obscure the border with a background
on the heading:
..linkHeading h2 {
margin:0 40px 0 0;
position:relative; top:-.5em;
background:black;
}
At this point it should basically resemble the old page but with too much
space above the paragraph and pic. This is easily remedied by giving the
paragraph and pic some negative margin to pull it up over that area. It's
easier to give negative margin to a container though. So we have:
<div class="linkHeading">
<h2>Heading that could potentially wrap!</h2>
</div>
<div class="linkDescription">
<img ... />
<p>Paragraph Text</p>
</div>
..linkHeading {
border-top:2px red solid;
border-right:2px red solid;
margin-right:59px;
}
..linkHeading h2 {
margin:0 70px 0 0;
position:relative; top:-.5em;
background:black;
}
..linkDescription {
margin-top:-.3em;
}
..linkDescription img {
float:right;
border:2px red solid;
margin-left:1em;
}
..linkDescription p {
margin:0 0 .7em 0;
}
What remains is to clear the image float before we start the next heading
and put some space between the links:
..linkHeading {
/* add: */ clear:right;
/* add: */ margin-top:1.5em;
}
This is untested, so there may be an IE bug to squash, but I think it
should work for the most part.
Steve
--
http://mrclay.org/ * http://frenchhorns.mrclay.org/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
