28173 sujets

CSS et mise en forme, CSS3

Alignement horizontale de DIV

Bonjour,

Je chercher à aligner horizontalement 4 DIV qui sont eux mêmes contenus dans un autre DIV.
Mes 4 DIV ont des marges extérieures et intérieures de définies ainsi qu'une bordure.
Le résultat de mon code est que le dernier DIV est affiché à la ligne.
Le problème vient de la définition de margin, padding et border sur ces DIV. Si j'enlève ces 3 propriétés, cela s'affiche correctement. Mais dès que j'en rajoute une seule, le résultat devient mauvais.

Voici ma page :

<html>
<head>
<style>
BODY {
	margin:0px;
}
#divSousMenu {
	background:#FFAAAA;
	border:1px solid #FF0000;
	padding:2px;
	margin-bottom:5px;
	overflow:auto;
}
#divSousMenu .Item {
	float:left;
	width:25%;
	background:#D7D7D7;
	border:1px solid #000000;
	padding:2px;
	margin:1px;
}
</style>
</head>
<body>
<DIV id='divSousMenu'>
	<DIV class='Item'>Item 1</DIV>
	<DIV class='Item'>Item 2</DIV>
	<DIV class='Item'>Item 3</DIV>
	<DIV class='Item'>Item 4</DIV>
</DIV>
</body>
</html>


J'ai beau tourner ca dans tout les sens, rien à y faire. J'ai repris le code de OpenWeb http://www.openweb.eu.org/articles/initiation_float/annexes/annexe3.html mais lui aussi s'affiche mal si on lui définit une bordure ou une marge. Smiley mur

Quelqu'un a-t-il une solution ?
Bonjour et Bienvenue à toi sur le Forum, Smiley smile
Quand on y réfléchit, le problème que tu rencontres apparait comme étant assez logique...

- Tu commences par dire à tes quatres Item qu'ils doivent occuper chacun 1/4 de l'écran. Du coup, toute la place est prise (vu que 25% x 4 = 100%).
- Par la suite, tu ajoutes à tes Items des marges internes et externes... Et tu t'étonnes que le 4ème élément passe à la ligne ? Smiley rolleyes

La valeur des marges étant ajoutées à la largeur des éléments (width).
La taille globale de tes éléments dépasse donc les 100%... et il est tout à fait normal que le dernier Item passe à la ligne.

Pour corriger ton problème, il te suffit donc de diminuer la taille de tes éléments (24.5% par exemple) et tu constateras que tout rentres dans l'ordre.
Par ailleurs, je ne saurais trop te conseiller d'opter pour une liste <ul></ul> plutôt que pour une imbrication de <div> vide de sens.. Smiley cligne
désolé pour le triple message, le serveur a eu un petit ralentissement et je me suis un peu exité sur le bouton "Envoyer" Smiley ohwell
merci pour ta réponse.
c'est vrai que si les marges s'ajoutent à la taille définie, c'est normale que ca s'affiche mal.... je pensais le contraire. Smiley ohwell

J'ai essayé avec une liste, pour être plus correcte au niveau de la sémantique comme tu me l'as conseillé et j'ai un petit souci.

Ca fonctionne sous IE mais pas sour FireFox :
j'ai ajouté le style display:inline aux balises <LI> pour qu'elles s'affichent les unes à la suite de l'autres, mais du coup Firefox ne gère plus leur taille comme si elle étaient restées en display:block.

Est-ce IE ferait (pour une fois Smiley cligne ) les choses bien à la place de Firefox ??



<html>
<head>
<style>
BODY {
	margin:0px;
}
#ulSousMenu {
	background:#FFAAAA;
	border:1px solid #FF0000;
	padding:0px;
	margin:0px;
	width:100%;
	text-align:center;
}
#ulSousMenu LI {
	width:24.5%;
	background:#D7D7D7;
	border:1px solid #000000;
	padding:2px;
	margin:2px;
	list-style-type:none;
	display:inline;
	text-align:left;
}
</style>
</head>
<body>
<UL id='ulSousMenu'>
	<LI>Item 1</LI>
	<LI>Item 2</LI>
	<LI>Item 3</LI>
	<LI>Item 4</LI>
</UL>
</body>
</html>
A partir du moment où tu indiques à tes éléments de listes qu'ils doivent adopter un comportement inline, il est normal de voir s'afficher le résultat obtenu sous Fireffox.
A ce sujet, je te conseille la lecture de cet article : Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne

Il suffit de reprendre le code initialement utilisé et de le ré-utiliser pour obtenir le comportement souhaité.
Exit le display:inline; et retour du float:left;
Smiley cligne

Après, il ne te restera plus qu'à supprimer les éléments indésirables, telles les puces placées devant les éléments de liste.

Bonne lecture
Et bonne continuation
Modifié par Cygnus (20 Nov 2007 - 17:34)
Sujet clos
Aller à