Ayuda con CSS
hola gente. estoy con una maquetacion css, que por fin me es toy poniendo con ella, despues de varios intentos mas o menos fallidos.
estoy montando un site muy sencillo con unos pocos divs, y de momento todo ok, solo que me surge la duda de como hacer que el div del pie de pagina siempre este en el la parte inferior de la ventana.
he buscado temas de diseño liquido un poco por encima, pero hay muchos agugeros y no he encontrado lo que buscaba, si se me ha pasado algo y ya esta pido disculpas.
os muesto el codigo omitiendo los tags que no nos interesan, como los de links y decoracion por ejemplo, asi no se alarga tanto el codigo:
html:
<code><body>
<div id="contenedor_general">
<div id="contenedor_centrado"><img src="img/fons_welcome.jpg" />
<div id="contenedor_links">Descarga/Download <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW" target="_blank">
<br/>Flash Player 8</a></div>
</div>
<div id="contenedor_pie"><a href="http://www.icosmic.com">www.icosmic.com</a></div>
</div>
</body></code>
css:
<code>/* CSS Document */
* { margin:0;
padding:0;
}
/*tags*/
html {
top:0px;
left:0px;
}
/*macroestructuras*/
#contenedor_general {
position: absolute;
width: 100%;
height: 100%;
margin:0px;
background-color:#000000;
border:#FFFFFF solid 1px;
}
#contenedor_centrado {
postion: absolute;
width: 800px;
height:444px;
margin-left: auto;
margin-right: auto;
text-align:center;
padding-bottom:0;
margin-bottom:0;
background-image:url(../img/fons_welcome.jpg);
border:#0000FF solid 1px;
}
#contenedor_links {
position:relative;
width:700px;
height: 50px;
margin-top:445px;
text-align:center;
border:#FF0000 solid 1px;
padding:15px;
margin:auto;
}
#contenedor_pie {
position:aboslute;
width:700px;
height: 50px;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:0px;
text-align:center;
border:#00FF33 solid 1px;
padding:15px;
}</code>
bien, pues lo que me gustaria, es que #contenedor_pie, se me mantenga en la parte inferior de la ventana siempre.
como lo podria hacer?
sigo investigando.
kaax Staff
I love css... jejeje
jaume menos css y más preparar el pisito para montar esa fiesta!!
que te me desconcentras de lo importante!
;)
mendi
Con el flash no se ve bien, mira mejor tu home, al reducir la ventana el footer se solapa, y da igual que actualices, se queda por delante del contenido visible.
Esto sí parece funcionar bien:
http://steve.pugh.net/test/test57a.html
Pero no lo he conseguido adaptar con éxito... :(
jaumeav Plus
en serio q no te va? te miraste el ejemplo que te puse mendi? si abres la primera url q te pongo veras que si se mantiene el footer abajo siempre.
hardface
No se donde leí que el tema del footer es casi imposible sin .js en todos los browsers ¿? es posible¿?
mendi
Gracias chicos, pero ya he usado exactamente ese mismo código y no me funciona bien cuando actualizo la página después de haberla redimensionado.
De todas formas, debería verse bien y no debería hacer falta actualizar porque si a un usuario le da la gana redimensionar la ventana no debería tener el pie por encima del contenido.
jaumeav Plus
http://www.limonbcn.com/cosmic/sitenadal/css/estilsnadalencscosmicinterior.css
el css esta aqui.
zigotica
al redimensionar el tamaño de la ventana no se "traslada" a la informacion que tiene el css sobre la ventana. prueba a redimensionar y hacer un refresh, en teoría deberúía verse el pie donde toca, en el fondo.
jaumeav Plus
wenas mendi.
mirate este link
http://www.limonbcn.com/cosmic/sitenadal/interior.html
si miras el codigo fuente, veras donde esta linkado el css, y veras como esta hecho.
de esta forma quedo bien.
mendi
Voy a rescatar este tema porque no encuentro la solución al tema de lo del pie de página.
En el ejempo de Jaume, funciona aparentemente pero al menos en Firefox si reduces el tamaño vertical de la ventana el pie se solapa al contenido que hay por encima. Esto es exactamente lo que me suele pasar, y aún no he dado con la solución.
Alguna idea??
orange
ozke
OFFTOPIKAZO
<div class="quote">
orange
<blockquote>De nada man</blockquote>
</div>
Ayer me fuí a dormir y tu estabas posteando... hoy me levanto y sigues posteando... tío, o eres un bot o estas muy mal.
/OFFTOPIKAZO
Ambas cosas
XD
jaumeav Plus
weno, aqui esta tal y como dije, la postal digital.
esta acabada, solome falta mirarme bien un ultimo script q no me hace bien el fadeout al final, cuando reproduces de nuevo el flash. Pero weno la semana q viene ya mirarem de nuevo q ahora ya no puedo mas.
http://www.limonbcn.com/cosmic/sitenadal/
esta es.
espero q os guste. Tb la linkare en el post de felicitaciones navideñas, ademas de las fotos de la postal fisica cuando la tenga, espero q la semana q viene.
un abrazo i BONES FESTES!!
:D
ozke
OFFTOPIKAZO
orange
De nada man
Ayer me fuí a dormir y tu estabas posteando... hoy me levanto y sigues posteando... tío, o eres un bot o estas muy mal.
/OFFTOPIKAZO
orange
De nada man
jaumeav Plus
perdona borja, me entro un marronazo en la agencia y no te he podido responder antes.
si me ha funcionado :) gracias.. en cuanto este colgado lo linkare para que lo veais, en el post de felicitaciones navideñas.
un abrazo y gracias :)
orange
Para solucionar eso precisamente es para lo que metes un padding-bottom al contenedor. Me explico:
Cuando tú posicionas el pie de página de manera absoluta lo estás sacando de flujo, de forma que para el resto de elementos es como si no existiera (se meterán por debajo o lo que sea).
Para evitar eso vamos a "aumentar" artificialmente en un tamaño X por debajo el DIV que contenga el pie (padding-bottom: altura_del_piepx;). El contenedor seguirá sin saber que el piede página está ahi, pero dejara un padding vació que ocupa lo mismo, el resultado es que los elementos no ocuparán dicho espacio.
Si estás teniendo problemas para implementar esto, cuelga un ejemplo para que veamos dónde está el error.
PD: ¿No vimos un ejemplo de esto en el seminario de CSS que di en Barcelona?. Me lo apuntaré para el próximo.
jaumeav Plus
ole borja! de pm!
solo que ahora me surge otra duda :P
si hago un resize de la ventana, ahora el pie se pone por encima de todo, entonces.. habria alguna manera de solucionar esto?
se me ocurre que cuando tope el pie con el resto, no pueza seguir yendo por encima del resto y entonces si que ya se quede quieto y si sigues haciendo la ventana mas pequeña desaparezca?
no se si me lio mucho.. o puede q tampoco sea necesario, q nadie se pondra a hacer la ventana tan pequeña.. no?
que hago?
orange
De esto se ha perdido un tema entero
:(
Escribo de corrido, puede que haya algún fallo:
<code>html, body { height: 100%; min-height: 100%; }
body { padding-bottom: 100px; /* Esta tiene que ser la altura del pie */ }
#pie_pagina { position: absolute; bottom: 0px; height: 100px; }</code>
La "esencia" es esa, luego ya lo adaptas tú a tu particular estructura de HTML y CSS.