28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Voici mon problème : J'ai deux images qui font, en faisait en faite, partie du background. Je les ai extrait pour pouvoir les mettre à côté du footer (l'un à gauche et l'autre à droite). J'ai d'abord utilisé ce CSS :

#bg_gauche_fixed {
	background-image: url(images/bg_gauche_fixed.png);
	width: 200px;
	height: 200px;
	position: absolute;
	right: 1200px;
	top: 1155px;
}
#bg_droite_fixed {
	background-image: url(images/bg_droite_fixed.png);
	width: 200px;
	height: 200px;
	position: absolute;
	right: 50px;
	top: 1155px;
}

Malheureusement, comme vous pouvez-vous en douter, ça marchait très bien sur la page où j'avais réglé le top et le right mais une fois que la hauteur de mon site changeait (ce qui arrive souvent), les deux images ne bougeaient pas (ce qui est normal). Cependant, j'aimerais qu'ils suivent le footer. J'ai donc modifié mon CSS pour en arriver à ce point-ci :
#bg_gauche_fixed {
	background-image: url(images/bg_gauche_fixed.png);
	width: 200px;
	height: 200px;
	float: left;
	margin: -150px 0 0 -180px;
}
#bg_droite_fixed {
	background-image: url(images/bg_droite_fixed.png);
	width: 200px;
	height: 200px;
	float: right;
	margin: -170px -175px 0 0;
}

Pour ce qui est du HTML, je l'ai mis dans mon footer comme ceci :
<div id="footer">
    <div id="bg_gauche_fixed"><!-- ICI SERA PLACE LE BG DROITE FIXE --></div>
    <p>© 2010 - Randoomz.org - Tous droits réservés.</p>
    <p>Toutes reproductions partielles ou totales du contenu ainsi que du design de ce site, est formellement interdit sans l'autorisation de son webmaster.</p>
    <div id="bg_droite_fixed"><!-- ICI SERA PLACE LE BG DROITE FIXE --></div>
</div>

Coup de chance, ça marche sur mon Mac sur les navigateurs suivants : Safari et Chrome.
Quand aux autres navigateurs et sur les navigateurs PC (tous), l'image de droite (bg_droite_fixed.png) ne s'affiche pas.

Auriez-vous une idée à me suggérer parce que je commence à sécher =/.
Si vous n'avez pas compris où je voulais en venir, voici un lien vers une image représentant ce à quoi je voudrais arriver sous tous les navigateurs (du mois, le plus possible) : Cliquez-ici

Merci d'avance de votre aide !
Bonjour AndroWiiid,

Essaye de modifier ton html ainsi:


<div id="footer"> 
    <div id="bg_gauche_fixed"><!-- ICI SERA PLACE LE BG DROITE FIXE --></div> 
    <div id="bg_droite_fixed"><!-- ICI SERA PLACE LE BG DROITE FIXE --></div> 
    <p>© 2010 - Randoomz.org - Tous droits réservés.</p> 
    <p>Toutes reproductions partielles ou totales du contenu ainsi que du design de ce site, est formellement interdit sans l'autorisation de son webmaster.</p> 
</div>


En effet, quand tu utilises des propriétés float left & right, tu dois les placer toutes les deux avant le contenu qui viendra s'insérer entre elles.
Bonsoir,

Merci de ta réponse.
Effectivement, cela marche comme indiqué dans ton quote mais il y avait un autre problème que je viens de relever est que le fichier image n'était pas exploitable. J'ai du l'enregistrer en .png avec encore plusieurs couches dans Photoshop.

Cependant, c'est bon à savoir pour le positionnement des div. Quant à programmer, autant programmer proprement =).

Merci beaucoup !

Je posterais certainement mon site dans la section des critiques de Alsacréation une fois le code complètement fini afin d'avoir vos avis =).