<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>Текст в виде ресторанного меню (CSS)</title>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<style type="text/css">
* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
width:500px;
border:1px solid #eff2df;
margin:0 20px;
background:#809900;
}
* html #wrap {width:502px;w\idth:500px;}
#wrap .inner{
padding:20px 40px;
border:1px solid #4c7300;
position:relative;
left:-2px;
top:-2px;
background:#eff2df;
color:#4c7300;
width:418px;
}
* html #wrap .inner{width:500px;w\idth:418px;}
#wrap dl{
position:relative;
width:100%;
border-bottom:1px solid #eff2df;
}
#wrap dd{
line-height:1.2em;
position:relative;
padding:0 5em 0 0;
text-align:left;
border-bottom:1px dotted #000;
clear:both;
margin:0 0 .4em 0;
min-height:0;
}
* html #wrap dd{
border:none;
background: url(dotted-leader.gif) repeat-x left bottom;
height:1%;
}
#wrap dt{
background:#eff2df;
padding:1px 0 1px 5px;
color:#809900;
position:absolute;
bottom:0px;
right:-1px;
z-index:99;
}
#wrap dd em{
margin:0 ;
position:relative;
top:.25em;
padding:0 5px 0 0;
background:#eff2df;
}
</style></head><body>
<h1>Dotted Leaders - using a DL list</h1>
<h2>Recipe for success</h2>
<div id="wrap">
<div class="inner">
<dl>
<dt>Dish 1</dt>
<dd><em>Lorem ipsum dolor sit amet </em></dd>
</dl>
<dl>
<dt>Dish 2</dt>
<dd><em>In porta nisl id nisl varius ullamcorper</em></dd>
</dl>
<dl>
<dt>Dish 3</dt>
<dd><em>Suspendisse
augue mauris, mattis ac, commodo quis, lobortis vel, mauris. Etiam
dolor neque, iaculis sit amet, tincidunt nec, elementum ut, lorem.</em></dd>
</dl>
<dl>
<dt>Dish 4</dt>
<dd><em>Donec sed felis sit amet risus</em></dd>
</dl>
<dl>
<dt>Dish 5</dt>
<dd><em>Maecenas
ante. Suspendisse pharetra, metus in tempus egestas, purus ante
pellentesque purus, at gravida metus elit nec nunc. Etiam ante ligula,
porttitor et, euismod commodo, pulvinar id, pede. Curabitur et magna.
Vestibulum leo nibh, viverra sed, imperdiet non,</em></dd>
</dl>
<dl>
<dt>Dish 6</dt>
<dd><em>Etiam ante ligula,</em></dd>
</dl>
<dl>
<dt>Dish 7</dt>
<dd><em>Fusce condimentum</em></dd>
</dl>
<dl>
<dt>Dish 8</dt>
<dd><em>Morbi nibh velit, sodales eu</em></dd>
</dl>
<dl>
<dt>Dish 9</dt>
<dd><em>Etiam ante ligula,</em></dd>
</dl>
<dl>
<dt>Dish 10</dt>
<dd><em>Fusce condimentum</em></dd>
</dl>
<dl>
<dt>Dish 11</dt>
<dd><em>Morbi nibh velit, sodales eu</em></dd>
</dl>
<dl>
<dt>Dish 12</dt>
<dd><em>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta nisl id nisl varius ullamcorper.</em></dd>
</dl>
</div>
</div>
</body></html>
