[SOLUCIONADO] ¿Pude haber DIV's de diferentes tamaños?

fpalomar · #1 (**permalink**) 18/02/2013, 13:05

Hola,

Estoy cambiando al uso de DIV's en lugar de tablas y ando un poco perdido. He estado haciendo pruebas, pero creo que no sé si lo que quiero hacer se puede.

En la imágen se ve la maqueta de lo que quiero hacer:

He segido el orden que se puede ver en las cajas, es decir 1, 2 y al llegar a la
caja 3 el tamaño de las cajas 1 y 2 me cambia, la altura pasa a ser la misma que
la de la caja 3 o bien se ponen todas las cajas en linea.

El código la hoja de estilo es el siguiente:

Código:

body {
	width: 775px;
	height: 575px;
	
	margin-left : auto;
	margin-right : auto;
	padding : 0px;
		
	border-width: 1px;
	border-style: solid;
	border-color: #172983;

}
#logo {
	width: 114px;
	height: 86px;
	border-width: 1px;
	border-style: solid;
	border-color: red;
	text-align:center;	
	display:table-cell;
	vertical-align: middle;

}	
#texto {
	width: 454px;
	height: 86px;
	margin-left: 115px;
	border-width: 1px;
	border-style: solid;
	border-color: red;
	text-align:center;	
	display:table-cell;
	vertical-align: middle;
}

#modelo {
	width: 209px;
	height: 284px;
	margin-top: 1px;
	margin-left: 595px;
	border-width: 1px;
	border-style: solid;
	border-color: red;
	text-align:center;	
	display:table-cell;
	vertical-align: middle;
}
#menu {
	width: 454px;
	height: 86px;
	margin-top: 87px;
	margin-left: 1px;
	border-width: 1px;
	border-style: solid;
	border-color: red;
	text-align:center;	
	display:table-cell;
	vertical-align: middle;
}

¿Me pueden orientar un poco?

Saludos.

pzin · #2 (**permalink**) 18/02/2013, 15:49

Crea un elemento contenedor para las cajas 1, 2, 4 y 5, luego ese mismo elemento y la caja 5 las flotas. Después las cajas 1 y 2 para que estén una al lado de la otra, también las flotas.

fpalomar · #3 (**permalink**) 19/02/2013, 13:14

Hola,

Más o menos he conseguido algo, pero no está al 100% de como he hecho la maqueta en el Photoshop.

Imagen de maqueta en Photoshop:

Imagen de la Web:

El código es el siguiente, no se dónde fallo, como se ve en la imagen de la web aparece una línea de más en la imagen y no centra el texto aunque no está mal esto del CSS.

Código:

body {
	width: 775px;
	height: 575px;
	
	margin-left : auto;
	margin-right : auto;
	padding : 0px;
		
	border-width: 2px;
	border-style: solid;
	border-color: #172983;

}
#logo {
	width: 114px;
	height: 86px;
	position: absolute;
	text-align:center;	
	display:table-cell;
	vertical-align: middle;
	/* border-width: 1px; 
	border-style: solid;
	border-color: red;*/
	
	
}	
#texto {
	width: 454px;
	height: 86px;
	margin-left: 114px;
	/* border-width: 1px; 
	border-style: solid;
	border-color: red;*/
	text-align:center;	
	display:table-cell;
	vertical-align: middle;
	position: absolute;
}

#modelo {
	width: 209px;
	height: 284px;
	margin-top: 2px;
	margin-left: 566px;
	/* border-width: 1px;
	border-style: solid;
	border-color: red;*/
	text-align:center;	
	display:table-cell;
	vertical-align: middle;
	position: absolute;
	/*z-index:1;*/
	
}
#menu {
	width: 568px;
	height: 57px;
	margin-top: 86px;
	margin-left: 0px;
	/*border-width: 1px;
	border-style: solid;
	border-color: red;*/
	text-align:center;	
	display:table-cell;
	vertical-align: middle;
	position: absolute;
}

Saludos!!!

pzin · #4 (**permalink**) 19/02/2013, 13:40

Pon el HTML correspondiente para ver qué cosa es cada cosa.

fpalomar · #5 (**permalink**) 20/02/2013, 01:49

Hola,

Pues se me pasó ponerlo, pero aquí está:

Código:

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Barcelona Business World</title>
<link type="image/x-icon" href="Images/logo.ico" rel="shortcut icon" />
<link type="text/css" href="Estilos/style.css" media="screen"
	rel="stylesheet" />

</head>

<body>

	<div id="logo">
		<img class="logotipo" src="Images/logo.png" />
	</div>

	<div id="texto">
		<img class="nombre" src="Images/nombre.png" />
	</div>

	<div id="modelo">
		<img class="modelo" src="Images/modelo.png" />
	</div>

	<div id="menu">
		<img class="bmenu" src="Images/barra.png" />
	</div>



</body>
</html>

Saludos.

pzin · #6 (**permalink**) 20/02/2013, 03:11

Estás cometiendo varios errores.

Primero declaras dos tipos de codificación diferentes; Latin 1 (ISO-8859-1) y UTF-8. Dado que usas HTML5, la declaración para la codificación se hace ahora así:

Código HTML:

Ver original<meta charset="utf-8">

