porque la esta columna me hace el 100% y las otras no?

00israel · #1 (**permalink**) 19/10/2011, 09:04

En una pagina tengo colocados un div contenedor dentro del cual van dos div en una primera fila y en una segunda linea van tres divs, los cuales se comportan de distinta forma y no se porque. Quisiera que todos hagan un 100% en la altura, pero parece que solo lo hace el div llamado "#cuadrologo". A parte de que se me va muy abajo y no se porque tambien. Los otros dos que tiene al lado se quedan mas cortos y no se porque? ademas con distintas alturas.

este es el codigo:

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=UTF-8" />
<title>Documento sin título</title>
<style type="text/css">
* {
}
html, body {
	height: 100%;
	margin: 0px;
	background-color: #ede5db;
	background-image: url(Floral-Illustration.gif);
	background-repeat: no-repeat;
	background-position: 1024px 400px;
}
	
#contenedor {
	height: 100%;
	width: 1061px;
}
#contenedor #secciones {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	float: left;
	width: 280px;
	padding-top: 50px;
	padding-left: 37px;
	border-right-width: 7px;
	border-right-style: solid;
	border-right-color: #000;
	height: 459px;
	background-color: #c7b299;
}
#contenedor #foto img {
	float: left;
	height: 509px;
	width: 730px;
	border-right-width: 7px;
	border-right-style: solid;
	border-right-color: #000;
}
#contenedor #cuadrologo {
	background-color: #FFF;
	background-image: url(logo.jpg);
	background-position: 38px 28px;
	width: 217px;
	border-top-width: 7px;
	border-right-width: 7px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	height: 100%;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	padding-top: 168px;
	padding-left: 47px;
	float: left;
}
#contenedor #texto {
	background-color: #736357;
	border-top-width: 7px;
	border-right-width: 7px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	width: 459px;
	float: left;
	height: 100%;
}
#contenedor #continuacion {
	float: left;
	width: 317px;
	border-right-width: 7px;
	border-right-style: solid;
	border-right-color: #000;
	height: 100%;
	background-color: #c7b299;
	clear: right;
}
</style>
</head>

<body>
<div id="contenedor">
  <div id="foto"><img src="prueba1.jpg" width="730" height="509" /></div>
  <div id="secciones">que ofrecemos<br />
    Ventajas<br />
    patitin<br />
  patatan<br />
  lo que sea<br />
  lo que vuelva a ser<br />
  no se<br />
  y eso que<br />
  <br />
  <br />
  t. 600 000 000<br />
  f. 600 000 000<br />
  [email protected]<br />
  [email protected]<br />
  <br />
  facebook: lalalalalal<br />
  twitter: lolololololo<br />
  flickr: lililililili
  </div>
  <div id="cuadrologo">2011 @ copyright | diseño web: http:// </div>
  <div id="texto">Evenet endia dollam, utemporum hiciti blatati osanti ut porendi occupti unt evel ipsum aturitiae estiass imilla vera saperuntibus aut laut moluptatur renimpos mintur, sit que vente eum reptaese ni uta dolupta tiandan diciet quiam re es aturerit fugia inctur?Evenet endia dollam, utemporum hiciti blatati osanti ut porendi occupti unt evel ipsum aturitiae estiass imilla vera saperuntibus aut laut moluptatur renimpos mintur, sit que vente eum reptaese ni uta dolupta tiandan diciet quiam re es aturerit fugia inctur?Evenet endia dollam, utemporum hiciti blatati osanti ut porendi occupti unt evel ipsum aturitiae estiass imilla vera saperuntibus aut laut moluptatur renimpos mintur, sit que vente eum reptaese ni uta dolupta tiandan diciet quiam re es aturerit fugia inctur?</div>
  <div id="continuacion"></div>
</div>
</body>
</html>

00israel · #2 (**permalink**) 20/10/2011, 03:15

He averiguado que la diferencia de los div de segunda linea por lo menos entre #cuadrologo y #texto es debido al padding-top: 168 px que tengo metido. Pero sigo sin entender porque me hace eso y porque sigue habiendo una diferencia con #continuacion y porque se me alargan tanto. Parece como si le hubiera metido 1500 px de alto, no lo entiendo.

