Foros del Web » Creando para Internet » CSS »

Tratamiento del footer en css

Estas en el tema de Tratamiento del footer en css en el foro de CSS en Foros del Web. Hola, si me pueden ayudar. Quiero mandar el footer al fondo o sea debajo de una imagen flotante (gif animado). Con el header no tengo ...
  #1 (permalink)  
Antiguo 25/02/2011, 14:11
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Tratamiento del footer en css

Hola, si me pueden ayudar. Quiero mandar el footer al fondo o sea debajo de una imagen flotante (gif animado). Con el header no tengo problema, pues la imagen pasa por encima y se ve bien. El "drama" viene cuando se desplaza por lado del footer y este tapa la imagen.
El archivo style.css contiene lo siguiente:

/* CSS RESET */
html{color:#000;background:#FFF;}body,div,dl,dt,dd ,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset ,

legend,input,textarea,p,blockquote,th,td{margin:0; padding:0;}table{border-collapse:collapse;border-sp

acing:0;}fieldset,img{border:0;}address,caption,ci te,code,dfn,em,strong,th,var{font-style:normal;font

-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font

-weight:normal;}q:before,q:after{content:'';}abbr,a cronym {border:0;font-variant:normal;}sup

{vertical-align:text-top;}sub

{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:

inherit;}legend{color:#000;}

body {font:13px/1.231

arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-f

amily:monospace;line-height:100%;}
/* CSS RESET */


body {
text-align:center;
color:#000;
}
a {
text-decoration:none;
color:#9b3535;
}
a:hover {
text-decoration: underline;
color: #CC0000
}
#wrap {
width:900px;
text-align:left;
margin:0 auto;
background:url(images/bg.jpg);
}

.fl{ float:left}
.fr{ float:right}
.clearfix{ clear:both}


/* header */
#header { position:relative;height:111px; background:url(images/hd.jpg); }

#logo {position:absolute; top:30px; left:80px}
#logo h1 {
font-size:34px;
color: #9B3535
}
#logo div {
padding-left:100px
}
#nav { position:absolute; top:35px; left:420px; background:url(images/nav.jpg);

width:451px;height:30px; line-height:30px; padding:0 0 0 20px }
#nav li {float:left; font-weight:700; width:80px; padding:0 5px }
#nav a {text-decoration:none; display:block; text-align:center; color:#fff}
#nav a:hover {background: #AA4479; color:#000000}
/* content */

.img { margin:0px 0 0 70px }
.main {width:440px; font-family:Verdana, Arial, Helvetica, sans-serif;

background:url(images/box.jpg); color:#000;}
#text {margin:0px 0 0 65px }
#text p {margin:0 auto; width:420px; }
#text h2 {font-size:30px; padding:20px 0 20px 0}
#text img {margin:10px 0 0 0}
#col {margin:30px 0 10px 65px ;width:300px; background:url(images/col.jpg); width: 419px;

height:161px ; }

#col div {width: 150px; margin: 20px 0 0 10px; display:inline}
#col .first {margin: 20px 30px 0 20px;}
#col li{line-height:20px; list-style:inside disc;color:#9b3535;}
#col a { color:#9b3535; text-decoration:underline;}
.side { width:320px;display: inline;}
.side h2 {font-size:22px}
.side li {line-height:20px; list-style:inside disc; color:#9b3535; }
.side ul {margin:20px 0 30px 20px}
#top {margin-top:20px}
/* footer */
#footer { background:url(images/ft.jpg); height:100px; position:relative}
#ftinner{ position:absolute; bottom:20px; width:680px; margin-left:80px; color:#E98383}
#ftinner a {color:#FFFFFF}
.ftlink {width:500px;}

Desde ya muy agradecido y perdonen porque no entiendo mucho de los estilos.
Gracias a todos.
  #2 (permalink)  
Antiguo 25/02/2011, 14:14
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Tratamiento del footer en css

ya intentaste ponerle a la imagen un z-index ?
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 25/02/2011, 14:16
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: Tratamiento del footer en css

No lo hice, desconozco el procedimiento, si me puedes explicar. Gracias.
  #4 (permalink)  
Antiguo 25/02/2011, 14:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Tratamiento del footer en css

z-index

Dice el script que es una respuesta demasiado corta, así que lo siguiente no tiene otra finalidad que acallar la ventanita de los ****
<p>Lorem ipsum dolor sit amet consectetuer Cum risus ipsum sagittis ac. Dui pede dictumst elit condimentum et magna nisl quis mauris at. Id id amet sed Vestibulum ante Aliquam et sagittis semper consequat. Consectetuer pretium dignissim adipiscing sem pellentesque Sed tincidunt in at risus. Elit vitae Nullam ullamcorper egestas convallis Sed lorem Pellentesque et vitae. Odio eleifend eu tellus tempus nulla pharetra tellus urna.</p>
<p>Vestibulum magna Proin pede amet eros Curabitur hendrerit urna Nullam elit. Lorem sollicitudin elit adipiscing at ante non Nam nulla leo consequat. Nunc justo laoreet massa venenatis vel tincidunt eu ut nunc sed. Nullam dictum lacus Morbi nulla accumsan quis quis sociis wisi wisi. Eget malesuada ut id lacinia odio Nulla.</p>
<p>Vestibulum odio Nullam turpis Nullam dui libero lacus nunc nonummy vitae. Sed Nam faucibus Lorem est tempus Cras id nunc faucibus magnis. Amet a justo nisl ligula tellus sit a vitae eleifend elit. Curabitur ornare justo pretium dui montes mauris vel et sed Donec. Tortor sem dictum nunc interdum at In libero Sed nascetur tempor. Aliquam nibh turpis dui nisl id orci non.</p>
<p>Elit pharetra justo Suspendisse Nam sem Pellentesque nibh malesuada Vestibulum pulvinar. Facilisi pellentesque ornare nunc enim congue vitae felis sagittis condimentum nibh. Quis pellentesque lobortis nec Nam nec nec quis pulvinar scelerisque lacus. Venenatis Lorem dignissim orci ut quis risus faucibus et justo a. Pede Quisque Cras enim Nunc hendrerit purus convallis sapien.
</p>
  #5 (permalink)  
Antiguo 25/02/2011, 14:32
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: Tratamiento del footer en css

para una mejor comprension, les dejo la pagina que tiene el problema:
http://www.ieeunlar.comze.com/indexmuleto.html
con ella trato de ayudar a mis alumnos. Hacia el pie, cuando baja la imagen, podran ver que el footer la tapa. eso quiero corregir. Gracias por tanta amabilidad. Jose
  #6 (permalink)  
Antiguo 25/02/2011, 14:34
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Tratamiento del footer en css

Cita:
Iniciado por kseso? Ver Mensaje
z-index

</p>
Ja ja

con la excepcion de ese cierre de parrafo que se te quedo, es la respuesta mas original que he visto
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #7 (permalink)  
Antiguo 25/02/2011, 14:36
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: Tratamiento del footer en css

No se si estoy desubicado con mi tema, pero si me pueden ayudar de 10. Jose
  #8 (permalink)  
Antiguo 25/02/2011, 14:41
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Tratamiento del footer en css

amigo
aqui esta lo que te esta pasando. Solo sigue instrucciones
http://www.sidar.org/recur/desdi/mcs...os/zindex.html
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #9 (permalink)  
Antiguo 25/02/2011, 14:47
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: Tratamiento del footer en css

Como no entiendo mucho, no se donde debo incluir y modificar la propiedad zindex. Si lo debo hacer en el archivo style.css o bien en el gif animado que preparé. Me perdi... disculpas
  #10 (permalink)  
Antiguo 25/02/2011, 14:48
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: Tratamiento del footer en css

Quizas si miras mi pagina te oriente un poco mas.
http://www.ieeunlar.comze.com/indexmuleto.html
  #11 (permalink)  
Antiguo 25/02/2011, 14:50
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Tratamiento del footer en css

se lo pones a tu gif. Si tienes las propiedades en la hoja css pues lo pones ahi, si no, se lo pones a la imagen en el html.
Si esta contenido por un div, se lo pones al div.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #12 (permalink)  
Antiguo 25/02/2011, 14:52
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: Tratamiento del footer en css

Ok veo y aviso. gracias
  #13 (permalink)  
Antiguo 25/02/2011, 14:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Tratamiento del footer en css

edite su css y a #registerbar añada la propiedad que le indica gVnom

Y una de propina:
Si es para ayudar a sus alumnos, procure evitar en un documento con doctype xhtml cosas como:
Código HTML:
Ver original
  1. <div align="center">
  2.     <table...
Esta página le será de ayuda: http://validator.w3.org/check?verbos...dexmuleto.html

gVenom:
ese cierre de párrafo quedó sin colorear para que se notase que hay texto en blanco.
  #14 (permalink)  
Antiguo 25/02/2011, 15:01
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Tratamiento del footer en css

QUOTE=kseso?;3760227]

gVenom:
ese cierre de párrafo quedó sin colorear para que se notase que hay texto en blanco.[/QUOTE]

[ mmm , si no, yo lo hubiera tapado todo. Que se orienten con el exceso de espacio en blanco jaja
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #15 (permalink)  
Antiguo 25/02/2011, 15:10
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: Tratamiento del footer en css

TEMA SOLUCIONADO QUEDO PERFECTO. Gracias por tanta sabiduria, yo no conozco mucho de esto. Un saludo para Ud. desde La Rioja, Argentina. Jose
  #16 (permalink)  
Antiguo 25/02/2011, 15:12
 
Fecha de Ingreso: enero-2011
Mensajes: 41
Antigüedad: 6 años, 11 meses
Puntos: 1
Respuesta: Tratamiento del footer en css

Si, asi es, mis alumnos no son de informatica. Y el tema es sobre educacion. Por esa razon si hay errores, de hecho si los hay en el sitio, no los observaran. Igualmente muchas gracias por todo.
  #17 (permalink)  
Antiguo 27/02/2011, 03:41
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Tratamiento del footer en css

Hola:

Cita:
Iniciado por josho Ver Mensaje
Por esa razon si hay errores, de hecho si los hay en el sitio, no los observaran.
Patético. En el pais de los ciegos el tuerto es el Rey.

Saludos.


Etiquetas: footer, tratamiento
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 11:21.