1 Reply Latest reply on Nov 11, 2008 6:33 PM by Newsgroup_User

    How do they do this??

    Kalokiari
      Hi, I'm creating a home page that has blocks of text and I can't get it too look quite right. I want it to look as if it's in blocks like this site: http://www.servecanada.org/-In
      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 that first site.
        • 1. Re: How do they do this??
          Level 7
          Hello,

          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
          face image.
          The next nested div is another slice of an image, the bottom corners and
          space between.
          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.

          Take care,
          Tim


          "Kalokiari" <webforumsuser@macromedia.com> wrote in message
          news:gfcllb$huu$1@forums.macromedia.com...
          > Hi, I'm creating a home page that has blocks of text and I can't get it
          > too
          > look quite right. I want it to look as if it's in blocks like this site:
          > http://www.servecanada.org/-In
          > 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
          > that
          > first site.
          >