RafaRG · #3 (**permalink**) 20/10/2011, 14:38

mmm, quizás si pusieses un dibujo de cómo quieres que fuese el resultado final, podríamos ayudarte mejor. es que la verdad, no comprendo muy bien cuál es el problema y qué es lo que quieres conseguir =/
un saludo

ArturoGallegos · #4 (**permalink**) 20/10/2011, 17:00

supongamos un alto de 1000px de tu pantalla
#contenedor = 100% = 1000px
#contenedor #foto img = 509px
#contenedor #cuadrologo = 100% + 509px = 1509px (los 509px no son parte de este elemento pero dada la jerarquia de tu html lo obliga a bajar)

00israel · #5 (**permalink**) 21/10/2011, 01:58

cuando empeze a crear la arquitectura de la pagina, mi intencion es que quedara algo asi:

Es decir, una imagen arriba, dos div debajo con un alto del 100% de pagina y un div lateral tambien al 100% de pagina que cruzara la foto y los dos div inferiores. Pero como no supe hacer que el div lateral me cruzara toda la pagina de arriba abajo, cree un div lateral con la altura de la foto y otro div junto a los dos de abajo que visualmente era la continuacion del div que se encuentra junto a la foto. Pero pienso que esto es una chapuza y queria saber si se puede hacer que el div que se encuentra junto a la foto recorra todo el alto al 100% de la pagina sin tener que poner otro debajo.

Y lo de que se alarge tanto sigo sin entenderlo, porque (gracias por tu explicacion ag666). entiendo que me apareciera el scroll cuando falta texto por visualizarse pero si pongo poco texto porque se alargan tanto la pagina?. Aunque mi pantalla tuviera un alto de 1000px (que conste que yo he definido el alto de mi pagina al 100%, pero entiendo que te estas refiriendo a que veo la pagina en una pantalla grande) si no hay mucho texto no tiene porque alargarse tanto la pagina.

bueno me he enrrollado un poco pero empiezo a estar desesperado con esta pagina y necesito acabarla, se me acaba el tiempo. Y no doy con la solucion.

gracias por vuestra ayuda

Oscar_Hidro · #6 (**permalink**) 21/10/2011, 07:50

Hermano, esta algo compleja la forma en que has organizado la estructura. La forma en que yo manejo este tipo de estructuras, es a traves de la anidación de divs.

Crea un Div principal o contenedor donde mida el ancho que tu le asignes a tu pagina.

Dentro de este div principal basate nada mas en dos bloques(divs). Uno a la izquierda y otro a la derecha. Para esto, los declaras como flotantes(

Código CSS:

Ver originalfloat:left; float:right;

).
Es decir, anidas estos dos bloques(derecho e izquierdo) dentro del div principal. Y si te fijas, aqui tu podrás hacer el div izquierdoo mas largo que el derecho(tu cuadro de color rosa) dependiendo las medidas que tu le quieras manejar.

Y ahora viene la parte interesante. Simplemente para crear las demas divisiones en tu cuadro izquierdo creas un par de divs, el de arriba(color azul) y el de abajo. En el de abajo creas nuevamente otro div donde anidarás un par de divs flotados en right(verde) y left(amarillo).

Simplemente es entender la estructura de anidación entre divs. Espero me hayas entendido, de todos modos cualquier duda me la haces saber para orientarte.

A modo de consejo te recomiendo que en el div principal, y en los divs donde venga cualquier contenido donde el este pueda variar de tamaño, utiliza

Código CSS:

Ver originaloverflow:hidden;

en vez de height 100%. El overflow hace que se estire el contenido del div si es que este llega a ser algo amplio. Y por consiguiente estira los demas divs.

RafaRG · #7 (**permalink**) 21/10/2011, 08:40

