CSS - PIE DE PAGINA FIJO ABAJO

 
Vista:

PIE DE PAGINA FIJO ABAJO

Publicado por Miguel Hernandez (1 intervención) el 17/10/2005 15:30:20
Hola!!

Estoy creando una pagina en CSS para unos amigos y tengo un problema haciendo que el pide de pagina aparezca SIEMPRE FIJO en la parte de abajo de la pantalla.

Si en alguna pagina no hay mucho contenido en el div donde pongo el texto entonces el copyright aparece algo subido con lo que el disenio queda mal.

Con un ejemplo se ve mucho mejor:

En esta primera pagina el copyright esta bien situado por que el div con el texto tiene contenido suficinete para hacer que el copyright aprarrezca al final.

PAGINA1: http://www.ilikecasinos.com/phg/phg.html

Sin embargo en esta el copyright se sube un poco y queda mal.

http://www.ilikecasinos.com/phg/phgcontacto.html

Alguien podria ayudarme?????
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:PIE DE PAGINA FIJO ABAJO

Publicado por Daniel Ulczyk (149 intervenciones) el 17/10/2005 18:30:53
No he analizado a fondo el diseño de tu página, así que lo que te comento tendrás que comprobarlo por vos mismo; sólo te doy una idea.
Esto es, diseñar con un <div> que contenga todo el diseño y este div, digamo "contenido" debería tener esta definición:

#contenido {
height: 100%;
width: 100%;
}

Espero te resulte práctica la idea.
Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:PIE DE PAGINA FIJO ABAJO

Publicado por Reynier Matos Padilla (1 intervención) el 15/12/2007 22:59:16
Te recomiendo este artículo que habla sobre cómo posicionar correctamente un pié de página:

http://www.estadobeta.com/2007/01/19/el-pie-de-pagina-al-pie-de-la-pagina/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:PIE

Publicado por Jesús Joel Culqui Vidarte (1 intervención) el 27/04/2012 20:59:12
Hola que tal aqui tienes la solución

en el CSS pon esto:
1
2
3
4
5
6
#piedepagina{
width:800px; <!--Esto es referencial de mi pagina ;) -->
position: absolute;
bottom: 0 !important;
bottom: -1px;
}

y el <div> debería de quedarte así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div id="container">
<div id="cabecera"><img src="img/Autocopia_de_seguridad_debanner.jpg" width="800" height="120" alt="Bodega" border="0"/></div>
<div id="menu">
<a href="index.php" class="menuselec">Inicio</a>&nbsp;|
<a href="productos.php" class="enlacenav">Productos</a>&nbsp;|
<a href="nosotros.php" class="enlacenav">Nosotros</a>&nbsp;|
<a href="#" class="enlacenav">Localizaci&oacute;n</a>&nbsp;|
<a href="servclient.php" class="enlacenav">Servicio al cliente</a>
</div>
<div id="cuerpo">
 <div id="lateral">
    <div>
    <!--Inicia-->
    Holaaa
    <!--Termina-->
    </div>
 </div> <!--termina div lateral -->
 <div id="otrolado">
    <!--Empieza-->
    kjhkjkjkjkjkjkjkj
    <!--Termina-->
 </div>
 <div id="principal">
    <!--Empieza-->
    <p>jhdkjsdkjsdkjsdksjdksjdksjdksjdksdjskdjskjdskjdskdsdsdsdsdsdsssssssssssss1</p>
    <p>jhdkjsdkjsdkjsdksjdksjdksjdksjdksdjskdjskjdskjdskdsdsdsdsdsdsssssssssssss1</p>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <!--Termina-->
</div><!--Termina div principal-->
</div><!--Termina div cuerpo-->
    <div id="piedepagina"><!--Empieza div pie de página-->
      <img src="img/iconos/piepag.jpg" alt="pie de página" />    </div>
  <!--Termina div pie de página-->
</div>

Te dejo tambien mi css completo :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
body{
background:#FDFDFD;
font-family:verdana;
font-size:12px;
color:#666666;
margin:10px 0px 20px 0px;
text-align:justify;
behavior: url(csshover3.htc);
height: 100%;
}
#container{
text-align:left;
width:800px;
background:#FFFFFF;
margin:auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
 
}
#cabecera{
height:120px;
width:800px;
}
#menu{
background:#000000;
padding: 1px 10px 1px 400px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
color:#FFFFFF;
font-family:verdana;
font-size:12px;
}
 
A.enlacenav,A.enlacenav:LINK,A.enlacenav:VISITED{
color: #FFFFFF;
text-decoration:none;
}
A.enlacenav:FOCUS,A.enlacenav:ACTIVE{
color:#FFFFFF;
background:#FF0000;
border-radius: 0px 10px 0px 10px !Important;
}
A.enlacenav:HOVER{
color:#FFFFFF;
background:#FF0000;
border-radius: 0px 10px 0px 10px;
border-bottom:1px solid;
}
A.menuselec{
color:#FFFFFF;
text-decoration:none;
background:#FF0000;
border-radius: 1px 7px 1px 7px;
}
#cuerpo{
    margin: 10px 0px 10px 0px;
	height:100%;
}
#lateral{
    width: 135px;
    background:#FFFFFF;
    float:left;
	margin:auto;
}
#otrolado{
    width: 145px;
    background:#FFFFFF;
    float: right;
}
#principal{
    margin-left:140px;
	margin-top:auto;
    background-color: #ffffff;
    padding: -10px 0px 0px 0px;
    width: 510px;
	text-align:justify;
	_height:1%;
	height:1%;
}
#piedepagina{
width:800px;
position: absolute;
bottom: 0 !important;
bottom: -1px;
}
 
h1.underline {
  background:url(../img/iconos/underline.jpg) bottom left no-repeat;
  font-family: georgia, "times new roman", times, serif;
  font-weight: lighter;
}
p{
margin:0px;
padding:0px 0px 0px 0px;
text-align:justify;
position:inherit;
}
ul, li{margin:0; padding:0; list-style:none;}
.menu_head {border:0px solid #998675;} 
.menu_body {display:none;width:129px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}  
.menu_body li {background:#000000;}  
.menu_body li a {color:#FFFFFF; text-decoration:none; padding:5px; display:block;}  
.menu_body li.alt {background:#333333;} 
.menu_body li a:hover {padding:5px 0px; font-weight:bold;}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

RE:PIE

Publicado por ANOMINO (1 intervención) el 16/06/2017 23:09:59
MUCHAS GRACIAS TU EJEMPLO ME AH AYUDO GRACIAS
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar