Adding a frame to paragraphs of variable length

The simple paragraph.

<p>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Add the frame to the top and bottom paragraphs.

This frame comes built-in in QuarkXPress since at least version 3.0.

The frame itself is 478px wide. Considering we want the text to be inset within the frame we specify:

p {
   width: 378px;
   /* 478px total - 50px (pad left)
      -50px (pad right) = 378px  */
   padding-left: 50px;
   padding-right: 50px;
 }

.first {
   background-image: url(img/top_frame.gif);

   background-repeat: no-repeat;
   background-position: 0px 0;
   padding-top:40px;
   /* we add padding so that the frame starts
      at the top of the
      box, but the text starts below the frame */
}

.bottom {
   background-image: url(img/bottom_frame.gif);
   background-repeat: no-repeat;
   background-position: 0px bottom;
   padding-bottom:40px;
 }

<p class="first">Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="bottom">Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Add this frame image to the middle paragraph:

.

.middle {
  background-image: url(img/middle_frame.gif);
  background-repeat: repeat-y;
  /* repeat-y makes the small image repeat
     vertically.
     Using a small repeating image saves
     disk space and bandwidth */
 }

Oops… good idea, wrong implementation.

Note that the frame only covers the area of the text content. It cannot go beyond the area of the box model. So, we have a problem with joining the middle with the two ends.

<p class="first">Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="middle">Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p class="bottom">Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Instead of having the middle part of the frame attached to the middle paragraph, we can add it to the parent element instead.

In this specific example, we have to add a parent element. Semantically, we are adding useless markup code simply for the purpose of adding style. Usually this is not considered clean coding.

However, in a real life web page you would have enough parent elements to use this technique without adding extra code.

If this was a list, we could use the UL element for the repeating side borders and give classes to the first and last LI. That would be clean code.

<div class="textframe">
   <p class="first">Consectetur adipisicing elit...</p>
   <p>Consectetur adipisicing elit...</p>
   <p class="bottom">Consectetur adipisicing elit...</p>
</div>

.textframe {
      background-image: url(img/middle_frame.gif);
      background-repeat: repeat-y;
      width: 478px;
      margin-right: auto;
      margin-left: auto;
      }

Currently, only Safari supports multiple background images. CSS 3 will give us that option. Until then we have to reply on nested elements.

Adding it to the parent element has the advantage that we can add many paragraphs to the container div and the frame always stretches and looks good.

p {
width: 378px;
margin-right: auto;
margin-left: auto;
padding-left: 50px;
padding-right: 50px;
}

.first {
background-image: url(img/top_frame.gif);
background-repeat: no-repeat;
background-position: 0px 0;
padding-top:40px;
}

.bottom {
background-image: url(img/bottom_frame.gif);
background-repeat: no-repeat;
background-position: 0px bottom;
padding-bottom:40px;
}

.textframe {
background-image: url(img/middle_frame.gif);
background-repeat: repeat-y;
width: 478px;
margin-right: auto;
margin-left: auto;
}