Reemplazar tabla por css !!!

colote · #1 (**permalink**) 23/04/2009, 10:06

Hola gente, lo que necesito aplicar una linea de datos por ejemplo
CODE**NOMBRE***PRECIO

Pero lo que no se como hacer es definir la distancia entre code y detalle y precio. lo que hice es esto, pero se muestran uno a lado del otro pegados ...
El CSS:

Código:

div#l1{
float:left; 
text-align:right;
width:30px;
line-height:10px;
}

Asi lo veo en la pagina:

Código:

<div class='l1'><?echo $cli['cod_cli']?>
<?echo $cli['razon_soc']?>
<?echo $pie['cod_pieza']?></div>

Gracias, Ricardo !!!

willyfc · #2 (**permalink**) 23/04/2009, 10:19

primero que nada lo que estas declarando(#11) es un id, y en el html(o php), llamas a una clase 11, una cosa más, no creo que todos esos datos quepan en 30px de ancho, pero fijate si este ejemplo te sirve:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.contenedor{ width:300px; height:auto; overflow:auto;}
.campos{float:left; width:30px; height:20px; padding:0 10px;}
</style>
</head>
 
<body>
<div class="contenedor">
    <div class="campos"><?php echo $cli['cod_cli']?></div><div class="campos"><?php echo $cli['razon_soc']?></div><div class="campos"><?php echo $pie['cod_pieza']?></div>
</div>
</body>
</html>

colote · #3 (**permalink**) 23/04/2009, 10:32

Hola willyfc , gracias por tu respuesta , mira lo que hice , el resultado es el que quiero, pero por ahi se puede simplificar , jejeje !!!

CSS:

Código:

div#l1{ /* cod_cli */
float:left; 
text-align:left;
width:30px;
line-height:12px;
margin-left:5px
}

div#l2{ /* razon_soc */
float:left; 
text-align:left;
width:210px;
line-height:12px;
margin-left:5px
}

div#l3{   /* cod_pieza */
float:left; 
text-align:left;
width:30px;
line-height:12px;
margin-left:5px
}
div#l4{  /* nombre_pieza */
float:left; 
text-align:left;
width:330px;
line-height:12px;
margin-left:10px
}

div#l5{  /* cantp */
float:left; 
text-align:left;
width:30px;
line-height:12px;
margin-left:10px
}


div#l6{  /* cant_ent */
float:left; 
text-align:left;
width:30px;
line-height:12px;
margin-left:10px
}

div#l7{  /* cant_rest */
float:left; 
text-align:left;
width:30px;
line-height:12px;
margin-left:10px
}

div#l8{  /* fecha */
float:left; 
text-align:left;
width:80px;
line-height:12px;
margin-left:10px
}

Y en la pagina, los muestro asi :

Código PHP:

 
<div id="l1"><?echo $cli['cod_cli']?></div> 
<div id="l2"><?echo $cli['razon_soc']?></div> 
<div id="l3"><?echo $pie['cod_pieza']?></div> 
<div id="l4"><?echo $pie['nombre']?></div> 
<div id="l5"><?echo $sped['cantp']?></div> 
<div id="l6"><?echo $sped['cant_ent']?></div> 
<div id="l7"><?echo $sped['cant_rest']?></div> 
<div id="l8"><?echo $fec_ent_ped[2];echo "/";echo $fec_ent_ped[1];echo "/";echo $fec_ent_ped[0];?></div><br>

Tambien te queria preguntar, es necesario siempre hacer un container ?

Saludos, Ricardo !!!

xurxinho · #4 (**permalink**) 23/04/2009, 10:39

willyfc te respondió correctamente. Sólo una cosa, yo no pondría tantos id y si más clases puesto que simplificarías el código. Con el contenedor tienes un punto de anclaje donde posicionar después su contenido.

Sin tanto id ahorras código y terminas antes ejemplo:

Código HTML:

