Foros del Web » Creando para Internet » CSS »

dos columnas

Estas en el tema de dos columnas en el foro de CSS en Foros del Web. Recien estoy dando mis primeros pasos en css y ya me trabe Divido la pagina en tres secciones, cabecera (en donde ira titulo, logo, etc), ...
  #1 (permalink)  
Antiguo 16/03/2005, 04:03
 
Fecha de Ingreso: septiembre-2003
Ubicación: Buenos Aires, Argentina
Mensajes: 92
Antigüedad: 14 años, 2 meses
Puntos: 1
dos columnas

Recien estoy dando mis primeros pasos en css y ya me trabe

Divido la pagina en tres secciones, cabecera (en donde ira titulo, logo, etc),
izquierda (menu) y centro. ¿ el texto del centro no empieza a la misma altura que el menu ? ¿ porque ? ¿ que estoy haciendo mal ?

Doy tanto el codigo de la pagina como el de css:

<!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>
<link href="nuev.css" rel="stylesheet" type="text/css" />
</head>
<div id="cabecera"></div>
<h1> TITULO </h1>
<body>
<div "izquierdo" ></div>
<ul> AAAA</ul>
<ul> BBBBBB</ul>
<ul> CCCCCC</ul>
<ul> DDDDDD</ul>
<ul> EEEEEEEEEEEEE</ul>
<div id="centro" >HFKDHFKDFNNCVLSKFN;LDNCLSDANLKNF;LDCNKLSDNFDKNFLD NCADMNMNFLDKJNF;KJNF;KSANF;KSNDFL;KSNSDN;SDF </div>
<div id="centro" >LDHFLDKHFLKDHNFLKDNFLKDHFLDAHFLSNV,MDNSFLJKSNFLJS DFNJLSDNGLJKSHGLJKSHGLKJSHGLKJSFHDGKLSFHGLKSHF. </div>
<div id="centro" >HHNVLSKHGLKSAFHGLKSFHGLKSFHGLKSFHGLKSFHGLKSFNVLKX CNVLKJFSNGKLJFNLJXFNBJFHSGLJHFLJGFLJHFLJHNLJ. </div>
<div id="centro" >LHCLKVSLGDHFLKFSHGLFSHLGLAJKGLSFHGLSFHGLSHFGLKSHL KGHLKSFGLKSDGLKNLKSNGLKSNLKSNGLKSHLKSLKHLGKHLKLKSV HLSN </div>
<div id="centro" >JHDCKL;SKGFL;KSHGLKSFDHGLKSFHKLGHCXZKGHSLFKJHGSLK HGLSFHGLKSFHGLKZCN.NZCNSL;KNGLSZNLSKNGL;KN;LKSN;LK SNLK. </div>
</body>
</html>

y ahoa el archivo css:

body {
margin: 0px;
padding: 0px;
}

#contenedor {
position:relative;
width:600px;
margin:auto;
}

#izquierda {
width: 190px;
position: absolute;
top:0px;
left:0px;
}
#centro {
width: 560px;
margin-left: 400px;
margin-right: 210;
}
__________________
RIVER
  #2 (permalink)  
Antiguo 16/03/2005, 08:56
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
http://css-discuss.incutio.com/?page=TwoColumnLayouts
  #3 (permalink)  
Antiguo 16/03/2005, 09:09
 
Fecha de Ingreso: septiembre-2003
Ubicación: Buenos Aires, Argentina
Mensajes: 92
Antigüedad: 14 años, 2 meses
Puntos: 1
Posavasos, vi el url que señalas. Yo no quiero simplemente copiar codigo y usarlo, quiero poder comprenderlo. ¿ podrias señalarme simplemente cual es el error en el codigo que puse ? creo que es la mejor manera de aprender.

Muchas gracias,
  #4 (permalink)  
Antiguo 16/03/2005, 09:25
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
No se trata de copiar, se trata de ver cómo funcionan, entenderlos y ver las diferencias que hay con tu código (bueno, quien quiera que copie directamente xD).

Para empezar empezaría con una estructura así:
Código HTML:
<body>
<div id="cabecera">
<h1>Título</h1>
</div>
<div "izquierdo">
<ul>
<li>Aaaaa</li>
<li>Bbbbb</li>
<li>Cccccc</li>
<li>Ddddd</li>
<li>Eeeee</li>
</ul>
</div>
<div id="centro">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam bibendum porta erat. Integer iaculis, odio eu euismod bibendum, risus mi aliquam dolor, sed sodales elit urna et orci. Nulla facilisi. Etiam sollicitudin gravida pede. Phasellus ligula. Vestibulum diam. Mauris luctus congue lectus.</p>
<p>Pellentesque eu elit. Integer luctus volutpat ante. Donec dolor augue, facilisis ut, fermentum nec, tincidunt at, metus. Praesent risus libero, gravida vel, venenatis sed, pretium vel, metus. Fusce lobortis. Aenean mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus gravida risus sit amet turpis. Vivamus ut enim. Quisque ante. Nunc bibendum luctus odio.</p>
</div>
</body> 
¿Por qué? Pues porque un id no se puede repetir (como id centro en tu código), porque las listas están mal marcadas y porque los div con el id "cabecera" e "izquierdo" no contienen nada. A partir de ahí empieza a jugar con CSS de nuevo a ver qué te sale.
  #5 (permalink)  
Antiguo 16/03/2005, 15:33
 
Fecha de Ingreso: septiembre-2003
Ubicación: Buenos Aires, Argentina
Mensajes: 92
Antigüedad: 14 años, 2 meses
Puntos: 1
Muchas gracias Posavasos
__________________
RIVER
  #6 (permalink)  