lo que oscar-hidro dice tiene sentido. de hecho, yo usaría esa estructura también.
por otra parte, el poner los div amarillo y verde con height:100%;, no hará que ocupen el resto de pantalla, sino que ocuparán el espacio equivalente al tamaño de pantalla, sin importar que se salgan de la misma. lo que yo haría sería poner los div de la izquierda (verde, amarillo y azul) con height:50%; y el de la derecha (rosa), con height:100%;. luego, jugando con los float, haces la distribución de la página (tienes información muy detallada aquí: http://www.cristalab.com/tutoriales/...n-css-c94267l/). aunque supongo que ya la tendrás hecha.

Oscar_Hidro · #8 (**permalink**) 21/10/2011, 09:24

Interesante tambien la propuesta de RafaRG si solamente quieres que se muestre nada mas en el tamaño de la pantalla.

Se aceptan Karmas jeje

00israel · #9 (**permalink**) 21/10/2011, 12:38

Gracias chicos. Hoy curiosamente me ha venido esa idea de anidar divs a la ca eza y ahora os leo diciendomelo. Perfecto, haré eso entonces. Lo que si que no llego a entender es que ponga overflow: hidden. Antes lo tenia puesto asi pero el problema es que quiero que en todas las resoluciones de todas las pantallas se Pueda leer el contenido y resulta que si le pongo hidden en resoluciones bajas no se ven los textos y necesitaria un scroll para la pagina con lo cual no deberia de poner overflow: hidden no? Sino nada.

Que me decis?

Oscar_Hidro · #10 (**permalink**) 21/10/2011, 14:46

Quieres decir que al momento de usar en resoluciones bajas el overflow, el contenido lo esconde?

Lo que pasa es que tienes que tener mucho cuidado de que el width de tu contenedor principal, no sea excedido por el tamaño de sus contenidos.

Tu manejas una medida de 1061ps, pero si la resolucion es menor que el largo que le estas asignando a tu pagina, se la va a comer y ocasionará este tipo de problema.

Te recomiendo asignarle un ancho de 960px a tu contenedor principal y sobre ese, estructures la anidacion de divs con las medidas que tu consideres.

El overflow en este caso, con un largo de 960px no te comeria tu pantalla, pero si haria la funcion, de que en caso de segir agregando contenidos a cualquier bloque, automáticamente te recorrerá tu pantalla hacia abajo, sin necesidad de un scroll, es decir, no se come tu contenido. haz la prueba

00israel · #11 (**permalink**) 22/10/2011, 00:11

con el ancho no tengo problema. Porque ningun contenido se me saldria, y aunque sea 1061px, lo tengo hecho a proposito para que con lo que se esconde en algunas resoluciones y se ve en otras, forme parte del diseño (que complemento con una imagen de fondo).

El problema es con el alto, que no pense que se me fuera a esconder. Antes tenia puesto el overflow:hidden en el #contendor pero lo quite por eso mismo, porque me escondia el contenido en resoluciones bajas. Por eso no entiendo, al tu decirme que no pasa nada.

Voy a volver a probarlo con la nueva estructura de anidar que voy a crear y te cuento.

gracias

00israel · #12 (**permalink**) 22/10/2011, 02:37

no he conseguido ni poniendole hidden, ni scroll ni nada para poder hacer que cuando algo se salga del alto de la pagina viendose en una pantalla de resolucion baja, aparezca un scroll que permita bajar la pagina.

Mira el resultado final lo estoy aplicando ya a la pagina. Aun tengo que cambiar la estructura que tiene ahora por la de anidar divs, que me habeis comentado aqui (en lo que a la web completa se refiere). Pero he estado haciendo pruebas con una de las paginas de la web y no lo consigo. Es esta:
http://www.cocinasconestilo.com/contacto-2.html

00israel · #13 (**permalink**) 22/10/2011, 06:54

Otra cosa que me doy cuenta es que da igual la altura en px que tengan los divs que van dentro de un div con alto al 100%. Porque ese div al 100% de alto mostrará solo lo que se pueda ver en el alto de la ventana del navegador donde se muestre. Me recuerda a la mascaras de recorte de Illustrator. No se si me he explicado y si estoy en lo cierto. Pero con todas las pruebas que he hecho esta es la conclusion que he sacado.

Con lo cual se me presentan otros problemas o bien convierto el contenedor que va al 100% en una medida de alto en pixeles para que se visualice todo el interior, pero me queda algo extraño porque tendria que meterle una altura importante para que la totalidad del div (con sus colores de fondo y demas) se pueda ver en pantallas con gran resolucion. Y me direis y porque no esos colores de fondo del div los metes como fondo de pagina. Pero no puedo porque tengo una imagen colocada como fondo de pagina. Entonces aqui me surge otra pregunta.... Se puede crear un div que no muestre la ventana del navegador a no ser que la ventana sea muy grande? (es aqui donde meteria esa imagen que tengo de fondo)

00israel · #14 (**permalink**) 22/10/2011, 10:30

no se si sera correcto pero creo que he dado con una solucion despues de trastear mucho. Al menos lo he comprobado en todos los navegadores y me funciona.

me he creado un fondo en forma de tira que mostraba los colores de los div con sus bordes y lo he repetido verticalmente (fondo3colores.gif). Y la imagen que tenia de fondo la he metido en un div aparte fuera de pagina, con un posicionamiento absoluto y a la vez le he dado al body un "overflow-x:hidden", para que solo las pantallas con gran resolucion vean esa imagen que unicamente tiene un sentido decorativo cuando la pagina se abre a una resolucion alta.

A la vez he tenido que meterle un posicionamiento absoluto tambien al contenedor principal porque me mostraba un segundo scroll cuando se escondia parte del texto.

Este es el codigo:

Código:

* {
}
html, body {
	height: 100%;
	margin: 0px;
	background-color: #ede5db;
	background-image: url(links/fondo3colores.gif);
	background-repeat: repeat-y;
	overflow-x: hidden;
}
#contenedorfuera {
	background-image: url(links/Floral-Illustration.gif);
	background-repeat: no-repeat;
	position: absolute;
	height: 600px;
	width: 1120px;
	left: 1061px;
	top: 400px;
}
#contenedor {
	height: 700px;
	width: 1061px;
	position: absolute;
}
#contenedor #divleft {
	float: left;
}
#contenedor #divright {
	float: left;
	clear: right;
}
	
