Mi DIV descolocado

Deiv · #1 (**permalink**) 14/01/2009, 07:47

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:

Deiv · #2 (**permalink**) 14/01/2009, 07:51

Aquí va el código CSS

Código PHP:

  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;           
}

Código 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

willyfc · #3 (**permalink**) 14/01/2009, 08:13

lo que pasa es que debes comenzar por una estructura y tu no la tienes. Esto debería para comenzar ir de esta manera:

Código:

body{ 
    font-family:Arial, Helvetica, sans-serif; 
    background: #E0D5B7 url(images/page_bg4.jpg) 0 0 repeat-x;     
}
#contenedor{width:95%; height:auto; margin:0 auto; display:table}
#col_izquierda{width:80%; height:auto;float:left;}
#col_derecha{width:15%; height:auto;float:right;}
.clear{clear:both}

Código HTML:

<div id="contenedor">
	<div id="col_izquierda">
		aqui van los contenidos de las noticias 
	</div>
	<div id="col_derecha">
		aqui van las imagenes o contenidos de la columna derecha
	</div>
	<div class="clear"></div>
</div>

sobre eso metes todos todos tus contenidos que en este caso son noticias a la izquierda e imagenes a la derecha, estoy poniendo las medidas que tu pusiste para el ancho total, ahora para meter tu contenido tienes que tener cuidado con las medidas del contenido para que no se deforme.

con respecto a la pregunta sobre id y clases, da igual cual quieras usar, en html no puedes declarar 2 veces un id y una clase puedes hacerlo las veces que quieras.

Deiv · #4 (**permalink**) 14/01/2009, 08:41

Gracias por responder,
Bueno eso solo era una idea para lanzar la pregunta, ya que en realidad dentro de la página irá mas compleja.
- Como dije en IE7 se ve bien, pero en Firefox se ve totalmente descolocado.
- En IE7 con la "estructura" que Yo puse se ve bien en Internet, pero al diseñar con DreamWeaver, también se ve descolocado, he ahí las dudas. Me incomoda un poco ver esta descolocación para el continuado del diseño con DreamWeaver.

No estoy probando aún tu consejo, ya que como voy novato en esto, lo analizaré en casa con calma para comentar luego (en este momento me encuentro en un Cyber)
Como mencioné el objetivo final es tener dos DIVs en un Contenedor, de los cuales el de la Izquierda quizá es el más "complejo" debe tener varios bloques: <div class="detallesizquierda"> iguales, ya que dentro de este existe un título encima, debajo: una imagen a la izquierda y texto a la derecha. Eso, un tanto extraño que en Firefox me muestre todo descolocado.
Gracias y seguiré al tanto de sugerencias, probaré mas adelante tu sugerencia.

willyfc · #5 (**permalink**) 14/01/2009, 08:52

si importar el contenido que vayas a tener debes partir por una estructura, no debes tener los divs flotando de esa manera por que es seguro que en algún navegador se tiene que deformar. tienes que decidir por eso para poder meter contenido

Deiv · #6 (**permalink**) 14/01/2009, 17:35

He probado la sugerencia, cambiando algunas cosas, ahora se ve bien en IE7, se ve bien en DreamWeaver.

Pero si prueban mi ejemplo, con todo lo corregido, no cambia nada en Firefox

, donde ve todo descolocado

¿A que se deberá todo ello?
El código corregido es el siguiente (pruebenlo por fa y coméntenme, si?);
CSS:

Código PHP:

  body{ 
    font-family:Arial, Helvetica, sans-serif; 
    background: #E0D5B7 url(images/page_bg4.jpg) 0 0 repeat-x;     
    font-family:Arial, Helvetica, sans-serif;  
    background: #E0D5B7 url(images/page_bg4.jpg) 0 0 repeat-x;      
} 
#contenedor{width:95%; height:auto; margin:0 auto; display:table} 
#col_izquierda{width:80%; height:auto;float:left;} 
#col_derecha{width:15%; height:auto;float:right;} 
.clear{clear:both}     
} 
 
#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;           
}

Código PHP:

  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="contenedor"> 
    <div id="col_izquierda"> 
         <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 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> <!--col_izquierda end -->  
     
    <div id="col_derecha"> 
      <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 class="clear"> 
    </div> 
