In the previous post, you used code to set up drop-down menus with the SELECT function.

But the drop-down box created has no width limit. It will stretch to fit the length of its options. That is the default behavior. Thus if you have long post titles, the "Previous Posts" menu may stretch out your sidebar and fall to the bottom of the page.

To remedy this, use CSS (Cascading Style Sheet) code to set width limits for all drop down menus. CSS code is usually found at the beginning of the template, or near the top. CSS settings apply to the whole page.

The CSS code shown below will limit the width of the drop-down menus to a modest 200 pixels. Most Blogger sidebars are 240 pixels wide, including margins, so this code will work nicely with most templates.


select {
width: 200px;
color: #666;
background: #e0e0e0;
}


The code means that when the SELECT element is used, the formatting indicated between the curly quotes will be applied. As well as setting a standard width, it creates a customized color scheme, with a color for text and a lighter background.

What colors are #666 and #E0E0E0?

#666 is an RGB color name. RGB stands for the Red-Green-Blue color palette. More on that at Wikipedia

But #e0e0e0 is in the more-commonly used Hexadecimal code and you'll find it here.

Now you have set formatting for all SELECT statements -- i.e., all drop-down menus -- on your webpage. Your blog gains a polished and professional appearance when formatting is consistent. That's the advantage that CSS has over plain HTML. It's the difference between wearing shoes that match and shoes that don't match. Or the difference between wingtips and bunny slippers.

More on CSS here

Technorati Tags - code html CSS