28172 sujets

CSS et mise en forme, CSS3

Comment distribuer mes Div équitablement dans mon conteneur ?

Bonjour à tous,
J'ai un petit problème de distribution de mes div. Quelqu'un peut-il m'aider à le résoudre ?

Voici mon exemple:
upload/13805-prob.jpg 



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html lang="fr">
	<head>
		<title>titre</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
	
html, body, ul{margin: 0px; padding: 0px;}
	
#conteneur{
	width: 300px;
	height: 150px;
	margin: 0px auto;
	background-color: black;
}	

#jaune {
	width: 90px ;
	margin-top: 20px;
	height: 50px;
	margin-left: 10px;
	background-color: Yellow;
	float: left;
}
</style>

	</head>
<body>
	<div id="conteneur">
		<ul id="jaune">1</ul>
		<ul id="jaune">2</ul>
		<ul id="jaune">3</ul>
	</div>
	
	</body>
</html>


Mon problème est que j'aimerais que ma colonne jaune "1" soit collée a gauche sans toucher à l'alignement de ma 3ème colonne.

J'aimerais éviter de créer une classe pour chaque colonne.
Voyez-vous une solution à mon problème ?

Merci d'avance pour vos réponses.
Modifié par Natas (27 Jan 2009 - 17:11)
Salut Natas,

C'est pas très claire ton truc.. tout est fixe ? ton bloc noir fera 300px et c'est tout ? dans se si tu align ton 1er bloc à droite, ou est ce que tu met les 10px de marge qui reste ? Enfin bon.. Déjà un truc, quand tu utilise un ID, les bonnes pratique veulent qu'un id soit unique.. donc 3 listes ul s'appelant Jaune sa le fait pas, utilise une classe Smiley smile

Après tu peux très bien te passer de l'ID jaune en utilisant l'héritage, et utiliser l'alignement à droite au lieu du gauche..

un truc genre : 

#conteneur{
	width: 300px;
	height: 150px;
	margin: 0px auto;
	background-color: black;
}	

#conteneur ul {
	width: 90px ;
	margin-top: 20px;
	height: 50px;
	margin-right: 15px;
	background-color: Yellow;
	float: left;
}


je l'ai pas testé mais c'était juste pour te donné un idée Smiley smile
Salut Mikerob,

Tout d'abord merci pour la correction Smiley smile , c'est vrai que c'était inutile dans ce cas-ci le ID "jaune".

Mon problème est le suivant:
J'aimerais que mes 3 colonnes jaunes soient réparties comme ceci dans mon conteneur:

upload/13805-probleme.jpg

Si j'utilise "margin-right" ma derniàre colonne ne sera pas colée au conteneur.
Si j'utilise "margin-left", c'est ma première colonne qui ne sera pas collée au conteneur.

Je me demandais s'il existait une solution, sans devoir créer une classe pour chacune de mes colonnes.


@Mikerob: Si je mets "margin-right=15px;" comme tu me le recommandes, j'obtiens ceci:

upload/13805-prob2.jpg
Modifié par Natas (27 Jan 2009 - 17:13)
a écrit :
Si j'utilise "margin-right" ma derniàre colonne ne sera pas colée au conteneur.


faux ta liste peut etre collée au conteneur, si tu calcul comme il faut ta marge (dans le cas ou tu veux garder un contenu à taille fixe comme dans ta source). genre si tu regarde se que je t'ai donné j'ai augmenté la marge de 5 px Smiley smile

Mais je sais pas si c'est se que tu cherche vraiment à faire....

après une solution un peu "tordue" serait de quand même utiliser ton id= jaune pour la dernière list, et y apporter des modif spécifique pour que se bloc soit coller au bord (genre ajouter une margin-left ou carément y aller à la bourrin en plaçant ton bloc en absolute Smiley langue )

après c'est toi qui sait pourquoi tu veux faire un design de ce genre.
Je pense que je suis obligé de créer une classe pour ma 3ème colonne et de supprimer le "margin-right".

Merci pour ta contribution Mikerob Smiley cligne
Pas forcément.. j'ai mis 15 sans tester.. après essai de jouer avec ses valeurs.. mais effectivement sans classe à par tu risque d'avoir au moins un décalage d'un pixel..
Sujet clos
Aller à