18041 sujets

Questions générales et questions de débutants

Aligner verticalement les div dans une div

Bonjour,

Je ne parviens pas à aligner verticalement les div qui se trouvent dans une div principale.

Ce que je veux faire : Je veux aligner sur la bordure du bas de la div #barre.

Comment puis-je aligner mes div verticalement?

J'ai trouvé le tutoriel pour aligner du texte, que j'ai essayé d'appliquer mais rien n'y fait.

Merci d'avance.

Voici mon code : 
<html>
<head>
	<title>Test menu en CSS</title>
	<link rel="stylesheet" href="style.css" />
<body>
	<div id="barre">
		<div id="titre">
			Titre
		</div>
		<div id="menu">
			<ul id="navigation">
				<li><a href="#">Contrôles</a></li>
				<li><a href="#">Campagnes</a></li>
				<li><a href="#">Analyse</a></li>
				<li><a href="#">Administration</a></li>
			</ul>
		</div>
		<div id="connexion">
			Connecté en tant que tartenpion
			IBP
		</div>
		<div id="bp"></div>
		<div id="ibp"></div>
	</div>
</body>
</html>

div {
	border: 1px dotted #000000;
}

#titre,#menu,#connexion,#bp,#ibp {
	overflow:hidden;
	display: inline-block;
}

#barre {
	background-color: white;
	height: 160;
	width: 100%;
	background-image: url(bg_barre.png);
	border: 1px #000000 solid;
	vertical-align: baseline;
}

#menu {
	height: 45px;
	width: 500px;
	overflow: visible;
}

#bp {
	background-image: url(logo_BP.jpg);
	background-repeat: no-repeat;
	height: 65px;
	width: 65px;
}

#ibp {
	background-image: url(logo_IBP.jpg);
	background-repeat: no-repeat;
	height: 19px;
	width: 56px;
}

Modifié par Pogo (17 Mar 2009 - 10:37)
Pogo a écrit :

Ce que je veux faire : Je veux aligner sur la bordure du bas de la div #barre.

Comment puis-je aligner mes div verticalement?

Il te suffit d'assigner à tes div se trouvant dans #barre un comportement de type inline-block, l'alignement sur le bas est le comportement par défaut pour cette valeur du display.
Ok, merci! J'avais défini une hauteur pour #barre. Maintenant que je l'enlève, la ligne de base concorde avec la bordure basse de #barre.

Mais lorsque je définis la hauteur de #barre? Comment je fais pour que ma ligne de base suive?
Modifié par Pogo (17 Mar 2009 - 11:34)
Sujet clos
Aller à