Foros del Web » Creando para Internet » CSS »

Consulta sobre hoja

Estas en el tema de Consulta sobre hoja en el foro de CSS en Foros del Web. Hola, he hecho una hoja blanca y centrada con un div, aca el code: Código PHP: . contenedor {    width : 65 %;    ...
  #1 (permalink)  
Antiguo 21/05/2011, 22:53
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Consulta sobre hoja

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;
   
left17.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..
  #2 (permalink)  
Antiguo 22/05/2011, 13:13
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 7 años, 7 meses
Puntos: 38
Respuesta: Consulta sobre hoja

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
  
left17.5%; 
  
height:100%;
}  

body,html{height:100%;} 
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #3 (permalink)  
Antiguo 22/05/2011, 15:38
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 6 meses
Puntos: 1008
Respuesta: Consulta sobre hoja

usa la propiedad height con el valor auto
  #4 (permalink)  
Antiguo 22/05/2011, 16:19
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 5 años, 9 meses
Puntos: 116
Respuesta: Consulta sobre hoja

al documento ponle una altura de 100%
Código CSS:
Ver original
  1. html,body {
  2. height:100%;
  3. }

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
  1. #contenedor {
  2. min-height:100%;
  3. }

Saludos.
__________________
Programador jQuery & PHP
  #5 (permalink)  
Antiguo 22/05/2011, 17:00
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 6 meses
Puntos: 1008
Respuesta: Consulta sobre hoja

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 Ver Mensaje
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
  #6 (permalink)  
Antiguo 22/05/2011, 18:25
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 5 años, 9 meses
Puntos: 116
Respuesta: Consulta sobre hoja

Cita:
Iniciado por IsaBelM Ver Mensaje
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.
__________________
Programador jQuery & PHP
  #7 (permalink)  
Antiguo 22/05/2011, 19:53
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

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
  #8 (permalink)  
Antiguo 22/05/2011, 19:56
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

lo mismo con la de ''luciio'' ... Gracias por su ayuda desde ya!
  #9 (permalink)  
Antiguo 22/05/2011, 20:15
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 8 años, 10 meses
Puntos: 142
Respuesta: Consulta sobre hoja

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

Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #10 (permalink)  
Antiguo 22/05/2011, 20:23
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

Cita:
Iniciado por daPhyre Ver Mensaje
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%;
positionabsolute;
                
left27%;
                
top0%;
                
width920px;
                
margin-left: -130px;
 
                
overflowauto;

index.php
Código PHP:
<style type="text/css">
<!--
html,body {
    
background-imageurl(images/fondologo1.jpg);
        
background-attachmentfixed;

}
</
style
  #11 (permalink)  
Antiguo 22/05/2011, 20:46
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 5 años, 9 meses
Puntos: 116
Respuesta: Consulta sobre hoja

Intenta este code:

Código CSS:
Ver original
  1. html, body {
  2. background-image: url(images/fondologo1.jpg);
  3. background-attachment: fixed;
  4. height:100&#37;; //Aqui cambia el 100&#37 por 100%;
  5. }
  6. .contenedor{
  7. background-color: #fff;
  8. min-height:100%;
  9. width: 920px;
  10. margin:0 auto;
  11. }

Saludos
__________________
Programador jQuery & PHP
  #12 (permalink)  
Antiguo 22/05/2011, 20:53
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
Intenta este code:

Código CSS:
Ver original
  1. html, body {
  2. background-image: url(images/fondologo1.jpg);
  3. background-attachment: fixed;
  4. height:100%; //Aqui cambia el 100% por 100%;
  5. }
  6. .contenedor{
  7. background-color: #fff;
  8. min-height:100%;
  9. width: 920px;
  10. margin:0 auto;
  11. }

Saludos
.. Nada :/ me cubre solo el 100% de la primera hoja, y para abajo no..
  #13 (permalink)  