</div>  <!--contenedor -->  
</body> 
</html>

Una ayudita para que se vea bien en los 3 (IE7, Firefox y dreamweaver) por fa?, esto mismo solo me faltaría en Firefox

willyfc · #7 (**permalink**) 14/01/2009, 18:58

mira ahora no pude ver bien tu código pero hice esto que según veo es parecido a lo que tienes miralo, espero te sirva:

Código:

body{ 
    font-family:Arial, Helvetica, sans-serif; 
    background: #E0D5B7 url(images/page_bg4.jpg) 0 0 repeat-x;     
}
h1{ font-size:2em; font-weight:bold; background-color:#11bbff; margin:0; padding:0;}
#contenedor{width:95%; height:100px; margin:0 auto; display:table;}
#col_izquierda{width:75%; height:auto; float:left;}
#col_derecha{width:22%; height:auto; float:right;}
.clear{clear:both}

/*		para los recuadros que usas			*/
.cont_noticia{ width:90%; border:1px solid #000; height:auto; display:table; margin:0 0 10px 0}
.cont_img{float:left; padding:3px; width:20%; height:100px; text-align:center; border:1px solid #000000}
.cont_texto{ float:right; padding:3px; width:76%; height:auto; background-color:#fff234}
/*		para los recuadros que usas			*/

.imgs{ width:156px; height:156px; background-color:#999999; margin:0 0 3px 0}

Código HTML:

<div id="contenedor">
	<div id="col_izquierda">
		<div class="cont_noticia">
			<h1>Titulo</h1>
			<div class="cont_img"><img name="" src="" width="102" height="100" alt="" style="background-color: #000; margin:5px 0 0 0" /></div>
			<div class="cont_texto">
				<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>
			<div class="clear"></div>
		</div>
		<div class="cont_noticia">
			<h1>Titulo</h1>
			<div class="cont_img"><img name="" src="" width="102" height="100" alt="" style="background-color: #000; margin:5px 0 0 0" /></div>
			<div class="cont_texto">
				<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>
			<div class="clear"></div>
		</div>
	</div>
	<div id="col_derecha">
		<div class="imgs"></div>
		<div class="imgs"></div>
		<div class="imgs"></div>
	</div>
</div>

pero por si acaso te digo lo que alcance a mirar de tu código, te falta cerrar un div, la clase clear va por fuera de los divs que flotan, en el ejmplo la utilizo 2 veces fijate donde los coloco

Deiv · #8 (**permalink**) 15/01/2009, 15:27

Gracias willyfc, Tu código funciona a la perfección en ambos Navegadores.
Me quedaron dos dudillas:
- Que es lo que hace <div class="clear"></div> ?? Ya que los borré y no veo cambio alguno, para nada.

- En..... #contenedor{width:95%; height:100px; margin:0 auto; display:table;}
Le diste un height de 100 px, en modo de diseño eso se ve un poco extraño, por ahí lei que se puede utilizar clear:both, o mejor overflow ya que el anterior deja un espacio vacío, ¿se puede aplicar eso para que en modo de siseño encajen todos?

- Lo propio, no conozco a... display:table; pero oí que no funcionan en IE6 e IE7, solo en el beta IE8, ¿que hace ese display?

- Veo que no recurriste a un DIV para el "Título", ¿no era necesario? ¿Por que?
Gracias por la ayuda, voy trabajando recién con esto de DIVs y CSS.

willyfc · #9 (**permalink**) 15/01/2009, 16:06

1.- el clear sirve para limpiar elementos flotantes, los declaras despues de flotar elementos

2.- lo de ese alto de 100px, es un error debería haber sido auto y para que se sobre un poco de espacio al final le das un padding-bottom:10px;

3.- el display:table hace que un div se comporte como una tabla, es de mucha utilidad si quieres que un fondo se repita, al menos en la técnica de columnas falsas.

4.- no es necesario utilizar divs para todos tienes un monton de selectores html para hacer esas cosas, y esa forma es una opción, ten en cuenta que todos los selectores html los puedes reseatear con su nombre el css y dales la forma o estilo que quieras.

Que bueno que te sirvió