Styling Lists and Boxes with Round Corners
Let’s begin with the menu. The below CSS listing is only concerned with the menu list itself, not the box that contains it, we’ll get to that later.
#col3_content a{
color:#0ff;
}
#col3_content a:hover{
color:#ff0;
}
#col3_content ul li ul li{
border-bottom:none;
}
#col3_content ul li ul li a{
color:#fff;
}
#col3_content ul li{
list-style-type:none;
padding:5px 0 5px 0;
margin:0;
border-bottom:dotted 1px #fff;
}list-style-type:none will get rid of the default circles to the left of each item. Padding top and bottom by 5px will give us nice space.
I’m not really sure if it’s worth it to do div + CSS boxes having round corners, I wanted to manage with this project though so I went through the ordeal of creating them anyway. Let’s start with the simpler version:
<div class="box_t">
<div class="box_b">
<div class="box_l">
<div class="box_r">
<div class="box_bl">
<div class="box_br">
<div class="box_tl">
<div class="box_tr">
<div class="box_bg">
<h5>Herzlich Willkommen bei der Cocktailseite!</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Truly a mess, box_t is top, b bottom, l left, r right, bl border left and so on and bg is background.
The more complex example:
<div class="box_t">
<div class="box_l">
<div class="box_r">
<div class="box_tl">
<div class="box_toponly_tr">
<div class="box_toponly_bg">
<h5>Cocktails von A-Z:</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box_lower_b">
<div class="box_lower_l">
<div class="box_lower_r">
<div class="box_lower_bl">
<div class="box_lower_br">
A B C
</div>
</div>
</div>
</div>
</div>Here we need to style both the headline area and the content.
The CSS for both box types and the h5 headline we are using as text/headline:
.box_bg {background: url(../img/box_bg.jpg) 0 0 repeat; }
.box_t {background: url(../img/box_bt.jpg) 100% 0 repeat-x; }
.box_b {background: url(../img/box_bb.jpg) 0 100% repeat-x}
.box_l {background: url(../img/box_bl.jpg) 0 0 repeat-y}
.box_r {background: url(../img/box_br.jpg) 100% 0 repeat-y}
.box_bl {background: url(../img/corner_bl.jpg) 0 100% no-repeat; }
.box_br {background: url(../img/corner_br.jpg) 100% 100% no-repeat; }
.box_tl {background: url(../img/corner_tl.jpg) 0 0 no-repeat; }
.box_tr {background: url(../img/corner_tr.jpg) 100% 0 no-repeat; padding:10px; }
.box_toponly_tr {background: url(../img/corner_tr.jpg) 100% 0 no-repeat; padding:10px 10px 0px 10px; }
.box_toponly_bg {background: url(../img/box_bg.jpg) 0 0 repeat; height:30px; }
.box_lower_t { width: 100%; }
.box_lower_b {background: url(../img/box_black_bb.jpg) 0 100% repeat-x; }
.box_lower_l {background: url(../img/box_black_bl.jpg) 0 0 repeat-y;}
.box_lower_r {background: url(../img/box_black_br.jpg) 100% 0 repeat-y; }
.box_lower_bl {background: url(../img/corner_black_bl.jpg) 0 100% no-repeat; }
.box_lower_br {background: url(../img/corner_black_br.jpg) 100% 100% no-repeat; padding:10px; }
h5 { font-size: 116.67%; color:#ff0; margin:0; font-family:Tahoma; }Example corner (corner_tr.jpg): 
Example border (box_br.jpg): 
Note the use of padding:10px 10px 0px 10px; to get the proper distances. Each corder is 10×10 and the borders are either 10×1 or 1×10.
The backgrounds are simply 1×1 images to get the right color in the background.
And finally some screen shots:
Simple box:
Complex box:
Menu:
