Floyde
Poster original- 7 de abril de 2005
- Monterrey, México
- Mar 27, 2006
Tengo dos divs. Uno tiene una altura fija y quiero que el otro llene el espacio vertical restante en la ventana. Si configuro la altura del último div en 100%, lo hará a la misma altura que la ventana, pero quiero que sea la altura de la ventana menos la altura del primer div.
Este es el código que estoy usando:
Código:
Vertical div test body { margin:0; padding:0; height:100%; } #div1 { height: 100px; background-color: blue; } #div2 { height: 100%; background-color: green; } También incluí algunas imágenes que muestran lo que quiero hacer y lo que he podido hacer hasta ahora. Gracias por adelantado
Archivos adjuntos
norte
NoNameBrand
- 17 de noviembre de 2005
- Halifax, canadá
- Mar 27, 2006
De lo contrario, no puedo pensar en una forma de conseguir lo que quieres.
stevep
- Oct 13, 2004
- Reino Unido
- Mar 27, 2006
Tratar:
Documento sin titulo
a
b
c
D
Y
ps. Hice trampa al hacerlo en DW, agregando algo de contenido a la segunda capa y luego jugando con el código: a DW le gusta que las cosas tengan algo de relleno alrededor de los bordes y aunque puede especificar en los cuadros de diálogo que desea una capa comience en 0px desde la esquina superior, debe decirlo dos veces, usando la Vista de código. De todos modos tenía que hacerlo.
Floyde
Poster original- 7 de abril de 2005
- Monterrey, México
- Mar 27, 2006
NoNameBrand dijo: ¿Por qué no anidar el primero dentro del segundo?
De lo contrario, no puedo pensar en una forma de conseguir lo que quieres.
Gracias, eso funciona visualmente, pero el segundo div será un contenedor para este diseño, por lo que todavía necesito que tenga las dimensiones adecuadas para que su contenido pueda heredarlas.
Entonces, ¿tal vez simplemente no sea posible? ¿Quizás necesitaré usar un poco de javascript para que funcione?
stevep dijo: Prueba:Gracias, pero no pude hacerlo funcionar, ¿qué navegador usaste?
Floyde
Poster original- 7 de abril de 2005
- Monterrey, México
- Mar 27, 2006
Ok, aquí hay una foto de mi objetivo final. Hasta ahora lo he estado haciendo gradualmente, así que quizás el problema sea mi enfoque inicial. Entonces, ¿cómo abordarían esto (solo necesito ideas)? ¿Usarías css puro o cederías a tablas o marcos?
Archivos adjuntos
stevep
- Oct 13, 2004
- Reino Unido
- Mar 27, 2006
La parte con la que tienes que jugar es esta:
# Layer1 {
posición: absoluta;
izquierda: 0px;
superior: 0px;
ancho: 100%;
altura: 180px;
índice z: 1;
color de fondo: # 99CCFF;
}
Desbaste su página en una hoja de papel para que obtenga las posiciones correctas, y eso le dará la posición de la esquina superior izquierda de cada capa. La altura de la capa 1 determinará la posición inicial de la capa 2; en este caso, la capa 2 debe tener unsuperior: 180px;línea de código.
Si quieres las 3 capas como las mostraste en tu última publicación, entonces la capa más a la izquierda será:
# Layer1 {
posición: absoluta;
izquierda: 0px;
superior: 0px;
ancho: 200px;
altura: 100%;
índice z: 1;
color de fondo: # 336699;
}
y la capa superior RH será:
# Layer1 {
posición: absoluta;
izquierda: 200px;
superior: 0px;
ancho: 100%;
altura: 180px;
índice z: 2;
color de fondo: # 33CCFF;
}
y la tercera capa para llenar el resto de la ventana (sin embargo, cambia de tamaño) debería ser algo como:
# Layer1 {
posición: absoluta;
izquierda: 200px;
superior: 180px;
ancho: 100%;
altura: 100%;
índice z: 3;
color de fondo: # 99CCFF;
}
Es mejor poner algo de contenido ficticio en cada capa si está usando Dreamweaver, en caso de que la capa se reduzca a nada en la vista de página, de ahí el 'a, b, c, etc.' en el html original anterior.
ps no soy un experto, puede que me equivoque, pero espero que ayude. Lo que puedo decir es que mi primer código parece funcionar. Personalmente, no anidaría capas si pudiera ayudar, pero soy solo yo, solo hago lo simple. norte
NoNameBrand
- 17 de noviembre de 2005
- Halifax, canadá
- Mar 27, 2006
Esto es lo que haría:
Código:
foo crees!
-
- 14 de junio de 2003
-
-
- MD / VA / DC
- Mar 27, 2006
Desconcepto ...
Echa un vistazo a FlashObject y en la descarga hay un código para hacer un div a pantalla completa ... tal vez se pueda adaptar a tu gusto.
http://blog.deconcept.com/flashobject/ Floyde
Poster original -
- 7 de abril de 2005
-
-
- Monterrey, México
- Mar 28, 2006
Gracias por toda la ayuda, chicos, pero me acabo de dar cuenta de que el diseño exacto que quiero es imposible de lograr con una combinación de anchos / alturas fijas y porcentajes. Lo reescribí usando solo porcentajes y ahora funciona. Si está interesado en el marcado, hágamelo saber y lo publicaré. stevep
-
- Oct 13, 2004
-
-
- Reino Unido
- Mar 28, 2006
floyde dijo: Si está interesado en el marcado, hágamelo saber y lo publicaré.
Me gustaría echarle un vistazo si tienes tiempo para publicar de nuevo.
NoNameBrand dijo: ¿Qué es esto de las 'capas'? ¿Es eso Dreamweaver-esque para 'romper cosas realmente bien'?
Bueno, no sé sobre las 'cosas que rompen', pero supongo que sospechaste que no soy un fanático de CSS: las capas son un nombre conveniente que DW da a las cosas que creo que deberían llamarse 'elementos posicionados en CSS', y Creo que los llaman así para que las personas como yo con experiencia en DTP / Photoshop se sientan un poco más cómodas. Mirando el código que has incluido en tu publicación NoNameBrand, es mucho más elegante que el mío; tendré que intentarlo para entender realmente la etiqueta div. Gracias por el OP y las respuestas. norte NoNameBrand
-
- 17 de noviembre de 2005
-
-
- Halifax, canadá
- Mar 28, 2006
stevep dijo: Bueno, no sé sobre las 'cosas de ruptura', pero supongo que sospechaste que no soy un boff de CSS: las capas son un nombre conveniente que DW le da a las cosas que creo que deberían llamarse 'elementos posicionados en CSS '
También tenían índices Z apilables, que colocan las cosas de adelante hacia atrás en una página. He visto capas DW antes que rompieron por completo un sitio, pero por lo demás no he tenido mucha exposición a ellas (eso fue suficiente, de verdad).
Tendré que intentar entender realmente la etiqueta div.
A es solo un bloque arbitrario, no significa nada semánticamente, de la misma manera que unhace (un párrafo de texto). Aes la misma idea, pero para cosas en línea (como un etiqueta, pero de nuevo, sin semántica).
Lo más fácil para aprender estas cosas es dejar de usar Dreamweaver. Diseño mis sitios en Photoshop y luego guardo los elementos gráficos que quiero, junto con anotar códigos de color y algunas medidas aproximadas de píxeles para fines de alineación, y luego codifico el sitio en TextWrangler o VIM. Floyde
Poster original -
- 7 de abril de 2005
-
-
- Monterrey, México
- Mar 28, 2006
stevep dijo: Me gustaría echarle un vistazo si tienes tiempo para publicar de nuevo.
Aquí está, hay un poco de español allí, espero que no sea demasiado confuso:
Código:Grand Scheme html {altura: 100%; } cuerpo {margen: 0; acolchado: 0; altura: 100%; ancho: 100%; } #izquierda, #derecha {flotar: izquierda; } #izquierda {altura: 100%; color de fondo: naranja; ancho: 10%; } #derecha {altura: 100%; posición: relativa; ancho: 90%; } #top {color de fondo: azul; altura: 10%; } #fotos {posición: relativa; altura: 90%; } #foto_sup_izq, #foto_sup_der, #foto_inf_izq, #foto_inf_der {altura: 50%; ancho: 50%; desbordamiento: automático; posición: absoluta; } #foto_sup_izq, #foto_sup_der {top: 0; } #foto_sup_der, #foto_inf_der {left: 50%; } #foto_inf_izq, #foto_inf_der {top: 50%; } 
Archivos adjuntos
Entradas Populares