This content has been marked as final. Show 1 reply
The answer is in the code. For example, the "wear to serve box":
It's nested divs inside a container div. Positioning, floats, background
images, etc, are all controlled with CSS.
The container div is floated left (that's why it's left of the "news" and
"donate" areas) and given a width of 328px and a height of 95px.
The first nested div contains an image. The image is the top two corners and
the space in between them, orange with a white edge..
The next nested div has an orange background the same color as the top image
and a left and right white border the same thickness as the white border
that's part of the top image.
Within this div is another nested div which contains the text. This div has
50px of left padding, to push the text to the right to make room for the
The next nested div is another slice of an image, the bottom corners and
That makes the box.
The last div in the container is positioned relative to the middle div with
the orange background, and contains the face image. It essentially positions
the face image in left side of the box.
"Kalokiari" <email@example.com> wrote in message
> Hi, I'm creating a home page that has blocks of text and I can't get it
> look quite right. I want it to look as if it's in blocks like this site:
> But I don't know how they do exactly that. My site looks similar (
> http://www.youthscape.ca/New_HomePg.html ) but I have no empty space
> around the
> text. If I add cell padding, the color seeps out around the white
> headings and
> around the rounded corners.
> Please, help me understand how they created those boxes for the text in
> first site.