Efecto raro en los DIV

JimmyBrain · #1 (**permalink**) 26/11/2014, 18:01

Hola tengo un problema con el siguiente codigo :

El HTML

Código HTML:

Ver original<!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=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<center>
      <div class="container">
        <div class="banner">
          <p><img src="logo.png" width="507" height="100" /></p>
        </div>
        <div class="box">
          <div class="menu">
<div class="categorias">
<h3>Categorias</h3>
<div class="categorias_body">
  Link1<br />
  Link2<br />
  Link3<br />
  Link4<br />
  Link5<br />
  Link6<br />
  Link7<br />
  Link8<br />
  Link9<br />
  Link10<br />
  </div>
</div>
          </div>
          
     
<div class="body">
 
<div class="post">
<h3>Noticia1</h3>
<div class="post_body">
  <p>Contenido de Noticia1</p>
  </div>
</div>
 
<div class="post">
<h3>Noticia2</h3>
<div class="post_body">
  <p>Contenido de Noticia2</p>
  </div>
</div>
 
<div class="post">
<h3>Noticia3</h3>
<div class="post_body">
  <p>Contenido de Noticia3</p>
  </div>
</div>
 
<div class="post">
<h3>Noticia4</h3>
<div class="post_body">
  <p>Contenido de Noticia4</p>
  </div>
</div>
 
<div class="post">
<h3>Noticia5</h3>
<div class="post_body">
  <p>Contenido de Noticia5</p>
  </div>
</div>
 
</div>
 
 
          <div class="otromenu">
<div class="categorias">
<h3>Afiliados</h3>
<div class="categorias_body">
  Link1<br />
  Link2<br />
  Link3<br />
  Link4<br />
  Link5<br />
  Link6<br />
  Link7<br />
  Link8<br />
  Link9<br />
  Link10<br />
  </div>
</div>
          </div>
        </div>
        <div class="footer">
          <p><img src="logo.png" width="507" height="100" /></p>
        </div>
  </div>
</center>
</body>
</html>

El CSS

Código:

body {
background:transparent url(fondo.jpg) repeat scroll 0 0;
color:gray;
font-family:helvetica,arial,sans-serif;
font-size:14px;
text-align:center;
}

