28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Pour régler un problème de débordement de blocs en mode float j'ai du utiliser la balise <hr>.
Cela résoud bien mon problème mais par contre un autre problème apparait.
La première barre horizontale prend une place considérable sur la page meme si dans le CSS je définis sa propriété visibility à hidden !!!
Les autres barres horizontales s'affichent parfaitement bien.
Il s'agit d'un script PHP qui affiche en boucle des images donc le code est plutot simple !

Mon CSS :


/* Contenu global */
#global {
padding-left : 0.5em;
padding-top : 0.5em;
margin-left: 15.5em;
height:100%;
background-color : white;
}
#global h1 {
font-weight: bold;
font-size: 150%;
padding-bottom: 0.2em;
/*border-bottom: 3px solid #ffff99;*/
font-variant: small-caps;
text-indent: 5px;
color: #656DD7;
}
#global h2 {
margin-top: 1em;
margin-bottom: 1em;
font-size: 110%;
font-weight: bold;
color: #228822;
}
#global img{
border:0;
}
.cheval{
border:3px solid blue;
margin-bottom : 10em;
}

.cheval h2{
text-align:left;
}

.cheval img {
float : left;
width: 170px;
height: 180px;

}


hr {
clear : both;
visibility: hidden;
}


Le code XHTML :
<div id="global">
		<h1>Les Chevaux</h1>

<hr />

		<div class="cheval">
		<h2>Alcatraz</h2><img alt="Photo de Alcatraz" src="../Images/Galerie_2/alcatraz2.jpg" />
		<p>
		Age : 14/04/1988<br />
		Taille : <br />
		Couleur : Alezan<br />

		Race : Cheval De Selle Francais<br />
		Nom du père : Hippomene<br />
		Nom de la mère : Ixelle Du Pelaud<br />
		Sexe : Hongre<br /><a href="index.php?adresse=afficher_gallerie.php&amp;idgal=2">Voir la galerie de photos</a><br /><a href="index.php?adresse=afficher_commentaire.php&amp;idcomm=2">Voir ou ajouter un commentaire</a>
		</p>
		<hr />		
		</div>

		
		<div class="cheval">
		<h2>Cristobal</h2><img alt="Photo de Cristobal" src="../Images/Galerie_5/cristobal2.jpg" />
		<p>
		Age : 1990<br />
		Taille : <br />
		Couleur : Bai<br />
		Race : Poney D'Origine Inconnue<br />

		Nom du père : <br />
		Nom de la mère : <br />
		Sexe : Hongre<br /><a href="index.php?adresse=afficher_gallerie.php&amp;idgal=5">Voir la galerie de photos</a><br /><a href="index.php?adresse=afficher_commentaire.php&amp;idcomm=4">Voir ou ajouter un commentaire</a>
		</p>
		<hr />		
		</div>
</div>


Ce problème ne se produit que sous FireFox !!
Sous IE ca passe très bien !!

Merci d'avance

PS : ne faites pas attention aux choix graphiques !!
Modifié par TBoris (28 Jul 2005 - 15:39)
Ca ne motive eprsonne ?
J'ai toujours le problème meme en mettant des margin et padding a 0 !!
Je comprends pas trop !!
Ce bug n'apparait que sous Firefox en + !