28172 sujets

CSS et mise en forme, CSS3

Problème image en background

Bonjour, j'ai un soucis de mise en page, j'ai mis une image en background via mon CSS, sous IE il se duplique bien, en revanche sous Firefox, il ne se duplique pas.
Voici mon code css

* {
	padding:0;
	margin:0;
}

.spacer {
  clear: both;
}

#body {
	width: 100%;
	height: 100%;
	background: url(../images/background3.gif);
	background-repeat: repeat-y;
}

div#contenu {
	width: 1000px;
	margin: auto;
	margin-top: 10px;
	background: #FFFFFF;
}

div#head {
	width: 100%-10px;
	height: 280px;
}

div#corps {
	width: 100%-10px;
	min-height: 300px;
	padding: 5px;
}

div#foot {
	width: 100%-10px;
	height: 30px;
	padding: 5px;
	background: url(../images/background2.gif);
	background-repeat: repeat;
}


Et ici mon code web
Ma page physique :

<!-- DEBUT ENTETE PAGE -->
<?php include('pages/head.php') ?>
<!-- FIN ENTETE PAGE -->
<div class="spacer"> </div>
<!-- DEBUT CORPS PAGE -->
<DIV id="corps">
	<?php include('pages/inc/liens.inc.php')  ?>
</DIV>
<!-- FIN CORPS PAGE -->
<div class="spacer"> </div>
<!-- DEBUT PIED DE PAGE -->
<?php include('pages/foot.php') ?>
<!-- FIN PIED DE PAGE -->

Mes inclus

<table width="100%" align="center">
	<tr>
    	<td align="center"><b><u>Un bon flamby, jeunes parents, &agrave; vous d'essayer lol</u></b></td>
    </tr>
	<tr>
    	<td align="center">
        	<div>
                <object width="480" height="381" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
                    <param name="movie" value="http://www.dailymotion.com/swf/x9xleb_le-flamby_fun&related=0"></param><param name="allowFullScreen" value="true"></param>
                    <param name="allowScriptAccess" value="always"></param>
                    <embed src="http://www.dailymotion.com/swf/x9xleb_le-flamby_fun&related=0" type="application/x-shockwave-flash" width="480" height="381" allowFullScreen="true" 				allowScriptAccess="always"></embed>
                </object>
                <br />
                <b><a href="http://www.dailymotion.com/video/x9xleb_le-flamby_fun">Le Flamby</a></b><br>
            </div>
        </td>
    </tr>
    <tr>
    	<td align="center"><br><hr><br></td>
    </tr>
    <tr>
    	<td align="center"><b><u>Les filles à la naissance</u></b></td>
    </tr>
	<tr>
    	<td align="center">
        	<div>
            	<object width="420" height="339">
                	<param name="movie" value="http://www.dailymotion.com/swf/xadxib_les-femmes-a-la-naissance_fun" /><param name="allowFullScreen" value="true" />
                    <param name="allowScriptAccess" value="always" />
                    <embed src="http://www.dailymotion.com/swf/xadxib_les-femmes-a-la-naissance_fun" type="application/x-shockwave-flash" width="420" height="339" allowFullScreen="true" allowScriptAccess="always"></embed>
               </object>
               <br /><b><a href="http://www.dailymotion.com/swf/xadxib_les-femmes-a-la-naissance_fun">Les femmes a la naissance</a></b><br>
           </div>
        </td>
    </tr>
    <tr>
    	<td align="center"><br><hr><br></td>
    </tr>
    <tr>
    	<td align="center"><b><u>Les garcons à la naissance</u></b></td>
    </tr>
	<tr>
    	<td align="center">
        	<div>
                <object width="420" height="339">
                	<param name="movie" value="http://www.dailymotion.com/swf/xadxkn_les-hommes-a-la-naissance_fun" /><param name="allowFullScreen" value="true" />
                    <param name="allowScriptAccess" value="always" />
                    <embed src="http://www.dailymotion.com/swf/xadxkn_les-hommes-a-la-naissance_fun" type="application/x-shockwave-flash" width="420" height="339" allowFullScreen="true" allowScriptAccess="always"></embed>
                </object>
                <br /><b><a href="http://www.dailymotion.com/swf/xadxkn_les-hommes-a-la-naissance_fun">Les hommes a la naissance</a></b><br>
            </div>
        </td>
    </tr>
    <tr>
    	<td align="center"><br><hr><br></td>
    </tr>
</table>


Et voici le résultat en image
http://free0.hiboox.com/images/3609/e3150b1452cbddd677c0a0c2dba1ff00.jpg
Salut,

100%-10px ... Je ne pensais pas une seule seconde que quelqu'un allait imaginer que ça fonctionnait ...
Hello,

Agylus a écrit :
100%-10px ... Je ne pensais pas une seule seconde que quelqu'un allait imaginer que ça fonctionnait ...
Non mais ça serait bien pratique ! D'ailleurs c'est prévu en CSS3. Smiley murf
chouchouilloux a écrit :
Cela fonctionne a moitié sinon mon div interne dépasse le div externe

Non non, ça ne fonctionne pas du tout. Ce qui se passe, c'est que le navigateur voit ceci:
selecteur {
  width: un_machin_bizarre_que_je_comprends_pas;
}

Donc il ignore totalement la déclaration. Comme si tu avais ceci:
selecteur {
}


Donc c'est la valeur par défaut (width: auto;) qui s'applique.
Ça tombe bien, c'est ce dont tu as besoin. Un élément de type bloc (tel un DIV) en positionnement statique (valeur par défaut: position:static) va naturellement prendre toute la largeur disponible, sans déborder à cause des marges, du padding ou des bordures ajoutés.
Modifié par Florent V. (05 Sep 2009 - 14:22)
Sinon sur le fond du problème: si le problème est que l'image de fond de div#body ne se répète pas sur toute la hauteur souhaitée... c'est probablement que ce bloc ne fait pas toute la hauteur souhaitée, pour une raison ou une autre (pistes possibles: hauteur fixe au lieu d'un min-height, dépassement des flottants, contenu positionné en absolu...).
Merci pour vos com, en fait le soucis venait du fait que j'avais mis un height=100% pour le body alors qu'il n'y a pas lieu d'être

#body { 
    width: 100%; 
    height: 100%; 
    background: url(../images/background3.gif); 
    background-repeat: repeat-y; 
}


Merci a tous
Modifié par chouchouilloux (05 Sep 2009 - 19:55)
Sujet clos
Aller à