Como hacer esto en HTML y CSS

okvic77 · #1 (**permalink**) 23/12/2011, 17:38

Como se puede hacer? Tablas no me gustan, consumen mucho (creo), mejor con CSS y HTML, he intentado pero siempre salen movidos, :D, Gracias
Son listas de DIV's

GAST0N · #2 (**permalink**) 23/12/2011, 17:53

no se a q te referis cuando decis q te salen movidos... pero eso son simples listas... no creo que haya mucho problema

okvic77 · #3 (**permalink**) 23/12/2011, 18:01

Algo así pero no me sale

Código:

<html>
<head>
<style type="text/css">

.contenedor {
	font-size: 23px;
	height: 100px;
	width: 700px;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}

.numero {
	float: right;
	left: 350px;
}

.ciudad {
	float: left;
	bottom: 0px;
}

.min {
	float: right;
	bottom: 0px;
	left: 0px;
}

.serie {
	float: left;
	top: 0px;
	position: relative;
}

</style>
</head>
</html>
<body>

<div class="contenedor">
<div class="serie">A100000232423</div>
<div class="numero">3515470123</div>
<div class="ciudad">Zamora</div>
<div class="min">0612436535</div>
</div>

<div class="contenedor">
<div class="serie">A100000232423</div>
<div class="numero">3515470123</div>
<div class="ciudad">Zamora</div>
<div class="min">0612436535</div>
</div>

<div class="contenedor">
<div class="serie">A100000232423</div>
<div class="numero">3515470123</div>
<div class="ciudad">Zamora</div>
<div class="min">0612436535</div>
</div>

<div class="contenedor">
<div class="serie">A100000232423</div>
<div class="numero">3515470123</div>
<div class="ciudad">Zamora</div>
<div class="min">0612436535</div>
</div>


</body></html>

GAST0N · #4 (**permalink**) 23/12/2011, 18:32

eso no son listas

las listas son

ej: listas desordenadas

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>

etc etc

Cita:

Iniciado por okvic77

Algo así pero no me sale

Código:

<html>
<head>
<style type="text/css">

.contenedor {
	font-size: 23px;
	height: 100px;
	width: 700px;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}

.numero {
	float: right;
	left: 350px;
}

.ciudad {
	float: left;
	bottom: 0px;
}

.min {
	float: right;
	bottom: 0px;
	left: 0px;
}

.serie {
	float: left;
	top: 0px;
	position: relative;
}

</style>
</head>
</html>
<body>

<div class="contenedor">
<div class="serie">A100000232423</div>
<div class="numero">3515470123</div>
<div class="ciudad">Zamora</div>
<div class="min">0612436535</div>
</div>

<div class="contenedor">
<div class="serie">A100000232423</div>
<div class="numero">3515470123</div>
<div class="ciudad">Zamora</div>
<div class="min">0612436535</div>
</div>

<div class="contenedor">
<div class="serie">A100000232423</div>
<div class="numero">3515470123</div>
<div class="ciudad">Zamora</div>
<div class="min">0612436535</div>
</div>

<div class="contenedor">
<div class="serie">A100000232423</div>
<div class="numero">3515470123</div>
<div class="ciudad">Zamora</div>
<div class="min">0612436535</div>
</div>


</body></html>

okvic77 · #5 (**permalink**) 25/12/2011, 12:04

No, me refiero a que las listas las tengo con div, y como puedo hacerle para que se vean como en la imagen, ósea, con CSS.