Fixed no me funciona

dobled · #1 (**permalink**) 26/05/2006, 09:23

estoy desde hace poco tratando de entender y ejercitando algo con css, tengo esta paginita de prueba la cual de imagen y presentancion está bien pero al momento de agregar mas textos al contenido y hacerla mas menos duplicando unas 7 veces ese texto la imagen body.gif y pie.gif no permanecen quietas al mover el scroll no asi el devil.gif esa imagen queda estatica.
Pongo el codigo a ver si me ayudan

Código:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titulo</title>
<style type="text/css">
body {
	background-color: #D60305;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image : url(i/devil.gif);
	background-position : left bottom;
	background-repeat : no-repeat;
	background-attachment : fixed;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#FFFFFF;
	text-align:justify;
}
#cabecera {
background: url(i/body.gif) repeat-x top left fixed ;
position:absolute;
top:0px;
width:100%;
height:auto;
}
#contenido {
position:absolute;
top:100px;
left:10%;
width:500px;
height:auto;
}
#pie {
background: url(i/pie.gif) repeat-x top left fixed;
position:absolute;
bottom:0px;
width:100%;
height:auto;
}
.titulos {
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#FFFFFF;
	letter-spacing: -1px;
	text-decoration: underline;
}
</style>
</head>

<body>
<div id="cabecera" ><img src="i/body.gif" width="644" height="601"/></div>
<div id="contenido"><span class="titulos"><strong>Titulos de las Noticias Semanales </strong></span><strong><br />
</strong>Por fin, una de las   promotoras de m&uacute;sica trance m&aacute;s importante del mundo ID &amp; T, se fija en   nuestro pa&iacute;s, incluyendo dos fechas en esa gran gira que la marca har&aacute; por el   continente europeo... <br />
En octubre la gente de Sensation visitar&aacute; Barcelona y   Madrid. En el caso de Barcelona, la fiesta se realizar&aacute; en el Palau de Sant   Jordi. Mientras que en Madrid, ser&aacute; en el Madrid Arena (el roc&oacute;dromo dentro de   la Casa de Campo) donde se producir&aacute; la gran fiesta. Los mejores dj&acute;s desfilaran   por las cabinas de Sensation, por supuesto con el mejor trance mundial. <br />
Esperamos sin duda que el evento sea todo un &eacute;xito y de esta forma puedan   realizar la otra cara de Sensation: Sensation Black.<br />
<hr width="500" size="1" />
<br />
<br />
<br />
<br />
</div>
<div id="pie"><img src="i/pie.gif" width="492" height="29" /></div>
</body>
</html>

el texto es solo ejemplo no tiene nada que ver con el sitio..
Bueno la idea es que todas las imagenes permanezcan quietas cuando se agrega mas texto y aparece el scroll.

Saludos y Gracias

Daniel M. · #2 (**permalink**) 26/05/2006, 13:36

La Imagen Que Deseas Q Sea Fija Esta Dentro De Una Capa Por Ende Va Ser Fija Dentro De Esa Capa, Creo Que Esta Mal Estructurado Tu Marcado (xhtml) Por Eso No Consigues Lo Q Deseas Envianos El Efecto Visual Q Deseas (archivo Png O Psd Por Ejemplo).
Ademas No Trates De Colocarle A La Capa El Valor Fixed Porque Tampoco Funcionara Debid A Lo Confuso Q Esta Tu Marcado!

dobled · #3 (**permalink**) 26/05/2006, 13:43

bueno lo de la estructura no creo que este todo malo, despues de leer bastante este tema creo que es un bug del iexplorer.
baje un js, llamado ie7-standard-p.js y he solucionado todos mis problemas.

Muchas gracias de todas maneras.

asi quedo finalmente pero con el js linkeado

Código:

body {
	background-color: #D60305;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image : url(i/devil.gif);
	background-position : center bottom ;
	background-repeat : no-repeat;
	background-attachment : fixed;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#FFFFFF;
	text-align:justify;
}
#contenido {
position:absolute;
top:100px;
left:10%;
width:500px;
height:auto;
}
#cabecera {
background: url(i/body.gif) repeat-x top left ;
position:fixed;
top:0px;
width:100%;
height:auto;
}
#pie {
background: url(i/pie.gif) repeat-x top left;
position:fixed;
bottom:0px;
width:100%;
height:auto;
}
#menu {
background-color: #520102;
position:fixed;
top:0px;
left:10%;
}
.titulos {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	color:#FFFFFF;
	letter-spacing: -1px;
	text-decoration: underline;
}
#devil {
	background-image : url(i/devil.gif);
	background-position : center bottom ;
	background-repeat : no-repeat;
	background-attachment : fixed;
}