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 image does not need to be very tall. Here is mine that I created for a page with a black background:

(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“.

(more…)