Diseño líquido/relativo
Buenas, tengo un proyecto en mente y había pensado en (xhtml + css) hacerlo líquido. Siempre he trabajado en fijo, con px, alguien puede darme algunos enlaces, consejillos (típicos fallos.... IE vs FF)
He estado buscando info y me he hecho algunas cosillas ya, pero sobre todo no entiendo muy bien el tema de los height, me explico. El ancho lo hago líquido y perfecto pero tengo que poner el alto en px porque en % no me lo pilla, esto es así?
Por otra parte cuando he hecho algo en fijo siempre las capas las he ido flotando a un lado (left normalmente), ¿con % es necesario hacer esto? ¿es necesario decirle a la capa un display específico? ¿Todas las capas deben ir en %? ¿Elementos de separación padding y margin también o para esto y tipografías la unidad de medida em? ... La verdad tengo demasiadas preguntas
Saludos y gracias primero por leerme y muchas gracias si me respondes ^^!!
viroc
Por fin he solucionado el problema, he tenido que quitar los valores absolute y dejar las capas principales en relativo con propiedades display: block y display:inline según la necesidad. Lo que no he conseguido es hacer que el footer quede siempre pegado a la línea de abajo (bottom: 0)
Saludos y gracias por las respuestas
viroc
Respondo aquí también:
Lo de posicionar en absoluto dentro de una capa con relative es porque si lo hacía con float (que es como lo hago con ancho fijo) se descuadraba en varias resoluciones. ¿Hay otra forma? Muchas gracias por tu tiempo!!!
En cuanto a lo de las etiquetas html, si el código lo pongo entre code funciona igual que si no lo pusiera --> no se ven las etiquetas.
Gracias por tu tiempo, un saludo!
ainiesta
asi por encima y sin mirar mucho porque posicionas en absoluto? si no me equivoco el pie y los contenidos no estan en el mismo flujo de pagina asi que es normal que el pie no baje, ya te digo que no he mirado mucho pon bien lo del html y despues de comer le hecho un vistazo
ainiesta
Si no me equivoco el foro debe haceptar hml asi que mete el html de tu codigo entre las etiquetas de code
viroc
Dios, la que estoy liando... disculpad, el html quitando las etiquetas:
div id="contenedor"
div id="cabecera"
h1 Lorem /h1
/div
div id="contenido"
div id="contenido-left"
h2 Ipsum /h2
/div
div id="contenido-center"
Dolor
/div>
div id="contenido-right
h2 Sit /h2
/div
/div>
div id="pie"
p Amet, consecteteur adipiscing elit /p
/div
/div
Lo he intentado pero me sale como al principio, el html es el de arriba pero sin .Lo de posicionar en absoluto dentro de una capa con relative es porque si lo hacía con float (que es como lo hago con ancho fijo) se descruadraba en varias resoluciones. ¿Hay otra forma? Muchas gracias por tu tiempo!!!
viroc
Ok, disculpadme. Gracias por interesaros!
Un resumen del html:
<div id="contenedor">
<div id="cabecera">
<h1> Lorem </h1>
</div>
<div id="contenido">
<div id="contenido-left">
<h2> Ipsum </h2>
</div>
<div id="contenido-center">
<h2> Dolor </h2>
</div>
<div id="contenido-right">
<h2> Sit </h2>
</div>
</div>
<div id="pie">
<p> Amet, consecteteur adipiscing elit </p>
</div>
</div>
La css más o menos:
* {
margin:0;
padding:0;
}
html {
display: block;
margin: 0;
padding: 0;
border: 0 none;
}
body {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
font-size: 95%;
}
div#contenedor {
width: 100%;
min-width: 800px;
}
div#cabecera {
width: 100%;
min-height: 100px;
position: relative;
}
div#contenido {
width: 100%;
margin-bottom: 100px;
min-height: 400px;
height: auto!important;
height: 400px;
position: relative;
}
div#contenido-left {
position: absolute;
width: 20%;
margin: 0 2% 0 0;
min-height: 400px;
overflow: hidden;
}
div#contenido-center{
width: 61%;
min-height: 400px;
position: absolute;
left: 22%;
margin: 0 1% 0 0;
padding: 0 0 5% 0;
}
div#contenido-right {
left: 84%;
position: absolute;
width: 16%;
min-height: 400px;
height: auto!important;
height: 400px;
}
div#pie {
width: 100%;
min-height: 50px;
padding: 0.8em 0;
position: relative;
}
Estoy haciendo algo mal seguro, lo que no sé tampoco es si esta forma de trabajar es correcta. Muchas gracias de nuevo por vuestra atención.
Saludos
ainiesta
es que asi sin ver el codigo...
Juanma
Sin tener el código disponible es un poco dificil saberlo, pero prueba a ponerle al pie clear:both
viroc
Buenas retomo el hilo para intentar resolver una duda que me está dejando frito....
El layout de la web es muy sencillo --> http://s1.subirimagenes.com/imagen/previo/thump_1238611ejemo1.gif
Existe una capa contenedora que contienen los elementos que se ven. Existe otra capa contenedora que contiene lo que sería el contenido (menu - cuerpo - enlaces) dejando a parte la cabecera y el pié, esa capa contenedora tiene position relative y los 3 elementos contenidos position absolute.
El problema está cuando quiero que el contenido (cuerpo) crezca, el pié no baja y se queda ahí, he probado con casi todo y no encuentro la solución. Decir que la capa contenedora principal no tiene nada en especial y que cabecera, contenido y pié están con position: relative.
¿Qué estoy haciendo mal?
Muchas gracias de antemano, de verdad que me tiene frito...
Saludos
viroc
Retomo el hilo para intentar resolver una duda que me está dejando frito...
La estructura del layout es muy sencilla ---> http://s1.subirimagenes.com/imagen/previo/thump_1238611ejemo1.gif
Existe una capa contenedora que contienen los elementos que se ven. Existe otra capa contenedora que contiene lo que sería el contenido (menu - cuerpo - enlaces) dejando a parte la cabecera y el pié, esa capa contenedora tiene position relative y los 3 elementos contenidos position absolute.
El problema está cuando quiero que el contenido (cuerpo) crezca, el pié no baja. Decir que cabecera, contenido y pie están con position: relative.
Saludos y gracias de antemano!!!
viroc
Muchas gracias a los dos !!
Estéticamente para mí no hay color y prefiero un diseño fijo, pero creo que en más de un proyecto lo voy a necesitar. La diferencia entre elástico y líquido es la unidad de medida, ¿no?.
Voy a seguir con esto y seguiré publicando por aquí mas cosillas y soluciones que encuentre.
Lo que sí veo en webs supuestamente líquidas es que todas acaban utilizando unidades fijas en muchos elementos.
En fin, gracias de nuevo.
Saludos
hartum
yo te voy a dar unos consejos:
Los textos que ocupan de lado a lado de la pantalla son bastante incomodos de leer, procura que tenga un ancho fijo con bastante padding para que "respiren" a cualquier tamaño.
En cuanto a posicionamiento, haz un gran contenedor con position:relative y dentro podras meter divs con posicion:absolute; esto te permitira hacer cosas como meter dentro una capa con este CSS:
right: 10px;
left;10px;
top:10px;
bottom:10px;
background-color: #FF0000;
Y consegurias una capa que se adpata "elasticamente" a su contenedor, pero que siempre guarda una distancia relativa a el de 10px;
txuma Plus
Personalmente huiría de un diseño puramente líquido. Esto puede dar para una discusión más larga sobre si es mejor diseño fijo, líquido, elástico o una mezcla de varios.
De todos modos, si te inclinas por hacer algo que escale, yo miraría la opción de hacerlo elástico (relativo al tamaño de la tipografía), o en todo caso una mezcla líquido+elástico.
viroc
up!!!