Aide - Recherche - Membres - Calendrier
Version complète : background-attachment
Forum Webmaster - Ton Webmaster > Conception de sites > Programmation
Neato
Nov 29 2007, 06:26 PM
Bonjour,
voila je suis entrain de réaliser un site géré par une feuille css et je rencontre un peut soucci (qui je pari dois être tout bête à résoudre ninja.gif ) :
donc je possède une page index.htm ou j'ai inséré des IFRAME (qui appel chaques morceau de ma page) jusque là tout va bien (le background est appliqué aux pages graces à la feuille css),
Et mon problème est donc de fixer se background, j ai fait quelque recherché et est essayer background-attachment : fixed; background-repeat: no-repeat; dans la feuille css (cela n'a rien changé), puis j'ai essayer de même dans la page htm <body style="background-attachment: fixed"> (aucuns effet non plu ...)

est ce que quelqu'uns pourrait m'aider ?
(l'adresse du site http://urbannad.free.fr/site )

voila le code de mes pages :

index.htm
CITATION
<html>
<head>

<meta http-equiv="Content-Language" content="fr">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Nouvelle page 1</title>

<link href="format.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style3 {font-size: 16%}
-->
</style>
</head>
<body>

<div class="global">
<IFRAME
name=menu
align=center
marginWidth=0
marginHeight=0
src="menu.htm"
frameBorder=no
noResize
width=796
height=95 target="index.htm">
</IFRAME>
<div class="leblocbanniere">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="796" height="132">
<param name="movie" value="images/ban.swf">
<param name=quality value=high>
<embed src="images/ban.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="796" height="132"></embed>
</object>
</div>



<div class="texte">
</div>
<div class="lebloccentre" style="background-attachment: fixed">
<IFRAME
name=centre
align=center
marginWidth=0
marginHeight=0
src="centre.htm"
frameBorder=no
noResize
width=796
height=668>
</IFRAME>

</div>
</div>
</body>
</html>


centre.htm
CITATION
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 3</title>
<link href="format.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style3 {font-size: 16%}
-->
</style>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" style="background-attachment: fixed">
<div class="lebloccentre" style="width: 796px; height: 653px">

<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><br>
 </td>
</tr>
<tr>
<td colspan="2">
 </td>
</tr>
<tr>
<td colspan="2"> <p> </td>
</tr>
<tr>
<td>
 </td>
<td width="40%"><b><font face="Papyrus" size="4">     </font></b></td>
</tr>
<tr>
<td width="60%">
<ul>
<li><font face="Arial" size="2"><span class="smptexte">Vous avez des
problèmes avec votre <span class="motclef">ordinateur ?<br>
 </span></span></font></li>
<li><font face="Arial" size="2"><span class="smptexte">il se bloque,
ne démarre plus ou est devenu très lent ?<br>
 </span></font></li>
<li><font face="Arial" size="2"><span class="smptexte">Vous voulez
installer une <span class="motclef">webcam</span>, de la
<span class="motclef">mémoire</span> supplémentaire ou tout autre
matériel informatique ? <br>
 </span></font></li>
<li><font face="Arial" size="2"><span class="smptexte">Vous voulez
configurer une <span class="motclef">connexion internet ADSL</span>
ou <span class="motclef">WIFI ?<br>
 </span></span></font></li>
<li>
<font face="Arial" style="font-size: 10pt">
Vous avez perdu des données importantes ?<br>
 </font></li>
<li>
<font face="Arial" style="font-size: 10pt">
Une sauvegardes de vos données vous serai utile ?</font></li>
</ul>
</td>
<td width="40%" valign="top"> <p> </td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td>
<ul type="circle">
<li><i><font face="Tw Cen MT Condensed Extra Bold" size="3">Une
réponse <font color="#FF0000">adapté</font> à vos besoins</font></i></li>
<li><i><font face="Tw Cen MT Condensed Extra Bold" size="3">Une
intervention à <font color="#FF0000">domicile</font> ou en
<font color="#FF0000">atelier</font></font></i></li>
<li><i><font face="Tw Cen MT Condensed Extra Bold" size="3">Un
diagnostique et devis <font color="#FF0000">gratuit</font></font></i></li>
<li><i><font face="Tw Cen MT Condensed Extra Bold" size="3">Un
technicien </font><font color="#FF0000">
<font face="Tw Cen MT Condensed Extra Bold" size="3">performant</font><font size="4" face="Tw Cen MT Condensed Extra Bold">
</font></font>
<font face="Tw Cen MT Condensed Extra Bold" size="4" color="#FF0000">
 </font></i></li>
</ul>
 </td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
 </td>
<td>
 </td>
</tr>
<tr>
<td>
MMFm<p>gmfgm</p>
<p>gfm</td>
<td>
 </td>
</tr>
</table></div>
</body>

</html>


format.css
CITATION
body {
margin: 0;
font-family: arial, sans-serif;
font-size: 75%;
text-align:center;


scrollbar-arrow-color:#000000;
scrollbar-track-color:#CCCCCC;
scrollbar-shadow-color:#000000;
scrollbar-face-color:#CCCCCC;
scrollbar-highlight-color:#CCCCCC;
scrollbar-darkshadow-color:#999999;
scrollbar-3dlight-color:#CCCCCC;

}


.global {
width: 792px;
margin-right:auto;
margin-left:auto;
margin-top:15px;
padding:0px;
text-align:left;

}


.leblocmenu {
border: 0px solid #000000;
width: 796px;
height: 95px; /* cette ligne indique la hauteur du bloc menu */
background-image: url('images/Sans-titre-1_03.gif');

}


.leblocbanniere {
width: 796px;
height: 132px; /* cette ligne indique la hauteur du bloc menu */
background-image: url('images/ban.swf');
}


.lebloccentre {
margin-left:0px;
margin-bottom:15px;
width: 796px;
height: 653px; /* cette ligne indique la hauteur du bloc menu */
background-image: url('images/Sans-titre-1_08.gif');
background-repeat: no-repeat;
background-attachment: fixed;



}


a {
color: #ffffff;
text-decoration: none;
}


a:hover {
color: #000000;
text-decoration: underline;
}
manhim
Nov 29 2007, 08:17 PM
Personnellement, je met tout dans la propriétée "background". Comme :

background: url(image.png) fixed #ffffff ;
Neato
Nov 29 2007, 09:45 PM
oops désoler jviens de trouver la solution par moi même ( sa aide de se reposer un peut ^^) bon je donne ma solution si sa peut aider des gens par la suite :

donc je crée dans la feuille css

CITATION
.texte {
text-align: left;
height:340px;
overflow:auto;
padding-left:10px;
padding-right:10px;
}


et ensuite dans ma page htm (centre.htm) je met :

CITATION
<div class="lebloccentre" style="width: 796px; height: 653px">
<div class="texte">

</div>
</div>


et voila problème résolue ^^

merci quand même aux gens qui mon répondu ;-)
manhim
Nov 30 2007, 05:29 AM
C'est une autre solution effectivement. Mais avec le overflow: auto; t'es plus obliger d'avoir d'iframe du coup.
C\'est une version "bas débit" de notre forum. Pour voir la version complète avec plus d\'information, la mise en page et les images, veuillez cliquez ici.
Invision Power Board © 2001-2012 Invision Power Services, Inc.