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:

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:

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.

Background - Padding and Margin

First, we must understand that all content has a property called “border”. For most content, you will not physically see the border, but it is there. Much like a property line between houses, there are boundaries between object and space. When we modify border properties with css we can see the border around our content visually. We have two main ways of influencing the spacing of our content and our border. These are called “padding” and “margin“.

Padding is the space between the content and the border. Margin is space between the border and any other piece of content outside of the area. For the purpose of this tutorial we are going to focus on the padding property. While both margin and padding are equally important, designers tend to solve problems with padding more as padding is within the content boundary. Margin is only space; we cannot do anything with it other than create space.

Moderate Padding Example

Let’s take a look at a stylized content area that we want to use for a layout:

Now, we need to account for all aspects of the area so we see it entirely and account for the subtle elements that extend past the area like the shadowing. This image is 220px x 220px. This means that we need to make sure the area within our border is 220px x 220px. Look back to our previous chart of margin and padding we see that the space within the border is all of the content plus all of the padding.

Content + Padding = Style Area
Content + Padding + Margin = Total Area

This is true for both dimensions (height and width). So when we go to code the element, we are going to account for showing the background within the style area like so:


.tutorial_padding_moderate {
height:180px;
width:180px;
padding:20px;
background:url(/tutorials/tutorials_prep/css/padding_base.png) no-repeat;
font-size:10px;
}


This will leave us with a content area within the boundaries of the image like this:

Then using this html code:


<div class="tutorial_padding_moderate">
<ul>
<li>Something in a list</li>
<li>Something in a list</li>
<li>Something in a list</li>
<li>Something in a list</li>
<li>A Sub List
<ul>
<li>Something in a sub list</li>
<li>Something in a sub list</li>
</ul>
</li>
<li>Something in a list</li>
<li>Something in a list</li>
</ul>
</div>


We can get results like this:

Look for the second part of this tutorial soon!