Posts: 481
Location: Gold Coast - Brisbane QLD, Australia
|
This is a fairly easy container to reconstruct and there's more than a dozen ways to do it well. A table and a little CSS will do it, so will divs + CSS.
Charge up photoshop and create a gif gradient image to use for the header cell; make it about 24 px high. Keep tweaking the gradient fill until you like what you see. By the looks of it there's only a very subtle shift in the gradient, so don't go using too much contrast between colors. Once you have the image, crop a single pixel wide, vertical strip of the image and export it as a gif named "backgroundHeader.gif" and save it in your images folder.
The following div/css does the rest...
Code:
<head>
<title>Your Title</title>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
}
.cellContainer {
width: 50%;
border: 1px solid #003399;
}
.cellHeader {
background-color: #0066CC;
color: #FFFFFF;
padding: 8px 8px 0px;
background-image: url(images/backgroundHeader.gif);
background-repeat: repeat-x;
height: 24px;
font-size: 12px;
font-weight: bold;
}
.cellBodyPadding {
background-color: #E0E0E0;
padding: 4px;
}
.cellBodyText {
background-color: #FBFBFB;
padding: 4px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
}
-->
</style>
</head>
<body>
<div class="cellContainer">
<div class="cellHeader">
This is the cell header.
</div>
<div class="cellBodyPadding">
<div class="cellBodyText">
<p>The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
</p>
<p> </p>
</div>
</div>
</div>
</body>
Tweak CSS to suit. |
