Diseño Web /

[CSS] problema con el alto de la pagina

Participa en el tema [CSS] problema con el alto de la pagina en el foro Diseño Web.
Bueno voy a dejar una imagen de mi problema, estoy programando una pagina con CSS ...

Buscar en este tema:
 
  •  
    marcosgue escribió el 26/01/2008 a las 14:04 hs.
     
    ¿Mensaje inapropiado?
    #1 [CSS] problema con el alto de la pagina
    Bueno voy a dejar una imagen de mi problema, estoy programando una pagina con CSS y tengo un problema que la pagina no termina donde deberia las imagenes van a hablar por mi, donde ven el pie de pagina es donde deberia terminar, pero no... sigue hacia abajo, lo extraño es que el pie de pagina queda quieto, y si minimizo la ventana el pie tambien sube automaticamente ya que le programa posicionamiento absoluto bottom 0 pero igual sigue habiendo lugar debajo es algo muy extraño dejo las imagenes a continuacion en estas imagenes se muestra la ventana maximizada como deberia quedar y luego muestro el espacio que no me gusta y que no entiendo porque sale. Y tambien esta la ventana minimizada para que vean como el pie de pagina como se coloca automaticamente al final pero debajo siguen esos espacios raros que no deberian aparecer.

    maximizada


    maximizada 2


    Minimizada


    Minimizada 2
    [img=http://img182.imageshack.us/img182/1042/imagen4ws4.th.jpg]

    Bueno eso es con el problema de que se pasa de largo, ahora, yo en el CSS tengo esto configurado

    Código:
    HTML {
    height:100%;
    }
    BODY {
    background-color:#FFFFFF;
    background-image:url(images/fondo.jpg);
    background-position:center;
    background-repeat:repeat-y;
    margin:0px;
    height:100%;
    }
    
    Esto lo pongo porque cuadno yo cambio el "height" del html o del body o de ambos por automatico o directamente si se lo borro como ya aclare de uno u otro o de los 2, la pagina queda casi bien en realidad queda como yo querria pero con un problema el fondo del contenedor no continua se corta miren dejo la imagen abajo.

    Casi perfecto



    Espero que alguno consiga ayudarme a que la pagina ocupe el 100% pero que no sobre espacio abajo, ni tampoco que falte fondo como en la ultima imagen donde queda casi perfecto.

    Bueno por ultimo agrego en adjuntos los codigos CSS y HTML que utilice para esta pagina no los coloco en el post porque se va a hacer muy largo.

    Desde ya gracias por su ayuda.
    Archivos adjuntos
    Tipo de archivo: rar estilo.css.rar (625 Bytes, 4 vistas)
    Tipo de archivo: rar index.html.rar (1.2 KB, 2 vistas)
    +
     
    0
    Me gusta
     
    http://www.psicofxp.com/forums/diseno-web.210/619128-css-problema-con-el-alto-pagina.html
    | Más
  • e_ST escribió el 26/01/2008 a las 14:40 hs. ¿Mensaje inapropiado?

    #2 Re: problema con el alto de la pagina

    Hola Marcos, lo solucionas eliminando el botom 0 de la etiqueta #pie del CSS, y cambiando la propiedad height 100% por height auto en la etiqueta #printlatder dl CSS. Espero te sirva, comentá después como te fue. Saludos
    Me gusta este mensaje
  • marcosgue escribió el 27/01/2008 a las 12:39 hs. ¿Mensaje inapropiado?

    #3 Re: problema con el alto de la pagina

    Bueno hice lo que dijiste y se soluciono una de las cosas, yo queria que el pie quedara debajo permanentemente sin moverse y eso quedo bien pero todavia sigue habiendo lugar debajo del final de la pagina propiamente dicho, y otro problema es que al poner auto en prinlatderla imagen que puse de degrade de la izquierda tiene un problema se corta donde termina el texto. dejo la imagen para que lo vean.... les dejo escrito lo que necesito lograr.

    Si el contenido no supera el alto de la pagina que la barra de posicionamiento no se pueda utilizar o sea... que se corte automaticamente que no quede lugar debajo ese lugar que muestro en la imagen 2 de esta respuesta y que es lo que me esta volviendo loco. dejo un zip con la pagina completa tambien para ver si alguien puede encontrar la solucion. en el zip esta todo para descomprimirlo directamente en su carpeta www o httpdocs y luego ingresar por xxxxxx.xx.xx/liniers

    imagen 1 (en esta imagen se ve que el borde izquierdo de donde va el texto se corto no sigue el efecto sombra hasta abajo)
    +

    Imagen 2 (aca muestro como sigue quedando lugar debajo y bueno espero que me puedan ayudar por favor pero tambien se ve como el pie se fue abajo del todo como yo queria pero me gustaria que ese abajo del todo fuera donde deberia terminar la pagina que es antes que se pueda bajar la barra de posicionamiento)


    Imagen 3 (en esta muestro como queda cuando al contenedor principal que en el CSS lo encontramos en primer lugar como #contenedor le cambio el heigth:100% por heigth:auto bueno tal vez sirva de algo porque yo ahi tengo la pagina como quiero pero el tema es que no me queda fondo para que se vea bien tambien comento que le deje el bottom:0 porque sino el pie se iba a donde empieza la parte blanca.)


    Tengo una solucion pero me parece muy precaria que seria a la imagen del fondo la que hace el borde exterior del contenedor hacerle una imagen qeu vaya con la pagina pero me parece que es la ultima solucion que voy a aplicar ya que creo que el CSS me tiene que dar la solucion.

    Saludos y gracias por su ayuda
    Archivos adjuntos
    Tipo de archivo: rar Liniers.rar (104.9 KB, 3 vistas)
    Me gusta este mensaje
  • e_ST escribió el 27/01/2008 a las 15:18 hs. ¿Mensaje inapropiado?

    #4 Re: problema con el alto de la pagina

    Bueno Marcos... a ver... te comento los cambios q realicé, hacelos y contá como te fue, ahi van:
    1) en el html crea una etiqueta div ("sombra" x ejem.) dentro del div "contenedor" q contenga todo el contenido de la pag. Quedaría asi:

    Código:
     
    <div id="contenedor">
           <div id="sombra">
                   ...
                   todo el contenido d la pag
                   ...
           </div>
    </div>
    
    2) en el html borra:
    Código:
    html,body {
      background-color: #C2D5ED;
      background-image:url(images/fondo.jpg);
      background-position:center;
      background-repeat:repeat-y;
      margin:0px;
      height:100%;
    }
    body {
      background-color: #FFFFFF;
    }
    
    y lo reemplazas colocando en el css:

    Código:
    body {
        background-color: #C2D5ED;
        margin: 0px;
    }
    
    3) en el css las sig. etiquetas quedarían asi:

    Código:
    #contenedor {
        width:740px;
        height:100%;
        margin:auto;
        text-align:left;
    }
    
    #sombra {
        width: 740px;
        height: auto;
        background-image: url(images/fondo.jpg);
        background-repeat: repeat-y;
    }
    
    #pie {
        background:#D9DFEC;
        width:700px;
        border:#000000 thin;
        text-align:center;
        font-size:9px;
        color:#000000;
        margin-left: 20px;
    }
    
    y listo.
    Lo único q te faltaria sería modificar la imagen fondo.jpg para q la parte blanca quede transparente y exportarla en gif, o bien definir el color d la pag. como blanco.
    Espero se resuelvan todos tus problemas. Saludos.
    Me gusta este mensaje
  • marcosgue escribió el 28/01/2008 a las 15:23 hs. ¿Mensaje inapropiado?

    #5 Re: problema con el alto de la pagina

    ahora mismo pruebo lo que dices si funciona te voy a pedir que me expliques si no es mucha molestia que es lo que generaba la falla....
    ------------------------------------------------------------------------------------------

    Pues bueno ya probe y nada sigue todo igual consigo el mismo resultado que cuadno le cambiaba el heigh a body o a html por auto... y aca dejo la imagen del resultado obtenido


    a proposito lo que dijiste del html de borrar lo primero ya lo habia hecho y si el fondo ya lo habia configurado como blanco.

    (de hecho ahora peor porque el fondo no se repite hasta abajo sino que se corta con la pagina)

    bueno espero a ver si agluien ya consiguio la solucion....
    Me gusta este mensaje
  • e_ST escribió el 28/01/2008 a las 17:27 hs. ¿Mensaje inapropiado?

    #6 Re: problema con el alto de la pagina

    No se en que le estaras errando xq a mi me queda bien, o sea, como te queda a vos pero con el pie pegado al cuerpo d la pag.
    Y con respecto a lo de:
    (de hecho ahora peor porque el fondo no se repite hasta abajo sino que se corta con la pagina)
    No es la idea que el fondo (sombra) termine con la página? de que te sirve una sombra donde no hay nada? Salvo que te refieras a la última imagen que colgaste en donde el pie queda distanciado de la pagina.
    Me gusta este mensaje
  • marcosgue escribió el 28/01/2008 a las 17:51 hs. ¿Mensaje inapropiado?

    #7 Re: problema con el alto de la pagina

    ahhh me parece que estamos entendiendonos mal....
    Originalmente publicado por e_ST
    No es la idea que el fondo (sombra) termine con la página? de que te sirve una sombra donde no hay nada?
    eso es lo que pasa tu crees que yo necesito que la pagina termine donde termina el contenido y nooo jaja ese es el problema lo que yo necesito conseguir es que la pagina quede como la primer imagen que subi la que dice "MAXIMIZADA" pero que termine ahi o sea... que no pueda bajar con la barra de desplazamiento, se entiende???

    Bueno muchisimas gracias por tu ayuda y aclaro lo que dije de que queda peor no lo dije de mala manera no vayas a pensar mal.

    Saludos
    Me gusta este mensaje
  • e_ST escribió el 28/01/2008 a las 22:42 hs. ¿Mensaje inapropiado?

    #8 Re: problema con el alto de la pagina

    Ahora si nos estamos entendiendo, pero hasta donde yo se no lo vas a conseguir solo con css porque tenes que detectar la resolución de la pantalla donde se carga la página y eso lo podes con javascript (no se como ni como emplearlo para solucionarte el problema pero en la web hay mucha info).
    En css no lo vas a conseguir con height 100% porque eso depende del tamaño de la etiqueta div que la contenga, por ejemplo, si vos le pones al #contenedor una altura de 600 (que sería para las resoluciones de 800 x 600), entonces, poniendo la altura de #contenedor2 (siguiendo el esquema de abajo) al 100% ocuparía toda la pantalla, pero solo para resoluciones de 800 x 600, en 1024 x 768 te quedaría corta.

    Código:
    <body>
    <div id="contenedor">
        <div id="contenedor2">
    ...
    ...
    ...
       </div>
    </div>
    
    </body>
    
    Lamento no poder ayudarte mas pero no se mucho de javascript. Saludos.
    Me gusta este mensaje
  • marcosgue escribió el 29/01/2008 a las 02:24 hs. ¿Mensaje inapropiado?

    #9 Re: problema con el alto de la pagina

    ahhh, es que yo pensaba que con el hecho de ya tener body al 100% se podia armar un contenedor definiendo altura 100% por lo tanto ocuparia tanto espacio como ocupa el body, y el body deberia ocupar toda la pantalla por el hecho de ser 100% no se si me explico.

    y si todo lo que he diseñado es para 1024 * 768 y esta descripto en la intro que le voy a hacer a la pagina si alguien entra con 800 * 600 pues tendra que mover las barras de desplazamiento bueno, seguire buscando...

    Gracias de todas formas.
    Me gusta este mensaje


Estadísticas del tema
  • 8 RESPUESTAS
  • 1984 VISTAS
  • 2 USUARIOS RESPONDIERON
 
Ir arriba
Contacto | Acerca de | Ayuda | Términos Legales | privacidad | Pautas de convivencia | Mapa de los foros | TrabajÁ con nosotros
©2008 Psicofxp.com S.A. - Todos los derechos reservados
Certifica IAB