Consulta sobre hoja

matiasbmx · #1 (**permalink**) 21/05/2011, 21:53

Hola, he hecho una hoja blanca y centrada con un div, aca el code:

Código PHP:

  .contenedor{

  width:65%;

  background-color: #fff;

  position:absolute;

   left: 17.5%;

}

pero tengo un problema con la altura, para que llegue hasta el final de la pagina, si le pongo 100% de altura solo rellenará una hoja, y la idea es que la web siga para abajo..

luciio · #2 (**permalink**) 22/05/2011, 12:13

Prueba agregandole altura 100% al body y a html, y a cualquier capa contenedora de ".contenedor" ejemplo:

Código PHP:

  .contenedor{ 
  width:65%; 
  background-color: #fff; 
  position:absolute; 
  left: 17.5%; 
  height:100%;
}  

body,html{height:100%;}

IsaBelM · #3 (**permalink**) 22/05/2011, 14:38

usa la propiedad height con el valor auto

ZoroRoronoa · #4 (**permalink**) 22/05/2011, 15:19

al documento ponle una altura de 100%

Código CSS:

Ver originalhtml,body {
height:100%;
}

y al contenedor, ponle una altura minima de 100%, para que asi, siempre este al 100% y si llega a ver mas contenido, siga hacia abajo.

Código CSS:

Ver original#contenedor {
min-height:100%;
}

Saludos.

IsaBelM · #5 (**permalink**) 22/05/2011, 16:00

ZoroRoronoa, yo no suelo programar para navegadores tan antiguos como ie6, pero si en lugar de usar una propiedad que no admite, se usa una que admite, pues mejor. además matiasbmx dice

Cita:

Iniciado por matiasbmx

pero tengo un problema con la altura, para que llegue hasta el final de la pagina, si le pongo 100% de altura solo rellenará una hoja, y la idea es que la web siga para abajo..

así que está seguro que va a sobrepasar el 100%, por lo tanto es mejor usar auto, o cuanto menos ambas propiedades

ZoroRoronoa · #6 (**permalink**) 22/05/2011, 17:25

Cita:

Iniciado por IsaBelM

ZoroRoronoa, yo no suelo programar para navegadores tan antiguos como ie6, pero si en lugar de usar una propiedad que no admite, se usa una que admite, pues mejor. además matiasbmx dice

así que está seguro que va a sobrepasar el 100%, por lo tanto es mejor usar auto, o cuanto menos ambas propiedades

Al usar auto dependerá cuanto contenido tiene, pero nuestro amigo no menciona su contenido, por lo cual, yo opté, en que su contenedor se muestre al 100%, y si tiene contenido que sobrepase ese 100%, pues que crezca aun más, que no se quede hasta ahí.

Pero bueno... Ya vendrá el autor del tema y nos dira como le va.

matiasbmx · #7 (**permalink**) 22/05/2011, 18:53

He usado la manera de ZoroRonoa, pero el scroll me queda en el contenedor(la hoja), aqui el ejemplo: http://test.elementobmx.com/nueva/index.php

matiasbmx · #8 (**permalink**) 22/05/2011, 18:56

lo mismo con la de ''luciio'' ... Gracias por su ayuda desde ya!

daPhyre · #9 (**permalink**) 22/05/2011, 19:15

Creo que lo que necesitas es un "min-height:100%".

Suerte

matiasbmx · #10 (**permalink**) 22/05/2011, 19:23

Cita:

Iniciado por daPhyre

Creo que lo que necesitas es un "min-height:100%".

Suerte

gracias, por tu respuesta, pero me ha quedado una barra de scroll en el contenedor(la hoja), aca el ejemplo: http://test.elementobmx.com/nueva/index.php
los codigos son los siguientes:
contenedores.css

Código PHP:

  .contenedor{ 
background-color: #fff;
min-height:100%;
position: absolute;
                left: 27%;
                top: 0%;
                width: 920px;
                margin-left: -130px;
 
                overflow: auto;
}

index.php

Código PHP:

  <style type="text/css">
<!--
html,body {
    background-image: url(images/fondologo1.jpg);
        background-attachment: fixed;

}
</style>

ZoroRoronoa · #11 (**permalink**) 22/05/2011, 19:46

Intenta este code:

Código CSS:

Ver originalhtml, body {
background-image: url(images/fondologo1.jpg);
background-attachment: fixed;
height:100&#37;; //Aqui cambia el 100&#37 por 100%;
}
.contenedor{ 
background-color: #fff;
min-height:100%;
width: 920px;
margin:0 auto;
}

Saludos

matiasbmx · #12 (**permalink**) 22/05/2011, 19:53

Cita:

Iniciado por ZoroRoronoa

Intenta este code:

Código CSS:

Ver originalhtml, body {
background-image: url(images/fondologo1.jpg);
background-attachment: fixed;
height:100%; //Aqui cambia el 100% por 100%;
}
.contenedor{ 
background-color: #fff;
min-height:100%;
width: 920px;
margin:0 auto;
}

Saludos

.. Nada :/ me cubre solo el 100% de la primera hoja, y para abajo no..

ZoroRoronoa · #13 (**permalink**) 22/05/2011, 20:21

Aqui te dejo un ejemplo en el cual a mi me va bien.
*el DIV ("algo") vendría siendo el contenido que se encuentra dentro del contenedor ("conte").

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" lang="es">
<head><title>Demo of Flezha Roronoa</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html,body {
margin:0;padding:0;border:0;
height:100%;
background:#00ff00;
}
#conte {
width:70%;
margin:0 auto;
min-height:100%;
background:#ff3443;
}
#algo {
height:1400px;
width:300px;
position:relative;
margin:0 auto;
background:#ffffff;
}
</style>
</head>
<body>
 