<style type="text/css">
.caja1{
	float:left;
	width:120px;
	border:1px solid #cca;
	height:30px;
	text-align:center;
}
.salto{
	clear:both;
}
#contenedor{
	position:relative;
	margin:0px auto;
	width:366px;
	height:400px;
	border:1px solid #000;
}
</style>
</head>
<body>
<div id="contenedor">
	<div class="caja1">code</div>
	<div class="caja1">nombre</div>
	<div class="caja1">apellidos</div>
	<div class="salto"></div>
	<div class="caja1">1</div>
	<div class="caja1">Jorge</div>
	<div class="caja1">González</div>
	<div class="salto"></div>
	<div class="caja1">2</div>
	<div class="caja1">Pepe</div>
	<div class="caja1">Gotera</div>
</div>
</body>

Te queda una tabla tal cual.

willyfc · #5 (**permalink**) 23/04/2009, 10:43

eso mismo es lo que te puse en el ejemplo, si te fijas todos tus id's son exactamente iguales, entonces mejor creas una sola clase y la repites(como te mostré en el ejemplo), y con respecto al contenedor es mejor utilizar uno, así tienes más control sobre el contenido que quieres mostrar.

mira estos ejemplos de Mik:

ejemplo 1

ejemplo 2

Mikmoro · #6 (**permalink**) 23/04/2009, 10:48

No he seguido del todo la conversación, pero puestos a economizar código, si va a aparecer así, este es todavía más económico:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
<head>
<title></title>
<style type="text/css">
#contenedor{
position:relative;
margin:0px auto;
width:366px;
height:400px;
border:1px solid #000;
}
#contenedor div {
float:left;
width:120px;
border:1px solid #cca;
height:30px;
text-align:center;
}
</style>
</head>
<body>
<div id="contenedor">
<div>code</div>
<div>nombre</div>
<div>apellidos</div>
<div>1</div>
<div>Jorge</div>
<div>González</div>
<div>2</div>
<div>Pepe</div>
<div>Gotera</div>
</div>
</body>
</html>

(listo para coger y probar)

xurxinho · #7 (**permalink**) 23/04/2009, 10:54

Mikmoro muy bueno, gracias a ti voy mejorando

Mikmoro · #8 (**permalink**) 23/04/2009, 11:03

Cita:

Iniciado por xurxinho

Mikmoro muy bueno, gracias a ti voy mejorando

Espero no haberte molestado: no quería enmendarte, sino aportar una vuelta de tuerca más en la economización

colote · #9 (**permalink**) 23/04/2009, 11:03

Muchas Graciar por sus aportes, ya entendi la idea del contenedor, ahora bien...
los l1 a l8 los cree, porque no tengo todas las cajas del mismo tamaño, no quiere decir que yo tenga razon , por ahi tambien se puede simplificar.
Ahora veo de probar estos ejemplos que me dejaron!!!

Saludos, Ricardo !!!

pitufoweb · #10 (**permalink**) 23/04/2009, 13:26

Hola.

En tu caso lo mejor seria hacerlo con una tabla y seria mas accesible que con los div's (Claro, estructurándola correctamente)

Lo curioso es que algunos usan tablas cuando tendrían usar div's y otros usan div's cuando tendrían usar tablas

Saludos

colote · #11 (**permalink**) 24/04/2009, 06:02

jajajaja, es Correcto lo que me decis...
El tema es que tengo que mostrar una cantidad de datos, y hacer un salto de pagina, de esa manera con los divs lo puedo hacer, con la tabla se me complicaba, porque tenia que poner el salto dentro de la tabla, sino me mostraba todos los datos dentro de la tabla, y no me lo hacia como queria !!!!!
Gracias por tu comentario !!!

xurxinho · #12 (**permalink**) 24/04/2009, 07:30

en absoluto, lo digo en serio. Todo lo que voy aprendiendo por ahora en css es gracias a ti y a este foro ;)