28220 sujets

CSS et mise en forme, CSS3

Prob avec firefox

helo !

j'ai monté une page qui contient plusieurs annonces gérées par des CSS et des <div>.

je voudrais que la photo et le texte soient cote à cote, donc d'après le tutoriel j'ai essayé de casser le flux en les mettant en float.

le problème c'est que sous firefox ca ne marche pas alors que sous IE c'est OK !

de plus, j'ai créé un <div> nommé spacer pour gérer l'espace entre deux annonces et ce spacer ne se place jamais là où il devrait être (sous le div contenant l'annonce).


voici le code :

<style type="text/css">
<!--
.conteneur {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 500px;
	background-color: #FFFF00;
}
.annonce {
	background-color: #0099FF;
	margin-left: 100px;
	width: 400px;
}
.photo {
	background-color: #99FF33;
	width: 100px;
	float: left;
	margin-top: 0px;
	margin-left: 0px;
}
.texte {
	background-color: #FF66CC;
	width: 300px;
	float: right;
	margin-top: 0px;
}
.spacer {
	height: 30px;
	background-color: #990000;
}
-->
</style>


<div class="conteneur">

	<div class="annonce">
		<div class="photo"><img src="dynamic/images/cycle/visuel_001.jpg"></div>
		<div class="texte">test de texte</div>
				
	</div>
	<div class="spacer"><img src="static/images/transp.gif"></div>
	

	<div class="annonce">
		<div class="photo"><img src="dynamic/images/cycle/visuel_001.jpg"></div>
		<div class="texte">test2 de texte</div>	
	
	</div>
	<div class="spacer"><img src="static/images/transp.gif"></div>

</div>


Est ce que quelqu'un aurait une idée pour que cela fonctionne sous firefox ??
Merci !
Modifié par Luna (07 Aug 2005 - 16:11)
Ton spacer ne peut pas jouer le rôle prévu: il ne s'agit pas ici d'utiliser ce qu'on appelait autrefois un "spacer" (une image gif transparente), mais d'utiliser la propriété css clear qui empêche une boîte CSS de se placer à côté d'un élément flottant.

Pour que tes couples image-texte se placent comme prévu les uns en dessous des autres, il suffit :
- de supprimer ce gif
- et de donner la propriété clear:left à .photo

Un remarque par ailleurs : il faut indiquer pour tes éléments <img> :
- un attribut alt contenant un très bref texte alternatif à cette image (pour les media qui ne restitueront pas les images)
- les attributs height et width, utiles pour les navigateurs qui devront déterminer s'ils téléchargent ou non l'image en fonction de ses dimensions (navigateurs sur mobiles)
Modifié par Laurent Denis (07 Aug 2005 - 16:25)
ok super je te remercie.

Donc si j'ai tout compris, float permet de placer des éléments cote à cote et lorsque je veux faire passer l'élément suivant en dessous j'ajoute clear en propriété css de cet élément ?
Sujet clos
Aller à