Foros del Web » Creando para Internet » CSS »

Altura minima con CSS

Estas en el tema de Altura minima con CSS en el foro de CSS en Foros del Web. Bueno estube buscando en la red sobre como resolver el tema de poder hacer que el CSS le indique una altura minima a una capa ...
  #1 (permalink)  
Antiguo 04/06/2009, 23:52
Avatar de Dariusss  
Fecha de Ingreso: octubre-2000
Ubicación: Miami
Mensajes: 46
Antigüedad: 17 años, 1 mes
Puntos: 1
Altura minima con CSS

Bueno estube buscando en la red sobre como resolver el tema de poder hacer que el CSS le indique una altura minima a una capa (en este caso mi id=="Shadow") para evitar que la pagina se acorte y se alargue segun el contenido. Lo logre o crei lograrlo agregando "min-height:800px;". Se lo tuve que poner tanto al "Shadow" como al "Wrapper"... para que hiciera lo mismo. Como veran estoy empezando en esto del CSS.

Ahora el problema que tengo es que incluso teniendo todos los

height:auto;

Pasa esto http://www.arnaezcs.com/portfolio.html

jeje... Extraño las tablas donde le ponia 500 a una celda y si el contenido era mayor se estiraba sin problema. Con esto del CSS es genial pero uno se vuelve loco para lograr lo mismo.

Gracias por su ayuda de antemano amigos.
__________________
La creatividad hace que el hombre crezca. La rutina hace todo lo contrario... creo.
  #2 (permalink)  
Antiguo 05/06/2009, 01:24
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Altura minima con CSS

Propiedad min-height:medida; Aunque algunas versiones de IE no saben como trabajarla, pero ya nos contaras si te sirve.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 05/06/2009, 01:54
Avatar de Dariusss  
Fecha de Ingreso: octubre-2000
Ubicación: Miami
Mensajes: 46
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: Altura minima con CSS

Si por eso. Si te pudiste ver el link... veras lo que pasa. El CSS comienza asi
Código:
#shadow {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/shadow.jpg);
	background-repeat: repeat-y;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
.shadow {
	width:1000px;
	min-height:800px;
	height:auto;
}
/* for Internet Explorer */
/*\*/
* html .shadow {
	height: auto;
}
/**/
#Wrapper {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	display: inherit;
	height: auto;
}
.Wrapper {
	width:1000px;
	min-height:800px;
	height:auto;
Parece que funcionara pero cuando una capa supera el espacio minimo, este no aumenta. O sea es como si lo hubiera dado una medida fija. Mi pregunta es Como darle a un Div la propiedad de alargarse segun su contenido? Me esta pasando en otras secciones donde tengo capas dentro de otras y al meterle contenido a estas ultimas como que son independientes y no hacen crecer a la que los contiene.

Tendra que ver algo con la propiedad de float? o que puede ser?
__________________
La creatividad hace que el hombre crezca. La rutina hace todo lo contrario... creo.
  #4 (permalink)  
Antiguo 05/06/2009, 02:23
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Altura minima con CSS

Tal vez sea por esto:

Código:
#Content-portfolio {creativeweb.css (línea 298)
background-image:url(../images/bigportfolio.jpg);
background-position:left bottom;
background-repeat:no-repeat;
float:left;
height:500px;
width:960px;
}
El contenido no puede crecer mas alla de los limites aplicados al "contenedor padre". Por cierto, height:auto; no es necesario, ya que el comportamiento por defecto es adaptar la altura al contenido.
__________________
- León, Guanajuato
- GV-Foto
  #5 (permalink)  
Antiguo 05/06/2009, 03:24
Avatar de Dariusss  
Fecha de Ingreso: octubre-2000
Ubicación: Miami
Mensajes: 46
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: Altura minima con CSS

Gracias por la ayuda Triby! ... pero no se... le quite el height:auto y sigue haiendo lo mismo. No se que estoy haciendo mal.

Saludos!
__________________
La creatividad hace que el hombre crezca. La rutina hace todo lo contrario... creo.
  #6 (permalink)  
Antiguo 05/06/2009, 03:32
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 3 meses
Puntos: 2112
Respuesta: Altura minima con CSS

Elimina el height:500px; de #Content-portfolio, con eso podras avanzar un poco mas.

Como sugerencia adicional, corrige los errores que tienes de HTML y CSS, usando los validadores
xHTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/
__________________
- León, Guanajuato
- GV-Foto
  #7 (permalink)  
Antiguo 05/06/2009, 05:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Altura minima con CSS

Las capas cajas contenedoras que se sacan del flujo del html como sucede cuando se "flotan" no hacen crecer a su padre. Para que crezca hay que o bien añadir un "div" antes de cerrar el padre que haga el corte (clear:both) o bien, darle al padre la propiedad: "hoverflow: auto || hidden". Pero si tienes definida unas medidas, eso provoca que aparezcan las barras de scroll.

No se si eso te arreglará el entuerto, no vi tu página.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 05/06/2009 a las 05:38
  #8 (permalink)  
Antiguo 05/06/2009, 05:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Altura minima con CSS

Bueno, si haces lo anterior, te vas a encontrar con unas pequeñas sorpresas por el uso de la posición absoluta y otras cosillas.

Intenta corregirlas por tí antes de seguir leyendo

Código css:
Ver original
  1. #shadow {/*creativeweb.css (línea 3)*/
  2. background: url(../images/shadow.jpg) repeat-y;
  3. height:auto;
  4. margin:0 auto;
  5. overflow:hidden;
  6. position:relative;
  7. width:1000px;
  8. }
  9.  
  10. /* Y #foot lo tienes nombrado 2 veces en el css */
  11.  
  12. #foot {/*creativeweb.css (línea 106)*/
  13. background-color:#000000;
  14. height:65px;
  15. margin:10px auto 0;
  16. position:relative;
  17. text-align:center;
  18. width:960px;
  19. }
  20. .foot {/*creativeweb.css (línea 120)*/
  21. border-top:1px solid #CCCCCC;
  22. clear:both;
  23. color:#666666;
  24. font-family:"Lucida Grande","Lucida Sans Unicode", Arial, Verdana, sans-serif;
  25. font-size:10px;
  26. padding: 10px 0;
  27. }

Quizás lo anterior te produzca algún pequeño descuadre en otro elementos. No he mirado detenidamente el resto de la página.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 05/06/2009, 14:42
Avatar de Dariusss  
Fecha de Ingreso: octubre-2000
Ubicación: Miami
Mensajes: 46
Antigüedad: 17 años, 1 mes
Puntos: 1
Respuesta: Altura minima con CSS

Mil gracias! con esos ultimos comentarios encontre el error. Saque muchos float y se soluciono el tema. De nuevo... muchas gracias!


EDITO: Perdon... se soluciono esa pagina larga pero ahora lucho con la portada y las demas paginas cortas.
__________________
La creatividad hace que el hombre crezca. La rutina hace todo lo contrario... creo.

Última edición por Dariusss; 05/06/2009 a las 14:49
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 13:28.