#contenedor #divright #secciones {
	font-family: 'Sansita One', cursive;
	font-size: 12px;
	width: 280px;
	padding-left: 37px;
	padding-top: 37px;
	border-right-width: 7px;
	border-right-style: solid;
	border-right-color: #000;
	height: 100%;
	background-color: #c7b299;
	color: #000;
}
#contenedor #divleft #foto img {
	float: left;
	clear: right;
	height: 509px;
	width: 730px;
	border-right-width: 7px;
	border-right-style: solid;
	border-right-color: #000;
}
#contenedor #divleft #cuadrologo {
	background-color: #FFF;
	background-image: url(links/logo.jpg);
	background-position: 30px 28px;
	width: 215px;
	border-top-width: 7px;
	border-right-width: 7px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	padding-top: 140px;
	padding-left: 38px;
	float: left;
	clear:left;
	color: #000;
}
.textoTF {
	font-family: 'Sansita One', cursive;
	font-size: 10px;
	color: #736357;
}
.textoTF-blanco {
	font-family: 'Sansita One', cursive;
	font-size: 10px;
	color: #ede5db;
}
a {
	text-decoration: none;
}
#contenedor #divleft #texto {
	background-color: #736357;
	border-top-width: 7px;
	border-right-width: 7px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #000;
	border-right-color: #000;
	width: 400px;
	float: left;
	font-family: 'Sansita One', cursive;
	font-size: 28px;
	padding-top: 33px;
	padding-left: 35px;
	padding-right: 35px;
	color: #c7b299;
}
.texto-comun {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFF;
	text-align: justify;
}
.texto-comunNegro {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	text-align: justify;
}
.texto-comunSANSITA {
	font-family: 'Sansita One', cursive;
	font-size: 11px;
	color: #c7b299;
}
.texto-comunSANSITAblanco {
	font-family: 'Sansita One', cursive;
	font-size: 11px;
	color: #ede5db;
}
a:link {
	color: #000;
}
a:visited {
	color: #000;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}

y aqui el resultado:

http://www.cocinasconestilo.com/contacto-5.html

El unico problema que me queda por resolver cuando haya aplicado estos cambios a todas las paginas es conseguir centrar un texto verticalmente. Un texto que en todos los navegadores se ve bien menos en IE:

Aqui vereis de que hablo: http://www.cocinasconestilo.com

00israel · #15 (**permalink**) 22/10/2011, 12:09

he conseguido resolver el problema tambien del centrado vertical del div con las indicaciones de esta pagina:

http://www.luigix.com/2008/12/11/cen...rizontalmente/