.container {
	height: 768px;
	width: 1050px;
}
.banner {
	min-height: 100px;
	float: left;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.box {
	float: left;
	min-height: 500px;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.menu {
	float: left;
	min-height: 500px;
	width: 200px;
	margin-top: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
	margin-left: 3px;

}

.body {
	float: left;
	min-height: 500px;
	width: 600px;
	margin: 3px;
}
.otromenu {
	float: left;
	min-height: 500px;
	width: 200px;
	margin: 3px;
}

.footer {
	float: left;
	min-height: 100px;
	width: 1024px;
	background-color:#000;
	border: solid #222 2px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	margin: 3px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;

}

.categorias {
color:gray;
margin-bottom:10px;
width:200px;
word-wrap: break-word;

}

.categorias h3 {
color:orange;
background:#0F0F0F;
border-width: 1px;
border-style:solid;
border-color:333333; 
padding:5px 10px;

}

.categorias_body {
margin:-20px 0 0 0;
color:white;
background:black;
line-height:19px;
padding:5px 10px;
border-width: 1px;
border-style:solid;
border-color:333333;

}

.post {
color:gray;
margin-bottom:10px;
width:600px;
word-wrap: break-word;

}

.post h3 {
color:orange;
background:#0F0F0F;
border-width: 1px;
border-style:solid;
border-color:333333; 
padding:5px 10px;

}

.post_body {
margin:-20px 0 0 0;
color:white;
background:black;
line-height:19px;
padding:5px 10px;
border-width: 1px;
border-style:solid;
border-color:333333;

}

Cuando la cargo la primera vez en firefox se ve asi :

Pero cuando lo cargo como 3 veces seguidas se ve bien :

El tema es que en crome y IE se ve mal como siempre pero en firefox despues de 3 veces se mal , mi idea es que se vea como en la primer imagen.

¿ Como soluciono esto ?

waltersele · #2 (**permalink**) 28/11/2014, 21:25

No creo que debas culpar a I.E de que tu código se vea mal... .

Lo que dices de que se ve bien a la tercera vez que refrescas debe ser problema del caché del navegador.

Deberías leerte algún buen manual de html y no dejar de practicar.

Y un par de consejos viendo tu código,

-Nunca hagas una lista de elementos con saltos de linea<br>, utiliza <ul><li></li></ul>

-La maquetación de elementos con float no es una buena practica.

-En vez de poner 4 paddings puedes ponerlo así padding:1px 2px 1px 2px;

un saludo

pzin · #3 (**permalink**) 28/11/2014, 23:36

Cita:

Iniciado por waltersele

-La maquetación de elementos con float no es una buena practica.

¿Y eso? ¿Desde cuándo y por qué?

waltersele · #4 (**permalink**) 29/11/2014, 07:25

La maquetación de una pagina completa con float no es una buena practica, pese a que son muy utilizados frecuentemente, float no está hecho para esa función.

Cuidado, no digo que a veces no sea bueno utilizarlos,pero para este layout.. tienes varias posibilidades mejores,en este en concreto yo utilizaría display flex pues te brinda muchisimas más posibilidades y el diseño que realizas es mucho más versatil y flexible.

te he hecho un codepen ilustrativo para que veas de que hablo, explcame¿como harías eso con floats y con tan poco código?

http://codepen.io/anon/pen/WbQNMJ

Aquí te dejo una demo de cuál sería el cometido real de los floats

http://codepen.io/anon/pen/GgpRXv

Si no estás de acuerdo me encantaría seguir discutiendolo, un saludo!

pzin · #5 (**permalink**) 29/11/2014, 09:48

No me has respondido. Simplemente preguntaba porqué dices que es una mala práctica.

waltersele · #6 (**permalink**) 29/11/2014, 10:12

Cita:

Iniciado por pzin

No me has respondido. Simplemente preguntaba porqué dices que es una mala práctica.

No he dicho que sea una mala práctica, si no que no es buena, y arriba te expliqué por qué, una web completa hecha con float es mucho menos versatil, y en estos tiempos que corren, con la cantidad de resoluciones que hay... mejor que sea así,y ahorrando muuchas lineas de codigo..

¿Con esto te respondo?

alzacon · #7 (**permalink**) 29/11/2014, 11:04

waltersele, creo que estás "mezclando la velocidad con el tocino". Que no te parezca mejor opción no indica que no sea buena práctica. Que sea más versatil no significa que sea la mejor opción, muchas veces no es necesario matar moscas a cañonazos. Y lo de muchas lineas de código, perdón por decir lo siguiente, no te lo crees ni tú; tan secillo como crear una clase y añadirla luego al html, "millones" de lineas ahorradas.

Código CSS:

Ver original.floatleft{float: left;}

Aún no has dicho el porqué y desde cuando no es buena práctica. Has dado info de para que sirven y dicho que es más versátil usar flex.

PD: Cuando se dice que algo "no es bueno", normalmente se entiende por "es malo".

waltersele · #8 (**permalink**) 29/11/2014, 13:00

Cita:

Iniciado por alzacon

waltersele, creo que estás "mezclando la velocidad con el tocino". Que no te parezca mejor opción no indica que no sea buena práctica. Que sea más versatil no significa que sea la mejor opción, muchas veces no es necesario matar moscas a cañonazos. Y lo de muchas lineas de código, perdón por decir lo siguiente, no te lo crees ni tú; tan secillo como crear una clase y añadirla luego al html, "millones" de lineas ahorradas.

Código CSS:

Ver original.floatleft{float: left;}

Aún no has dicho el porqué y desde cuando no es buena práctica. Has dado info de para que sirven y dicho que es más versátil usar flex.

PD: Cuando se dice que algo "no es bueno", normalmente se entiende por "es malo".

No creo que deba escribir lo mismo otra vez vaya a solucionar nada.. pero fijate donde digo...

Cuidado, no digo que a veces no sea bueno utilizarlos,pero para este layout.. tienes varias posibilidades mejores,en este en concreto yo utilizaría display flex pues te brinda muchisimas más posibilidades y el diseño que realizas es mucho más versatil y flexible.

Si no me lo creo ni yo... crea este codepen con floats,y comprobamos, es muy similar al compartido por el compañero.

http://codepen.io/anon/pen/dPYPjm

Ten en cuenta que debería de verse lo mejor posible en cuantos más dispositivos mejor y que las cajas deben estar a la misma altura y evidentemente, el texto no debe salirse de la caja.

A ver quien confunde la velocidad con el tocino... y a ver es el que va pegando cañonazos para pintar un simple layout. Si me lo haces sin definir alturas y sin media queries te invito a una caña vale?

Copia mi HTML y dale caña. Espero tu respuesta!

Y aquí os dejo un par de artículos de editores reconocidos que pueden corroborar mi respuesta y nombran varias pegas a los floats =)

En el primero, si bajas un poco pone... A BETTER ALTERNATIVE

http://www.webdesignerdepot.com/2014...ut-css-floats/

http://designshack.net/articles/css/...of-css-layout/

pzin · #9 (**permalink**) 29/11/2014, 14:18

Cita:

Iniciado por waltersele

No he dicho que sea una mala práctica, si no que no es buena

Si no es buena, es mala. ¿Qué queda si no?

Cita:

Iniciado por waltersele

y arriba te expliqué por qué, una web completa hecha con float es mucho menos versatil, y en estos tiempos que corren, con la cantidad de resoluciones que hay... mejor que sea así,y ahorrando muuchas lineas de codigo..

Los tiempos que corren son los tiempos en los que flexbox sigue siendo un borrador. Ya hace un par de años cambiaron la sintaxis del módulo y dejó a algunos navegadores con el culo al aire.

Cita:

Iniciado por waltersele

¿Con esto te respondo?

Sí y no. O sea, después de todo, no es una mala práctica sólo que querías compararlo con flexbox y decir que es mejor. ¡Como para ser peor si es algo nuevo!

Cita:

Iniciado por waltersele

Si me lo haces sin definir alturas y sin media queries te invito a una caña vale?

Pero es que lo de las alturas lo añades por añadir. No veo que en el layout que se ha puesto al principio del hilo todo tenga la misma altura. ¿Ves que no tiene sentido decir aquí que es mejor o peor una cosa que la otra?

Volviendo al tema. @JimmyBrain a mi se me ve bien en Firefox y Chrome desde OSX: http://jsfiddle.net/je2wmyha
IE no puedo usarlo.

Tal vez sea alguna historia de la caché, algún plugin que tengas instalado o vete a saber qué.

waltersele · #10 (**permalink**) 29/11/2014, 14:42

Respondo con lo que dicen en webdesigner depot..

Even when used correctly, floats change the normal flow of a document which can cause unexpected behavior and limit styling options. Since a float is not in the ‘normal flow’, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. With responsive design, where sizes are dynamic and flowing to fill up available space, this is far from ideal. What if there was a better way?

Flexbox is the exciting future of web layouts but, for those of us that must support legacy browsers, this is still a far-off dream. The display property, on the other hand, has full support and can provide almost all the layout functionality of a float without the drawbacks.

Aunque se usen correctamente, floats cambian el comportamiento normal de un documento...porque puede causa comportamientos inesperados y limitaciones en el diseño.

Para acabar tanto debate..¿ Cual será mejor práctica ?

pzin · #11 (**permalink**) 29/11/2014, 15:49

Lo que no puedes hacer en un debate es contestar lo que te da la gana por tu cuenta como si hablaras tú solo. Nadie ha dicho que flexbox sea malo. Simplemente fuiste tú el que ha dicho que es un mala práctica el uso de float —o no buena, que el resto de mortales entendemos como mala. De flexbox estás hablando tú sólo.

No hay debate acerca de flexbox, ni de acerca qué es mejor o peor. Simplemente has dicho una cosa que no sabes defender y ya está.

Por otro lado, argumentar mediante lo que dicen otros, me parece simplemente vomitar sin control lo que otros mastican. Luego llegan aquí gente diciendo cosas como esas o que hay que usar inline-block y demás historias… Y cuando preguntas el porqué, tiran de enlaces que ni ellos comprenden y te dicen cosas tan ambiguas como «cambian el comportamiento del documento».

En fin. Es obvio que no tienes ni idea del porqué de las cosas, o no sabes o no quieres explicarlo. Pero si dices que algo es una mala práctica —o no buena, que vuelvo a decir que es lo mismo— deberías al menos tener el detalle, creo yo, de explicarlo.

waltersele · #12 (**permalink**) 29/11/2014, 16:28

Me dices que no te he contestado y te lo he puesto en la primera contestación.

Float tiene otra función, no es maquetar una web completa a base de ellos. si @JimmyBrain quiere maquetar algo, le digo que lo haga con algo que tiene como función ese cometido.

Si no entiendes el inglés me lo dices y te lo traduzco, pero no digas que no entiendo los enlaces que te comparto, porque me documento y me baso en ello para sacar mis propias conclusiones, y además me parece faltarme al respeto.

Yo te he expresado mi punto de vista y he tratado de ayudar a alguien, si te ofende mi punto de vista y siempre con buen rollo,, quizá este no sea el foro adecuado donde ayudar!

alzacon · #13 (**permalink**) 30/11/2014, 08:26

Creo que te has enrocado en tú argumento y no estás terminando de ver lo que se te comenta.

No puedes decir que es un ejemplo muy similar cuando el único parecido es tener 3 bloques uno al lado del otro, mientras que no tienen ni la misma altura ni la misma anchura.