Foros del Web » Creando para Internet » CSS »

realice un procedimiento errado

Estas en el tema de realice un procedimiento errado en el foro de CSS en Foros del Web. trato de hacer una pagina con el texto en tres columnas y buscando encontre un codigo css que al provarlo funciona : http://img854.imageshack.us/i/fotodepaginatrescolumna.jpg/ el codigo ...
  #1 (permalink)  
Antiguo 01/04/2011, 13:39
 
Fecha de Ingreso: julio-2010
Mensajes: 33
Antigüedad: 7 años, 4 meses
Puntos: 0
realice un procedimiento errado

trato de hacer una pagina con el texto en tres columnas y buscando encontre un codigo css que al provarlo funciona :
http://img854.imageshack.us/i/fotodepaginatrescolumna.jpg/
el codigo es este:

<html>
<head>
<title>columnas con div</title>
</head>
<body>

<h1> columnas con div</h1>
<div style="text-align:center;margin:0 auto;width:150%;">

<div style="width: 20%; float: left;margin:0px 15px 0px 15px;text-align:justify;">texto
<img src="piedra.jpg" width="700" style="margin: 5px 0px 5px 5px;float: left; " /></div>

<div style="width: 20%; float: left;margin:0px 50px 0px -300px;text-align:justify;">texto</div>

<div style="width: 20%; float: left;margin:0px 0px 0px 0px;text-align:justify;">texto </div>

<div style="clear: both;"/>
</div>

</body>
</html>

Entiendo q para ahorrar codigo ,css, permite poner todo el codigo en un archivo aparte y trate de convertir el anterior codigo css(<div style="width:....) de manera que pueda escribirse entre los heads y de funcionar, es facil llevar ese codigo css a un archivo de estencion .css .A continuacion lo que hice:


<html>
<head>
<title>columnas con div</title>
<style>
#style
{
text-align:center;margin:0 auto;width:150%;
}
#col 1
{
width: 20%; float: left;margin:0px 15px 0px 15px;text-align:justify;
}
#col 2
{
width: 20%; float: left;margin:0px 50px 0px -300px;text-align:justify;
}
#col 3
{
width: 20%; float: left;margin:0px 0px 0px 0px;text-align:justify;
}
#style both
{
clear: both;
}
</style>
</head>
<body>

<h1> columnas con div</h1>
<div id="style">
<div id="col 1">texto</div>
<div id="col 2">texto</div>
<div id="col 3">texto</div>
<div id="style both"></div>
</div>

</body>
</html>

actualizando:
http://img192.imageshack.us/i/fotodepaginatrescolumna.jpg/
podrian por favor ver si me equivoque de plano o si hay detalles en los que me equivoque .Saludos a todos.

Última edición por raulrivero; 01/04/2011 a las 14:07 Razón: los enlaces no salen azules
  #2 (permalink)  
Antiguo 01/04/2011, 15:54
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 7 años, 6 meses
Puntos: 63
Respuesta: realice un procedimiento errado

En un id se dejan espacios, id="col 1" MAL, id="col1" BIEN, además si quieres reducir código puedes intentar unir selectores que comparten propiedades:

Código CSS:
Ver original
  1. #style
  2. {
  3. text-align:center;margin:0 auto;width:150%;
  4. }
  5.  
  6. #col1, #col2, #col3 {
  7.     width: 20%; float: left;text-align:justify;
  8. }
  9.  
  10. #col1
  11. {
  12. margin:0px 15px 0px 15px;
  13. }
  14. #col2
  15. {
  16. margin:0px 50px 0px -300px;
  17. }
  18. #col3
  19. {
  20. margin:0px 0px 0px 0px;
  21. }
  22. #styleboth
  23. {
  24. clear: both;
  25. }

SALUDOS
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.

Etiquetas: procedimiento
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 02:30.