Estás cometiendo un grave error que cometen muchos novatos que es posicionar los elementos de forma absoluta. Hasta que no tengas un conocimiento que te permita trabajar con fluidez CSS no deberías usar ese tipo de posicionamiento. Verás entonces que no son buena opción para posicionar cada elemento y usarás otras forma de colocar cada cosa en su sitio.

Ahora otro error es que hayas descubierto display: table-cell. Si quieres cambiar tu forma de trabajo y deshacerte de las tablas, entonces es un error que empieces usando eso. La razón es porque aunque no uses tables seguirás con la filosofía de su uso, y eso no puede ser bueno si quieres cambiar. Es como pasar de ser jacoso a heroinómano; cambia el nombre pero es lo mismo.

Si quieres entre todos te echamos una mano y si nos dices para qué van a ser esos cuadros azules —qué utlidad van a tener— te armamos algo para que veas el cambio y la filosofía a seguir.

fpalomar · #7 (**permalink**) 20/02/2013, 04:50

Hola,

Pues el código va en una página JSP, que por lo que he visto utiliza el código HTML embedido.
Yo uso el poco código HTML que conozco, utilizo el programa HTML-kit y HTML-kit Tools que creo que están bien.

Luego visualizo la página HTML con la opción Preview.

Como IDE para JSP utilizo el Eclipse y el resultado es el mismo que cuando utilizo el HTML-kit.

Sobre el tema de las declaraciones había leído algo, pero me pierdo entre transitional, strict, etc.

En los cuadros va un menú, como se puede ver en los div's, lo he hecho con imágenes.
En el menú cuando hay on evento mouse over ha de aparecer la barrita roja debajo.

Creo que esto se puede conseguir poniendo el texto directamente en la barra azul y luego
las imágenes recortadas para el efecto mouse over, aunque no se si es correcto.

A continuación de la línea hay un espació para un carrousel de imágenes y una zona para que accedan los usuarios.

Esta es la magen de la maqueta:

Saludos

pzin · #8 (**permalink**) 20/02/2013, 05:15

Cita:

Iniciado por fpalomar

Hola,
Sobre el tema de las declaraciones había leído algo, pero me pierdo entre transitional, strict, etc.

Con HTML5 no hace falta eso. Me refería sólo a la codificación de la página.

Cita:

Iniciado por fpalomar

Hola,
En los cuadros va un menú, como se puede ver en los div's, lo he hecho con imágenes.
En el menú cuando hay on evento mouse over ha de aparecer la barrita roja debajo.

La forma correcta de hacerlo sería sin usar imágenes, porque no lo requiere el diseño. Se puede hacer todo mediante HTML y CSS, incluso el efecto al pasar el mouse por encima: http://jsbin.com/iqicur/1/edit

Tendrías que repasar algún manual/tutorial de HTML y CSS, http://librosweb.es es una buena fuente.

Ahora, si sólo quieres resolver el problema de la altura de las cajas del tipo, supongo que bastaría con arreglar esa altura mediante la propia imagen o darle a las capas una altura mayor.

Linton · #9 (**permalink**) 20/02/2013, 13:02

Cita:

Iniciado por Bonez

http://jsbin.com/iqicur/1/edit

Bonez, ¿qué es eso? ¿Un editor de código online?

pzin · #10 (**permalink**) 20/02/2013, 15:12

Cita:

Iniciado por Linton

Bonez, ¿qué es eso? ¿Un editor de código online?

Si. Hay un par de ellos por ahí, codepen —el más completo diría yo—, jsbin, jsfiddle, etc...

fpalomar · #11 (**permalink**) 21/02/2013, 02:30

Hola,

Bonez lo he conseguido, pero me pasé la tarde de ayer leyendo los manual de Foros del Web y de otros sitios sobre el posicionamiento Web. He quitado toda la basura, es decir, lo relacionado con tablas o celdas como display:table-cell o position: absolute.

Voy muy lento haciendo lo que es la palntilla, pero espero que me sirva de aprendizaje.

Saludos

Linton · #12 (**permalink**) 21/02/2013, 02:52

Cita:

Iniciado por Bonez

Si. Hay un par de ellos por ahí, codepen —el más completo diría yo—, jsbin, jsfiddle, etc...

¿Qué ventajas presentan en vez de usar Notepad++ por ejemplo?

Gracias, un saludo.

pzin · #13 (**permalink**) 21/02/2013, 04:01

Cita:

Iniciado por fpalomar

Voy muy lento haciendo lo que es la palntilla, pero espero que me sirva de aprendizaje.

Es mejor ir paso a paso y haciendo bien las cosas ya que al final tendrás mayor y mejor conocimiento e irás más rápido.

Cita:

Iniciado por Linton

¿Qué ventajas presentan en vez de usar Notepad++ por ejemplo?

Ninguna. Esas herramientas son sólo para compartir código y que se puedan hacer pruebas sobre la marcha. Yo sólo las utilizo para foros.

Linton · #14 (**permalink**) 21/02/2013, 04:23

Gracias por la aclaración, un saludo.

fpalomar · #15 (**permalink**) 21/02/2013, 04:59

Hola Linton.

Yo como editor utilizo el HTML-kit, HTML-kit Tools y el CSS miami 2.0 como WYSING, sólo sirve para los box en CSS pero para mi que soy novato me es muy
útil.

Saludos