Comunidad de diseño web y desarrollo en internet online

Estirar el contenedor hasta abajo

Citar            
MensajeEscrito el 07 Ago 2005 12:27 pm
Buenas... estoy empezando con esto del CSS. He cogido el tutorial de CLAB (gracias otra vez chicos!!!) y ya me comienzan las "inquietudes-poblemas".

Practicando con el ejemplo me habia propuesto conseguir lo siguiente:
Que el contenedor llegue hasta abajo, aunque no haya texto, para que en los monitores con una resolucion mayor de 1024x768 no se vea la textura verde del fondo (que solo debe aparecer en las columnas).

Por si no me explico bien:
Lo que me sale (No)
http://img244.imageshack.us/img244/7169/no1av.jpg
Lo que quiero hacer (Si). Esta hecha con fotosóp.
http://img244.imageshack.us/img244/595/si1da.jpg
Nota: son capturas hechas a 1280x1024 pero reducidas para que se vean bien en resoluciones menores

He probado con el margen inferior. Lo consigo poniendole 200 px (p.e.), pero entonces a resolcuiones menores me aparece scoll (que no interesa porque el final de la pagina esta vacia).

¿Se puede hacer lo que pretendo? ¿Hay alguna otra forma?

GRacias por vuestra ayuda.

Por overbooking

51 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Ago 2005 05:55 pm
Eso es muy simple.

Código :

#contenedor {
   height:100%;
   }


Por supuesto esto es ademas de todo lo que ya tiene.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

opera
Citar            
MensajeEscrito el 07 Ago 2005 10:44 pm
Debo ser muy burro...
Modifico el codigo del tutorial quedando

Código :

#contenedor {
   width:600px; /*ancho total de la pagina*/ 
   height:100%; 
   border:1px solid #333333; /*encadeno los 3 atributos claves del borde en una sola linea, ahorrando codigo XD*/ 
   background-color:#FFF8F0;
   margin:10px auto; /*10px arriba y abajo, y auto a los lados, para los navegadores nuevos es suficiente para centrar la pagina*/ 
   text-align:left; /*aqui alineamos todo de nuevo a la izquierda, pero dentro del contenedor*/ 
}


pero sigue quedando igual.
¿Donde meto la pata?
¿Me he explicado bien en el planteamiento del problema?

Por overbooking

51 de clabLevel



 

firefox
Citar            
MensajeEscrito el 08 Ago 2005 03:23 am
Creo que ésto es algo complicado, el height:100% deberia funcionar, pero solo funciona si fuera una etiqueta tipo caja, en float o position:absolute;

Pero si lo haces asi no mas, no funcionará, para eso yo suelo poner una imagen de fondo, y en el centro va el fondo blanco.

Aunque si en verdad quieres lograr eso, esperame un tiempo pequeño y trataré de ayudarte =p

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 08 Ago 2005 03:47 am
Listo, intenta algo como esto.

Código :

   body {
      text-align:center;
      margin-left:50%;
      }

   #contenedor {
      width:600px;
      height:100%;
      border:1px solid #333333;
      background-color:#FFF8F0;
      margin-left:-300px;
      text-align:left;
      position:absolute;
      }



Estoy usando un div absoluto, con un alto de 100%, en éste caso si funciona muy bien.

Pero aqui no puedes usar un margin-left:auto; margin-right:auto; para centrarlo. Asi que en el <body> le he puesto un margin-left:50%; haciendo que todo se situe 50% del tamaño real de la ventana hacia la derecha.

Pero con 50% a la derecha, el div no se ve bien, o si? Entonces creamos un margin izquierdo negativo margin-left:-300px;

Ahora lo que estoy dudando es que, estás poniendo un borde a todo el contenedor, eso aumenta la altura del contenedor en unos 2 pixeles, eso hará que se vea la barra de desplazamiento vertical, aunque no la necesita. Quieres eso? Si tu respuesta es no, entonces quita este código:

Código :

      border:1px solid #333333; 


Y agrega éste:

Código :

      border-left:1px solid #333333;
      border-right:1px solid #333333;




Si quieres ver que sucedería si no agregas uno que otro código, intenta comentando las lineas. Recuerda que las comentas agregando "/*" al principio y "*/" al final de una oracion (obviamente sin comillas).

Código :

margin-left:50%;
margin-left:-300px;
position:absolute;


Estoy seguro que con ésto es suficiente, en fin.. suerte y no olvides darnos la URL de tu web.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 08 Ago 2005 09:29 am
Gracias por la ayuda NEO_JP. Debe ser mas complicado de lo que parece. He estado probando tu codigo y haciendo modificaciones pero no acaba de salir.

Te explico exactamente lo que querria conseguir para ver si me puedes hechar una mano.
Mi idea es que, independientemente de la resolucion del monitor y de la cantidad de texto que haya en el “contenedor”, este llegue hasta abajo. ¿Por qué? La razon no es otra que si visualizas una pagina con poco texto en un monitor a 1280x1024, y si empleas un grafico como fondo en el “body”, veras este grafico en tambien en la columna central (cuando se acabe el “contenedor” y no solo en los laterales).

Tu codigo es perfecto para Firefox a 1280x1024 (en Explorer sigue existiendo el mismo problema), pero si lo visualizas a 1024x768 el contenedor solo mide 768 px, apareciendo el final del texto sobre la textura.

Dejo la url por si alguien encuentra una solcuion.
http://www.telefonica.net/web2/constanteysonante/pruebas/example1.htm

en buen lio me he metido para debutar en el mundo de las css
:crap:

Por overbooking

51 de clabLevel



 

firefox
Citar            
MensajeEscrito el 12 Ago 2005 04:04 am
Creo que deberias de mover de carpeta o nombre tu archivo porque a mi si me aparecio bien :? . y en resolucion de 1024 X 768

Por choco

425 de clabLevel



Genero:Masculino  

Estado de México, México

firefox
Citar            
MensajeEscrito el 04 Nov 2005 10:53 am
Un tema "oscuro" este...

Dos problemas que no he podido resolver satisfactoriamente usando CSS

1 - Que un div sea "height: 100%"... si bien el codigo de the_NEO_JP funciona, igual noto cosas raras, que voy a hacer algunas pruebas mas antes de plantear bien el problema.
2 - Alinear los objetos "abajo", supongo que para eso sirve el "vertical-align", pero a mi nunca me funciona. Tambien sera error mio, que voy a hacer algunas pruebas más antes de pedir un verdaderos S.O.S.

Pero si alguien puede aportar algun dato más sobre estos 2 problemas, bienvenidos.

Por Josepzin

208 de clabLevel



 

España

firefox
Citar            
MensajeEscrito el 04 Nov 2005 01:08 pm
Autorespuesta: vertical-align, es para otra cosa...

Por Josepzin

208 de clabLevel



 

España

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.