Hola Amigos!
Nuevamente por acá y con preguntas que quizá Uds. ya tropezaron y pasaron los mismos para que hoy puedan orientarme, por favor.
Estoy empezando con el diseño de Capas y maqueteado con CSS, ya que necesito transformar mi Web hecha en Tablas a DIVs.
Como voy novato en esto de los bloques, no se extrañen si ven algunos ids o class en el CSS que empiezan con "#" u otros con "." (es otra duda que tengo, no se cuando utilizar uno y otro).
Disculpen el envío del código largo que adjunto, pero no hay otra forma de que se me entienda, mis preguntas están al finalizar el código:
CSS:
body{
font-family:Arial, Helvetica, sans-serif;
background: #E0D5B7 url(images/page_bg4.jpg) 0 0 repeat-x;
}
#detalles{
float:left;
width:95%;
height:740px;
}
.detallesizquierda{
clear : both; /*Sin esto se descoloca en IE*/
color: #5d5d5d;
float:left;
width:80%;
}
.noticias{
width:97%;
height: auto;
}
.titulo{
background: #1bf;
font-size: 12px;
height: 40px;
}
#personales{
width:auto;
height: 140px;
}
.imagen{
background: #fff;
float:left;
width:92px;
height: 99px;
}
.textonoticia{
background: #fff234;
float:right;
width:auto;
color:#000000;
height:auto;
}
.detallesderecha{
background: #1ff234;
float:right;
width:170px;
}
HTML:
<!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>Sitio - Prueba</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="detalles">
<div class="detallesizquierda">
<div class="noticias">
<div class="titulo">
<h1>Titulo</h1>
</div> <!--titulo end -->
<div id="personales">
<div class="imagen">
<img src="0.gif" alt="Pic 0" >
</div> <!--imagen end -->
<div class="textonoticia"> <!--noticia start -->
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div> <!--textonoticia end -->
</div> <!--personales end -->
</div> <!--noticias end -->
</div> <!--detallesizquierda end -->
<div class="detallesizquierda">
<div class="noticias">
<div class="titulo">
<h1>Titulo</h1>
</div> <!--titulo end -->
<div id="personales">
<div class="imagen">
<img src="0.gif" alt="Pic 0" >
</div> <!--imagen end -->
<div class="textonoticia"> <!--noticia start -->
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div> <!--textonoticia end -->
</div> <!--personales end -->
</div> <!--noticias end -->
</div> <!--detallesizquierda end -->
<div class="detallesderecha">
<IMG height=160 width=160 src="images/1.gif" alt="Pic 1" border=1/>
<IMG height=160 width=160 src="images/1.gif" alt="Pic 2" border=1/>
<IMG height=160 width=160 src="images/1.gif" alt="Pic 3" border=1/>
</div> <!--detallesderecha end -->
</div> <!--detalles end -->
</body>
</html>
Mis preguntas:
- Si bien en IE7 se ve como Yo quiero (o sea está perfecto) pero en el DISEÑO con DreamWeaver APARECE DESOLOCADO la columna de la derecha. Quizás me digan: lo importante es el resultado de como se ve la página en Internet, bien, pero como estoy empezando con el diseño de capas (DIVs) este efecto de descolocación me hace confundir si voy a continuar diseñando colocando otros elementos dentro de la página mía.
¿Qué hacer para que no se vea descolocado en el DISEÑO?Todo lo anterior mencionado ocurre cuando agrego otro idéntico <div class="detallesizquierda"> (copia) con todo su contenido, ya que con una sola (sin copias) me muestra muy bien las flotaciones.
- Con relación a la anterior pregunta hice correr el código en FIREFOX y con sorpresa pude observar que todos los elementos se descolocan y la columna de la derecha casi ni la veo. Mi objetivo final es COPIAR varios bloques de <div class="detallesizquierda"> con todo su contenido en la izquierda y en la parte de la derecha exista otro bloque de gráficos.
¿Cómo solucionar este código para que se vean normal en IE7 y FireFox?Saludos