Antiguo 16/03/2005, 16:21
 
Fecha de Ingreso: septiembre-2003
Ubicación: Buenos Aires, Argentina
Mensajes: 92
Antigüedad: 14 años, 2 meses
Puntos: 1
Posavos, una ultima pregunta. A partir de tus comentarios entendi mas como funcionan los div y id. Jugue como me dijiste, y pude ordenar las columnas como deseo, sin embargo el problema que no se solucionar es:
El contenido de "centro" se visualiza a partir de la ultima linea escrita en "izquierdo", ¿ que parametros debo darle a "centro" en el archivo css para que empieza en la misma linea escrita en el div "izquierdo" (que es donde ira el menu) Use padding-top : 0px; pensando que asi lo pone justo abajo del header y no fue asi.

Espero tu respuesta, y desde ya te agradezco por tu paciencia para estas preguntas de un novato.
  #7 (permalink)  
Antiguo 17/03/2005, 18:03
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
Cita:
Iniciado por river
El contenido de "centro" se visualiza a partir de la ultima linea escrita en "izquierdo", ¿ que parametros debo darle a "centro" en el archivo css para que empieza en la misma linea escrita en el div "izquierdo" (que es donde ira el menu) Use padding-top : 0px; pensando que asi lo pone justo abajo del header y no fue asi.
Ups, perdón por no contestar antes. ¿Podrías poner el código (X)HTML y CSS actual que te da el problema? para poder ver qué hace exactamente y poder jugar yo con el EditCSS xD
  #8 (permalink)  
Antiguo 18/03/2005, 15:47
 
Fecha de Ingreso: septiembre-2003
Ubicación: Buenos Aires, Argentina
Mensajes: 92
Antigüedad: 14 años, 2 meses
Puntos: 1
Hola de nuevo Posavasos!

Creo que ya lo solucine, esto es la "maquetacion" que pude hacer hasta ahora con lo que aprendi en el foro: http://www.hierrostorrent.com.ar/Prueba/torrent02.htm

Coloco el codigo css para que me digas si hay algun error hasta ahora, creo que en "header" no me reconoce la instruccion border-syle:solid ¿ porque ?

Lo que estoy intentando es pasar el sitio www.hierrostorrent.com.ar enteramente a css, considero que una vez que tenga armada la pagina inicial con el menu, titulos y demas, todo lo demas me sera mas sencillo.

Aqui el css:
/* CSS Document */

body{
padding :0;
margin :0;
background-image: url(images/bg.gif);
background-repeat: repeat-x;

}

#header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
height:33px;
border-syle:solid;
border-color:black;
border-width:1px 0px;
line-height:11 px;
background-color:#eee;
background-color: #E8EAEA;
}

#contenido{
padding-top : 0px;
padding-bottom : 30px;
padding-left : 230px;
padding-right : 40%;
}

#contenido h1 {
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: normal;
color: #000000;
background-color : transparent;
}

#contenido h2 {
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 100%;
font-weight: bold;
color: #000000;
background-color : transparent;
}

#contenido p{
font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-size: 80%;
font-weight: normal;
color: #000000;
background-color : transparent;
line-height : 140%;
}

#logo{
position : absolute;
top : 30px;
left : 30px;
z-index : 50;
background-color: #ECE9D8;
}
#menu{
position: absolute;
top : auto;
left : 60px;
width : 140px;

}

#menu a{display: block;
width: 155px;
text-align: left;
text-decoration: none;
font-family:bold;
font-size:12px;
color: #000000;
BORDER: none;
border: solid 0px #000000;

}

#menu a:hover {
FONT-SIZE: 12px; COLOR: #44370f; FONT-FAMILY: bold; TEXT-DECORATION: none
border: solid 1px #6100C1;
background-color:#F7ECEA;
}


Desde ya, muchas gracias ª
  #9 (permalink)  
Antiguo 18/03/2005, 15:49
 
Fecha de Ingreso: septiembre-2003
Ubicación: Buenos Aires, Argentina
Mensajes: 92
Antigüedad: 14 años, 2 meses
Puntos: 1
Me acabo de dar cuenta que style estaba mal escrito.........ahora me funciona..
__________________
RIVER
  #10 (permalink)  
Antiguo 18/03/2005, 17:42
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
Ya que ya has solucionado el problema te comento un par de cosillas si no te importa:

El logo en Firefox sale mal, si quitas "height:33px;" del #header se visualiza correctamente.

"FONT-FAMILY: bold;" sería "font-weight:bold;" ¿no?

Si quieres utilizar estas fuentes (font-family: Arial, Helvetica, sans-serif;) en toda la página, mejor que lo apliques en el body y así no tienes que repetir en cada estilo lo mismo.

En el código XHTML, al final del texto te sobra un </p>

Después del "text-decoration:none" de #menu a:hover te falta su respectivo ";", sin el no se aplica el border y background-color que defines después.

Se podría optimizar alguna cosilla con el método corto, por ejemplo #000000 por #000 o los padding del #contenido

Los "0px" se podrían (¿deberían?) substituir por "0", creo que 0 no tiene que llevar unidad de medida (o almenos no tiene por qué)
  #11 (permalink)  
Antiguo 19/03/2005, 04:53
 
Fecha de Ingreso: septiembre-2003
Ubicación: Buenos Aires, Argentina
Mensajes: 92
Antigüedad: 14 años, 2 meses
Puntos: 1
Gracias por todos los comentarios, ya mismo arreglo todo lo que me señalaste.
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 07:48.