Foros del Web » Creando para Internet » CSS »

Problemas al maquetar la página web con CSS

Estas en el tema de Problemas al maquetar la página web con CSS en el foro de CSS en Foros del Web. Hola a todos. Tengo el siguiente problema, me disculpan si el código CSS que voy a poner va encerrado dentro de otras etiquetas, pués aunque ...
  #1 (permalink)  
Antiguo 27/05/2009, 07:46
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Problemas al maquetar la página web con CSS

Hola a todos.
Tengo el siguiente problema, me disculpan si el código CSS que voy a poner va encerrado dentro de otras etiquetas, pués aunque ya llevo tiempo como miembro de forosdelweb, creo que es la primera vez que posteo un tema en esta categoría.
Estoy leyendo un manual, muy bueno por cierto, sobre las CSS, es un libro de Wrox titulado Accesible Xhtml and Css Web Sites Problem, Design and Solution.
Todos los ejercicios que vienen en el mismo los he ido desarrollando para que el aprendizaje sea más eficiente.
Reconozco que mucho de los ejercicios han sido probados usando Netscape Navigator y no el Internet Explorer, aunque el libro explica muy claramente cuales son las características de las Css que no funcionan o que no tienen implementación en determinados browser.
Pues bueno voy al grano, hay algo que me está dando un poco de trabajo entender, y es lo relacionado con los layouts para web usando dicha tecnología, especifícamente los <div>, hay un ejemplo en el libro de un layout con dos columnas, una barra de navegación a la izquierda y el contenido principal en otro <div> que se coloca a la derecha de este, por ejemplo es así:
[CSS]
div#navigation {
float:left;
width:200px;
height:100%;
color:#ffffff;
background-color:#666666;
border:1px solid #000000;
padding:5px;}

div#content {
margin-left:213px;
width:600px;
height:100%;
background-color:#ffffff;
border:1px solid #000000;
padding:5px;}

a:link, a:visited {color:#ffffff;}
a {display:block;}
[/CSS]
Según la imagen que viene en libro esto funciona perfectamente bien, repito en Netscape Navigator se ven los <div> uno al lado del otro. Ahora cuando he probado el ejemplo en Internet Explorer me sale el div con la barra de navegación a la izquierda y el otro div donde va el contenido principal en vez de estar al lado de este, aparece debajo a la derecha después de la esquina ingerior derecha del div donde esta la barra de navegación, es como si existiera algo arriba del mismo que impide que se coloque al lado a la derecha, es decir uno al lado del otro.
La máquina donde trabajo tiene instalado como SO Windows 2003 server con la versión 6.0.3790 del IE. Dónde está el error?.
Disculpen lo denso del mensaje.
Muchas Gracias.
  #2 (permalink)  
Antiguo 27/05/2009, 07:49
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problemas al maquetar la página web con CSS

Pues en que los divs por comportamiento nativo se sitúan siempre uno debajo del otro, con lo que a cada div le has de poner un float, al de la izquierda left y al de la derecha right
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 27/05/2009, 07:59
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Problemas al maquetar la página web con CSS

Gracias por tu respuesta.
Pues te diré que agregué el float: right al div donde va el contenido y nada sigue haciendo lo mismo.
Además de eso, me pregunto, con la propiedad margin-left: 213px no es suficiente, he entendido tu explicación, se que los block elements se colacan uno debajo del otro, pero bueno no funciona, y en libro de Wox no hace alusión a nada de eso, en la imagen se ve todo funcionando a la perfección, aunque acoto en la imagen se ve que es en el Netscape Navigator.
Qué crees que pueda ser?.
Gracias nuevamente.
  #4 (permalink)  
Antiguo 27/05/2009, 08:42
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.026
Antigüedad: 11 años, 5 meses
Puntos: 41
Respuesta: Problemas al maquetar la página web con CSS

Hola, para que los DIV se te coloquen uno al lado de otro los 2 DIVs deben tener float:left, ahora bien si quieres separar el DIV de la derecha al de la izquierda utilizas en el de la derecha margin-left:XXXpx esto es el empuje (margen) y lo que hace es alejarse del que esta pegado.

Un ejemplo facil:
.div1{
width:100px;
height:100px;
float:left;
background:#000;
}
.div2{
width:100px;
height:100px;
float:left;
background:#00a;
margin-left:20px;
}

Espero que te sirva...

SAludos, Jose
}
  #5 (permalink)  
Antiguo 27/05/2009, 09:41
 
Fecha de Ingreso: agosto-2005
Mensajes: 152
Antigüedad: 12 años, 3 meses
Puntos: 0
Respuesta: Problemas al maquetar la página web con CSS

Gracias Wasper por tu respuesta, pero no es necesario poner a los div la propiedad float, el problema estaba en el ancho de los div, pues reduje el ancho de los dos y todo queda perfectamente bien.
  #6 (permalink)  
Antiguo 27/05/2009, 12:13
Avatar de Wasper  
Fecha de Ingreso: julio-2006
Ubicación: de cai, picha!!!
Mensajes: 1.026
Antigüedad: 11 años, 5 meses
Puntos: 41
Respuesta: Problemas al maquetar la página web con CSS

Ok. ¿Para que resolucion estas trabajando?

Saludos, Jose
  #7 (permalink)  
Antiguo 27/05/2009, 15:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problemas al maquetar la página web con CSS

Hola:

El IE6 da muchos problemas con el CSS, algunas de las propiedades no las reconoce como debería, yo te aconsejaría que te bajaras el Firefox y fueras probando los ejemplos del libro con él.

El día que tengas que hacer una página web, hazla para Firefox y reajusta después lo que no funcione en IE.

Saludos.

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 21:45.