• Home
• About
• Downloads
• Tutorials
• Articles
• Templates
• Resources
• RSS Feeds
• Affiliates
• Contact

Tutorials > CSS > Dynamic Containers Page 2

 

Creating the Styles

First thing is first, the top image. We need to modify our heading so it can contain the 500x25px image. We will also give the heading a 10px top margin.

h2 {
	width: 500px;
	height: 25px;
	margin: 10px 0 0 0;
	background: url(top.gif) no-repeat center top;
}

Next we add the middle image to the container div.

div.container {
	width: 500px;
	background: url(middle.gif) repeat-y center center;
}

Finally we do the bottom image.

div.footer {
	background: url(bottom.gif) no-repeat center bottom;
	width: 500px;
	height: 10px;
}

Current Example

Margins

You will notice that the top and middle images do not join together and that the text goes outside of the sides of our image. This is because of the margins. To fix our Subheading and Paragraphs, we need to change the margins.

h3, p {
margin: 0 10px 10px 10px;
}

All paragraphs and h3 headings now have 0px top margin and 10px left, right and bottom margins.

Current Example

Heading Span

You will also notice that the text in the Heading is in front of our top image, but not where we want it. If you change any properties such as padding or position in the h2 element, it will mess up our image, so let's insert a span around the text itself only.

<h2><span>Heading<span></h2>

Now in your stylesheet, you can change the text properties of any h2 heading without messing up the h2 element. The following code will move the text down to the middle of the 25px image and give it a white background (so the line pattern does not obscure the text).

h2 span {
font-size: 20px;
background: #FFFFFF;
position: relative;
left: 10px;
top: 5px;
}

Current Example

Adding Padding

Our dynamic box is really starting to take shape now. The only problem is the first h3 subheading. It's far too close to the main heading. We cannot add top margin because it will move the element down. Let's add top padding instead to make h3 headings a little bigger.

h3 {
padding: 10px 0 0 0;
}

While we are doing padding, let's add to the right padding of the h2 heading to give some space between the text and the pattern.

h2 span {
font-size: 20px;
background: #FFFFFF;
position: relative;
left: 10px;
top: 5px;
padding-right: 10px;
}

Current Example

We're done!

At last our dynamic box is done. It will increase and decrease in size depending on how much text is within, and our heading looks great. Now all you need to do is change the styling of the font and the colours to get the finished product.

© 2005 Jay Hills of Ikonik.net

Go back to page 1.