<div id="conte">
<div id="algo">TODO ESTO ES EL CONTENIDO ("supuestamente.")</div>
</div>
</body>
</html>

Saludos

IsaBelM · #14 (**permalink**) 23/05/2011, 08:16

no te va a resultar uses lo que uses (height:100%/auto, min-height:100%) por que el contenido del bloque está en absolute. un ejemplo para que veas de lo que hablo

Cita:

.contenedorAb {
height: auto;
background: red;
}

.contenedorAb .ab {
position: absolute;
left: 10px;
top: 10px;
color: yellow;
}

.contenedorNoab {
height:auto;
background: red;
}

.contenedorNoab .noab {
color: yellow;
}

<div class="contenedorAb">
<div class="ab">
texto 
texto 
texto 
texto 
texto 
texto 
texto 
texto 
texto 
texto 
</div>
</div>

<div class="contenedorNoab">
<div class="noab">
texto 
texto 
texto 
texto 
texto 
texto 
texto 
texto 
texto 
texto 
</div>
</div>

si ejecutas el primer bloque, se produce tu problema. por el contrario si ejecutas el segundo , no se produce, puesto que el bloque contenido no está en posición absolute

ZoroRoronoa · #15 (**permalink**) 23/05/2011, 09:39

en el ejemplo que yo le deje, he corregido eso, mira:

Código CSS:

Ver original#algo {
height:1400px;
width:300px;
position:relative; // ESTO...

IsaBelM · #16 (**permalink**) 23/05/2011, 12:24

Cita:

Iniciado por ZoroRoronoa

en el ejemplo que yo le deje, he corregido eso, mira:

Código CSS:

Ver original#algo {
height:1400px;
width:300px;
position:relative; // ESTO...

y??

primero, que no he leído tu código, sólo la parte redactada
segundo, en el caso que lo hubiese leído, el usuario necesitará una explicación. probablemente, tus conocimientos te permiten saber solamente con ese código que el valor "correcto" es relative, pero él quizás no lo vea. sólo observará que tu código funciona y el suyo no

matiasbmx · #17 (**permalink**) 23/05/2011, 15:38

Mmmm, he probado con ambas maneras, con position:relative y con absolute, y en ambos es el mismo resultado... aquí les dejo el codigo con relative.

Código CSS:

Ver original.contenedor{ 
background-color: #fff;
margin:0 auto;
min-height:100&#37;;
width: 920px;
position: relative;
                left: 27%;
                top: 0%;
                margin-left: -130px;
              
} 
 
 
html,body {
    background-image: url(images/fondologo1.jpg);
        background-attachment: fixed;
        margin:0;padding:0;border:0;
        height:100%;
}

IsaBelM · #18 (**permalink**) 23/05/2011, 16:01

no se trata de modificar el selector .contenedor, sino los demás selectores. todos aquellos que son el contenido del bloque .contenedor.

prueba mi código, haciendo lo que te indico al final. lo entenderás mejor

matiasbmx · #19 (**permalink**) 23/05/2011, 16:09

pero necesito asignarle una posicion a algun div, el div 'contenedor' es la hoja, y ponte tu quiero hacer esto:
<div class="contenedor">
<div class="contenedor_slider">
contenido
</div>
</div>
si no le asigno una posicion a alguno de esos quedará corrido... debo ponerle position

IsaBelM · #20 (**permalink**) 23/05/2011, 16:37

lo único que puedo decirte es que empieces a maquetar desde el principio teniendo en cuenta lo que te hemos dicho

no entiendo que quieres decir con eso de "corrido", tienes otras propiedades (display, float)

matiasbmx · #21 (**permalink**) 23/05/2011, 16:51

con corrido me refiero a que la hoja ya no esta centrada, me queda asi : http://test.elementobmx.com/nueva/index.php
me podrias dar un ejemplo con mis codigos a lo que vas tu?
gracias de antemano por tu ayuda desinteresada :)

McPinkY18 · #22 (**permalink**) 23/05/2011, 17:37

no entendi bien, pero quieres hacer una imagen de fondo que nos e mueva?

matiasbmx · #23 (**permalink**) 23/05/2011, 19:09

quiero una funcion para que un div tenga de height automaticamente toda la web, porque al ponerle 100% solo cubre la primera hoja.....

ZoroRoronoa · #24 (**permalink**) 23/05/2011, 19:23

Cita:

Iniciado por matiasbmx

quiero una funcion para que un div tenga de height automaticamente toda la web, porque al ponerle 100% solo cubre la primera hoja.....

Toda la web???

opcion uno.
Usando min-height, haces q el div tenga el 100% de una hoja, si el contenido es menor que una hoja, este sigue estando al 100%.

opcion dos.
Si tu contenido es mayor que una hoja, entonces ponle height auto, y automaticamente abarcara todo lo alto de la web.

matiasbmx · #25 (**permalink**) 23/05/2011, 19:45

me sirvió la dos, nose como no me funcionó antes, si lo habia probado mas de una vez. creo que fue porque re-ordene y estructure el codigo.
moraleja: Manten tu codigo limpio y ordenado!
Gracias a todos por su disposicion de verdad...

ZoroRoronoa · #26 (**permalink**) 23/05/2011, 20:57

Cita:

Iniciado por matiasbmx

me sirvió la dos, nose como no me funcionó antes, si lo habia probado mas de una vez. creo que fue porque re-ordene y estructure el codigo.
moraleja: Manten tu codigo limpio y ordenado!
Gracias a todos por su disposicion de verdad...

Me alegró que se haya resuelto tu problema/duda.
Y dejame decirte que puedes agregar las dos opciones.

min-height:100%;
y
height:auto;

Saludos