Foros del Web » Creando para Internet » CSS »

Reemplazar tabla por css !!!

Estas en el tema de Reemplazar tabla por css !!! en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/04/2009, 11:06
Avatar de colote  
Fecha de Ingreso: julio-2008
Ubicación: Rosario - Santa Fe - Argentina
Mensajes: 729
Antigüedad: 9 años, 5 meses
Puntos: 8
Pregunta Reemplazar tabla por css !!!

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 !!!
__________________
Mail: [email protected]
  #2 (permalink)  
Antiguo 23/04/2009, 11:19
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Reemplazar tabla por css !!!

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <style type="text/css">
  6. .contenedor{ width:300px; height:auto; overflow:auto;}
  7. .campos{float:left; width:30px; height:20px; padding:0 10px;}
  8. </head>
  9.  
  10. <div class="contenedor">
  11.     <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>
  12. </div>
  13. </body>
  14. </html>
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 23/04/2009, 11:32
Avatar de colote  
Fecha de Ingreso: julio-2008
Ubicación: Rosario - Santa Fe - Argentina
Mensajes: 729
Antigüedad: 9 años, 5 meses
Puntos: 8
Respuesta: Reemplazar tabla por css !!!

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 !!!
__________________
Mail: [email protected]
  #4 (permalink)  
Antiguo 23/04/2009, 11:39
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: Reemplazar tabla por css !!!

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.
  #5 (permalink)  
Antiguo 23/04/2009, 11:43
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Reemplazar tabla por css !!!

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
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 23/04/2009, 11:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Reemplazar tabla por css !!!

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)
  #7 (permalink)  
Antiguo 23/04/2009, 11:54
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: Reemplazar tabla por css !!!

Mikmoro muy bueno, gracias a ti voy mejorando
  #8 (permalink)  
Antiguo 23/04/2009, 12:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Reemplazar tabla por css !!!

Cita:
Iniciado por xurxinho Ver Mensaje
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
  #9 (permalink)  
Antiguo 23/04/2009, 12:03
Avatar de colote  
Fecha de Ingreso: julio-2008
Ubicación: Rosario - Santa Fe - Argentina
Mensajes: 729
Antigüedad: 9 años, 5 meses
Puntos: 8
Respuesta: Reemplazar tabla por css !!!

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 !!!
__________________
Mail: [email protected]
  #10 (permalink)  
Antiguo 23/04/2009, 14:26
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Respuesta: Reemplazar tabla por css !!!

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
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #11 (permalink)  
Antiguo 24/04/2009, 07:02
Avatar de colote  
Fecha de Ingreso: julio-2008
Ubicación: Rosario - Santa Fe - Argentina
Mensajes: 729
Antigüedad: 9 años, 5 meses
Puntos: 8
Respuesta: Reemplazar tabla por css !!!

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 !!!
__________________
Mail: [email protected]
  #12 (permalink)  
Antiguo 24/04/2009, 08:30
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: Reemplazar tabla por css !!!

en absoluto, lo digo en serio. Todo lo que voy aprendiendo por ahora en css es gracias a ti y a este foro ;)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:15.