Antiguo 22/05/2011, 21:21
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 5 años, 9 meses
Puntos: 116
Respuesta: Consulta sobre hoja

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="es">
  4. <head><title>Demo of Flezha Roronoa</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <style type="text/css">
  7. html,body {
  8. margin:0;padding:0;border:0;
  9. height:100%;
  10. background:#00ff00;
  11. }
  12. #conte {
  13. width:70%;
  14. margin:0 auto;
  15. min-height:100%;
  16. background:#ff3443;
  17. }
  18. #algo {
  19. height:1400px;
  20. width:300px;
  21. position:relative;
  22. margin:0 auto;
  23. background:#ffffff;
  24. }
  25. </head>
  26.  
  27. <div id="conte">
  28. <div id="algo">TODO ESTO ES EL CONTENIDO ("supuestamente.")</div>
  29. </div>
  30. </body>
  31. </html>

Saludos
__________________
Programador jQuery & PHP
  #14 (permalink)  
Antiguo 23/05/2011, 09:16
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 6 meses
Puntos: 1008
Respuesta: Consulta sobre hoja

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<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>

<div class="contenedorNoab">
<div class="noab">
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
texto<br /><br /><br /><br /><br /><br /><br /><br />
</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

Última edición por IsaBelM; 23/05/2011 a las 17:00 Razón: error gramatical
  #15 (permalink)  
Antiguo 23/05/2011, 10:39
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 5 años, 9 meses
Puntos: 116
Respuesta: Consulta sobre hoja

en el ejemplo que yo le deje, he corregido eso, mira:
Código CSS:
Ver original
  1. #algo {
  2. height:1400px;
  3. width:300px;
  4. position:relative; // ESTO...
__________________
Programador jQuery & PHP
  #16 (permalink)  
Antiguo 23/05/2011, 13:24
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 6 meses
Puntos: 1008
Respuesta: Consulta sobre hoja

Cita:
Iniciado por ZoroRoronoa Ver Mensaje
en el ejemplo que yo le deje, he corregido eso, mira:
Código CSS:
Ver original
  1. #algo {
  2. height:1400px;
  3. width:300px;
  4. 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
  #17 (permalink)  
Antiguo 23/05/2011, 16:38
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

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
  1. .contenedor{
  2. background-color: #fff;
  3. margin:0 auto;
  4. min-height:100&#37;;
  5. width: 920px;
  6. position: relative;
  7.                 left: 27%;
  8.                 top: 0%;
  9.                 margin-left: -130px;
  10.              
  11. }
  12.  
  13.  
  14. html,body {
  15.     background-image: url(images/fondologo1.jpg);
  16.         background-attachment: fixed;
  17.         margin:0;padding:0;border:0;
  18.         height:100%;
  19. }
  #18 (permalink)  
Antiguo 23/05/2011, 17:01
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 6 meses
Puntos: 1008
Respuesta: Consulta sobre hoja

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
  #19 (permalink)  
Antiguo 23/05/2011, 17:09
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

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
  #20 (permalink)  
Antiguo 23/05/2011, 17:37
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 6 meses
Puntos: 1008
Respuesta: Consulta sobre hoja

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)
  #21 (permalink)  
Antiguo 23/05/2011, 17:51
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

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 :)
  #22 (permalink)  
Antiguo 23/05/2011, 18:37
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 8 años, 1 mes
Puntos: 17
Respuesta: Consulta sobre hoja

no entendi bien, pero quieres hacer una imagen de fondo que nos e mueva?
  #23 (permalink)  
Antiguo 23/05/2011, 20:09
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

quiero una funcion para que un div tenga de height automaticamente toda la web, porque al ponerle 100% solo cubre la primera hoja.....
  #24 (permalink)  
Antiguo 23/05/2011, 20:23
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 5 años, 9 meses
Puntos: 116
Respuesta: Consulta sobre hoja

Cita:
Iniciado por matiasbmx Ver Mensaje
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.
__________________
Programador jQuery & PHP
  #25 (permalink)  
Antiguo 23/05/2011, 20:45
 
Fecha de Ingreso: febrero-2011
Mensajes: 124
Antigüedad: 5 años, 11 meses
Puntos: 4
Respuesta: Consulta sobre hoja

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...
  #26 (permalink)  
Antiguo 23/05/2011, 21:57
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 5 años, 9 meses
Puntos: 116
Respuesta: Consulta sobre hoja

Cita:
Iniciado por matiasbmx Ver Mensaje
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
__________________
Programador jQuery & PHP

Etiquetas: hoja
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:53.