CSS Vertical Scaling Menu
This tutorial will show you a very simple and very common method to scale content areas with css. If you are not familiar with the difference between padding and margin, then some of this section may not make sense. If you need to brush up on padding and margin please see the first section here.
Moving forward, let’s create a semi-complex background for our menu. Something that will require us to pad and manipulate our content a bit to display correctly. Remember that we are going to scale this area vertically, so your source images does not need to be very tall. Here is mine that I created for a page with a black background:

Now, to our viewer this will look like a nice curved area with a background lighting effect. As long as our content stays within the boundaries we set they will never realize the truth of all images. They are indeed quite square:

Cutting up our Menu Image
Our Menu will have 3 areas that we need to line up perfectly. A top (header), body (content), and bottom (footer). Make sure that when you are cutting you do not leave deviation in the body part of menu. As we will be repeating the image vertically any flaws or unwanted pattern will be an immediate eyesore. Here is my image chopped up:
Top Section:

Body Section:

Bottom Section:

Now, we need to put our pieces back together again in a vertical menu. Thinking ahead, our menu will most likely be sitting in a css column or some other element that will work to hold it together horizontally as well as position it on the page. This will work as a “wrapper”. Let’s start off with a bit of html code to build the base area:
<div class="tutorial_padding2_wrapper">
<div class="tutorial_padding2_top"></div>
<div class="tutorial_padding2_body"></div>
<div class="tutorial_padding2_bottom"></div>
</div>
Let’s take a second to think how we want to content to come out and then make a game plan to get those results in CSS.
Top Section:
Since we made the top section really stand out, let’s utilize it as a heading. Our image has a significant amount of space at the top of the area, we can bring the content of the area down with padding and then subtract that padding we added from the total height of the area. As both sides of the top image are curved we will either need to strongly indent for a left or right text align, or perhaps even center the header.
Body Section:
The body will have a finite amount of horizontal room. On either side we are going to need to make sure we allow padding for the glow effect as well as internal padding so the content is not resting right on the image border. We will scale this background image on the y-axis. Here will we also learn a bit about CSS compatibility with multiple browsers. To save you much headache, I will disclose that many older versions of Internet Explorer inherently make matching up two background areas on top of each other a chore. This is especially true when using standard tags that have inherent margin and line-height like h1, h2, p, ect.
The easiest way I have found to work around this is to have one of the content areas adjusted for additional top and bottom padding. The area I suggest doing this in is the scaling area. This will keep the pickiness of Internet Explorer sated, and allow anyone who adds content to the area after you the flexibility to use various tags.
Bottom Section:
The bottom section I created is not tall enough or interesting enough to really do much except cap off the bottom of the menu, so that is all I will have it do.
With all of that said, and a good idea of what we want our content areas to look like when complete, let’s generate our CSS:
.tutorial_padding2_wrapper {
width:250px;
}
.tutorial_padding2_top {
width:250px;
height:23px;
padding-top:12px;
background:url(/tutorials/tutorials_prep/css/padding2_top.jpg) no-repeat;
text-align:center;
color:#FF0;
font-size:14px;
font-weight:bold;
}
.tutorial_padding2_body {
width:210px;
padding-bottom:10px;
padding-left:20px;
padding-right:20px;
padding-top:10px;
background:url(/tutorials/tutorials_prep/css/padding2_body.jpg) repeat-y;
color:#FFF;
font-size:12px;
text-align:left;
}
/tutorial_padding2_bottom {
width:250px;
height:20px;
padding:0px;
margin:0px;
background:url(/tutorials/tutorials_prep/css/padding2_bottom.jpg) no-repeat;
}
This will give our HTML we generated the following results:
Now with some generic content:
<div class="tutorial_padding2_wrapper">
<div class="tutorial_padding2_top">Vertical Menu</div>
<div class="tutorial_padding2_body">
<b>Category 1</b>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
<b>Category 2</b>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
<div class="tutorial_padding2_bottom"></div>
</div>
We will get results like these:
- Menu Item 1
- Menu Item 2
- Menu Item 3
Category 2
- Menu Item 1
- Menu Item 2
- Menu Item 3
Now that we have everything working correctly and our CSS is working we can start to use our menu multiple times for different menu systems in the same content area if we wish:
- Menu Item 1
- Menu Item 2
- Menu Item 3
Category 2
- Menu Item 1
- Menu Item 2
- Menu Item 3
- Menu Item 1
- Menu Item 2
- Menu Item 3
Category 2
- Menu Item 1
- Menu Item 2
- Menu Item 3
- Menu Item 1
- Menu Item 2
- Menu Item 3
Category 2
- Menu Item 1
- Menu Item 2
- Menu Item 3
I hope you were able to use some of the second part of this tutorial in your own work and learned something from it. I will keep adding more content as time allows. Hopefully I will expand on CSS spacing even more.


