Pagina con texto muy elegante
Bueno otro codigo bien buenoEjemplo:
<style type="text/css">
* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
width:500px;
border:1px solid #eff2df;
margin:0 20px;
float:left;
background:#809900;
display:inline;/*Ie double margin fix*/
}
#wrap ul{
padding:20px 40px;
list-style:none;
float:left;
border:1px solid #4c7300;
position:relative;
left:-2px;
top:-2px;
background:#eff2df;
color:#4c7300;
}
#wrap li{
line-height:1.2;
margin:-.9em 0 0 0;
position:relative;
float:left;
width:100%;
text-align:left;
border-bottom:1px dotted #000;
clear:both;
}
* html #wrap li{
border:none;
background: url(dotted-leader.gif) repeat-x left bottom;
}
#wrap li span{
background:#eff2df;
padding:1px 0 1px 5px;
color:#000;
position:relative;
top:.4em;
left:1px;/* ie rounding error*/
float:right;
}
#wrap li em{
margin:0 ;
position:relative;
top:1.6em;
padding:0 5px 0 0;
background:#eff2df;
}
#wrap p{padding:0 5em 0 0}
</style>
</head>
<body>
<h1>Caja CSS</h1>
<h2>Lore Ipsum</h2>
<div id="wrap">
<ul>
<li>
<p><em>texto 1</em></p>
<span>texto 1.1</span></li>
<li>
<p><em>Texto 2</em></p>
<span>texto 2.1</span></li>
<li>
<p><em>texto 3</em></p>
<span>texto 3.1</span></li>
<li>
<p><em>Texto 4</em></p>
<span>texto 4.1</span></li>
<li>
<p><em>texto 5</em></p>
<span>texto 5.1</span></li>
<li>
<p><em>texto 6</em></p>
<span>texto 6.1</span></li>
<li>
<p><em>texto 7</em></p>
<span>texto 7.1</span></li>
<li>
<p><em>texto 8</em></p>
<span>texto 8.1</span></li>
<li>
<p><em>texto 9</em></p>
<span>texto 9.1</span></li>
<li>
<p><em>texto 10</em></p>
<span>texto 10.1</span></li>
<li>
<p><em>texto 11</em></p>
<span>texto 11.1</span></li>
<li>
<p><em>texto 12</em></p>
<span>texto 12.1</span></li>
</ul>
</div>
</div>
CSS
Codigo editado por: ferumax* {margin:0;padding:0}
h1,h2{padding:10px 20px 0}
#wrap{
width:500px;
border:1px solid #eff2df;
margin:0 20px;
float:left;
background:#809900;
display:inline;/*Ie double margin fix*/
}
#wrap ul{
padding:20px 40px;
list-style:none;
float:left;
border:1px solid #4c7300;
position:relative;
left:-2px;
top:-2px;
background:#eff2df;
color:#4c7300;
}
#wrap li{
line-height:1.2;
margin:-.9em 0 0 0;
position:relative;
float:left;
width:100%;
text-align:left;
border-bottom:1px dotted #000;
clear:both;
}
* html #wrap li{
border:none;
background: url(dotted-leader.gif) repeat-x left bottom;
}
#wrap li span{
background:#eff2df;
padding:1px 0 1px 5px;
color:#000;
position:relative;
top:.4em;
left:1px;/* ie rounding error*/
float:right;
}
#wrap li em{
margin:0 ;
position:relative;
top:1.6em;
padding:0 5px 0 0;
background:#eff2df;
}
#wrap p{padding:0 5em 0 0}
</style>
</head>
<body>
<h1>Caja CSS</h1>
<h2>Lore Ipsum</h2>
<div id="wrap">
<ul>
<li>
<p><em>texto 1</em></p>
<span>texto 1.1</span></li>
<li>
<p><em>Texto 2</em></p>
<span>texto 2.1</span></li>
<li>
<p><em>texto 3</em></p>
<span>texto 3.1</span></li>
<li>
<p><em>Texto 4</em></p>
<span>texto 4.1</span></li>
<li>
<p><em>texto 5</em></p>
<span>texto 5.1</span></li>
<li>
<p><em>texto 6</em></p>
<span>texto 6.1</span></li>
<li>
<p><em>texto 7</em></p>
<span>texto 7.1</span></li>
<li>
<p><em>texto 8</em></p>
<span>texto 8.1</span></li>
<li>
<p><em>texto 9</em></p>
<span>texto 9.1</span></li>
<li>
<p><em>texto 10</em></p>
<span>texto 10.1</span></li>
<li>
<p><em>texto 11</em></p>
<span>texto 11.1</span></li>
<li>
<p><em>texto 12</em></p>
<span>texto 12.1</span></li>
</ul>
</div>
</div>
CSS