28220 sujets

CSS et mise en forme, CSS3

Décalage successif de div en float:left

Bonjour,
Sur mon site : http://www.toutankharton.com
Sous l'encadre du dernier article, dans la listes des articles, il y a un probleme de décalage, depuis que j'ai décidé d'ajouter un style aux date (class="calendar"). Voila les bouts de codes concernés :

	<div id="a_la_deux_somm">			

<div class="item_art"><a href="Nomes"><div class="calendar">Sat 10</div><h2>Nomes</h2></a></div>		

<div class="item_art"><a href="Le-musee-egyptien-de-Bonn"><div class="calendar">sam 10</div><h2>Musée de Bonn</h2></a></div>		

<div class="item_art"><a href="Chronology"><div class="calendar">Sat 10</div><h2>Chronology</h2></a></div>		

<div class="item_art"><a href="Decouverte-d-une-tombe-de-5-000"><div class="calendar">jeu 1er</div><h2>Découverte d&#8217;une tombe de 5 000 ans</h2></a></div>		

<div class="item_art"><a href="Les-Puissances-Fatales"><div class="calendar">ven 29</div><h2>Puissance fatale</h2></a></div>		

	</div>



.calendar {
	background: #F7C35A;
	border-right: 1px solid #3F5E6D;
	border-bottom: 1px solid #3F5E6D;
	float: left;
	text-align: center;
	line-height: 1.1em;
	padding: 2px 1px 5px 1px;
	width: 2.2em;
	color: #3F5E6D;
	margin: 0 0.5em 1em 0;
}
.calendar:hover { color: #084A6B; }

#a_la_deux_somm div.item_art { border-bottom : 1px solid #084A6B;display:block;height:36px;cursor: hand;margin-top:.5em }


Merci d'avance de m'expliquer pourquoi il y a un decalage dans FF et pas dans IE Smiley murf
Modifié par Toutankharton (12 Sep 2005 - 15:41)

.calendar {
background: #F7C35A;
border-right: 1px solid #3F5E6D;
border-bottom: 1px solid #3F5E6D;
float: left;
[b]clear: left;[/b]
text-align: center;
line-height: 1.1em;
padding: 2px 1px 5px 1px;
width: 2.2em;
color: #3F5E6D;
margin: 0 0.5em 1em 0;
}


Avec le "clear: left;" ça va tout de suite mieux. A priori la hauteur de tes .calendar est plus importante sur FireFox que sur IE, donc il se mettent tous les uns à droite des autres, ce qui est le comportement normal. Ou alors c'est que IE agrandit le conteneur du flottant pour prendre toute sa hauteur du flottant, ça lui arrive, et c'est pas le bon comportement.
Modifié par Lanza (12 Sep 2005 - 16:27)
Sujet clos
Aller à