28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de bordure et d'alignement après float:right

Bonjour,

J'ai introduit une boite flottante à l'intérieur d'un <div> pour placer mon menu...
Le problème se situe au niveau de l'alignement horizontale d'un block (la balise <a>) à l'aide des marges latérales automatiques... car l'alignement ne tient pas comte de la largeur de la boite jaune flottante (mon menu).

Je vous montre mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
* {
	margin:0px;
	padding:0px;
}
div#zone {
	margin:0px 30px;
	padding:0px 20px 20px 20px;
	background:#99CCFF;
}
div.boite {
	float:right;
	width:300px;
	height:120px;
	margin:20px;
	border:10px solid #FFD500;
}
p {
	padding-top:20px;
	text-indent:50px;
	text-align:justify;
	background:#6699FF;
}
a {
	display:block;
	width:100px;
	height:35px;
	margin:0 auto;
	text-indent:0px;
	text-align:center;
	border:1px solid #FF0000;
}
.spacer {/*border:1px dashed #FF0000;*/
	clear:both;
	margin:0px;
	padding:0px;
	
}
</style>
</head>

<body>

<div id="zone">
	<div class="boite"></div>
	<p>Lorem ipsum dolor sit amet consectetuer eget Donec risus risus lacus. Tellus habitant lobortis Vivamus et justo orci ornare urna hac justo. Condimentum dolor quis vitae ante adipiscing adipiscing sagittis parturient justo tempus. Quis ipsum vel parturient consectetuer enim orci ac id sit nunc. Orci lacus Lorem augue quis nunc Nullam leo et justo vel. Maecenas urna In.</p>
	<p><a href="#" title="">lien</a></p>
	<p>Lorem ipsum dolor sit amet consectetuer eget Donec risus risus lacus. Tellus habitant lobortis Vivamus et justo orci ornare urna hac justo. Condimentum dolor quis vitae ante adipiscing adipiscing sagittis parturient justo tempus. Quis ipsum vel parturient consectetuer enim orci ac id sit nunc. Orci lacus Lorem augue quis nunc Nullam leo et justo vel. Maecenas urna In.</p>
	<p class="spacer"></p>
</div>

</body>
</html>


Connaissez-vous une méthode pour y arriver ?
Merci d'avance

@+ Smiley murf
Modifié par Tchupacabra (18 Feb 2008 - 17:40)
Bonjour,
le problème vient du fait que les boîtes flottantes sont hors du flux vis à vis des boîtes de bloc (ton <a> en l'occurrence) adjacentes.
Tu dois créer ce qu'on appelle un contexte de formatage bloc via la déclaration overflow:hidden (par exemple)
ou parfois passer par une marge left ou right, ce qui ne sera pas approprié ici.


a {
	display:block;
	overflow:hidden;
	width:100px;
	height:35px;
	margin:0 auto;
	text-indent:0;
	text-align:center;
	border:1px solid #F00;
}

Quelques explication ici.


Sous IE6, il se comportera de la même manière si l'élément a le layout, ce qui est ton cas ici puisqu'il est doté de propriétés de dimensionnement.

Attention au marges latérales et au float-right, ton margin:20px et donc ton margin-right:20px est doublé sous IE6 et infèrieur.
Ajouter un display:inline dans une feuille de style pour les versions antérieures à IE7 appelée par des commentaire conditionnels (voir la FAQ)


div.boite {display:inline;}

Modifié par Hermann (19 Feb 2008 - 12:28)
Sujet clos
Aller à