Alignement vertical div

**Gecko64** · 14 Février 2009

Bonjour, j'ai une question je pense de débutant en CSS.

En fait j'ai dans mon cas présent 2 DIV que je vais nommer divA et divB.

La divB est encapsulée dans la divA.

Dans mon CSS, je donne a ma divB un hauteur de 10px et je voudrais la placer en bas de l'intérieur de la divA.

J'ai alors vu sur le net après avoir parcouru une multitude de forums qu'il existait la propriété CSS vertical-align: bottom; qui s'avère ne pas fonctionner, ce qui fait l'objet de ma question... :nonono:

Je vous colle le CSS que j'ai chez moi:

#fond 
{ 
	border-width: 1px;
	border-style: solid;
	height: 750px;
	width: 950px;
	background: #D31F31;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#banniere
{ 
	text-align: center;
	border-width: 1px;
	border-style: solid;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 3px;
	margin-bottom: 3px;
}

#contenu
{ 
	text-align: center;
	border-width: 1px;
	border-style: solid;
	background: #F69B80;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 3px;
	margin-bottom: 3px;
	height: 600px;
}

#footer
{
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 3px;
	margin-bottom: 3px;
	border-width: 1px;
	border-style: solid;
	background: #AE7904;
	vertical-align: bottom;
}

et le code de ma page sur laquelle je chipote:

<html>
<head>
<title>Titre du site</title>
<link rel="stylesheet" type="text/css" href= "./css/site.css"> 
</head>
<body>
	<!--Div pour gerer le fond-->
	<div id="fond">

		<!--Div de bannière-->
		<div id="bannière">
			<img src="./images/banniere.png" alt="Banniere du site">	
		</div>

		<!--Div de menu-->
		<div>
			<a href="site.php?page=menu"><img src="./images/menu/accueil.png" alt="accueil"></a>
			<a href="site.php?page=histoire"><img src="./images/menu/histoire.png" alt="histoire"></a>
			<a href="site.php?page=photos"><img src="./images/menu/photos.png" alt="photos"></a>
			<a href="site.php?page=contact"><img src="./images/menu/contact.png" alt="contact"></a>
		</div>

		<!--Div de contenu-->
		<div id="contenu">
			Le contenu du site s'affiche ici
		</div>

		<!--Div de footer-->
		<div id="footer">
			Le footer se met ici
		</div>

	</div>
</body>
</html>

Il y a certaines choses en PHP dans le code mais qui ne sont pas encore d'actualité vu que je me concentre sur la présentation du site

Je ne sais pas si quelqu'un saurait m'aiguiller?

Merci

**Gecko64** · 15 Février 2009

J'ai posé une colle ou une question stupide que personne a l'air de savoir ou vouloir me répondre? :blush:

SStephane · 15 Février 2009

Hello,

A ma connaissance, le vertical-align ne s'applique que sur les éléments en display inline, normal donc que cela ne fonctionne pas.

Il faudrait voir ce que ton truc doit faire au final, mais lorsque j'ai besoin d'un style particulier en bas d'un bloc, j'ai tendance à mettre l'image de fond avec le bas dans le conteneur général de ce bloc (ou à défaut dans le conteneur du contenu ) avec un bg-position de type "left bottom" qui lui, fonctionne bien.

En espérant avoir pu t'aider

Modifié 15 Février 2009 par SStephane

**Gecko64** · 15 Février 2009

Heuu ok je vais essayer ainsi

Merci !

b0b0 · 16 Février 2009

Salut,

ou peut être une autre possibilité,

mettre le DIVA en position relative, puis le DIvB en position "absolute", avec un bottom:0 & ça devrait aussi le faire...

b0b0

SStephane · 16 Février 2009

hum, je n'en suis pas fan : certes, ça fonctionne, mais il y a un "si".

Si ton contenu est dépliable (menu déroulant ou autre...), ton div en position absolue ne bougera pas sur certains navigateurs lors du mouvement : au minimum ie6 mais je crois que c'est aussi vrai pour la famille de KDE.

Connexion

Alignement vertical div

Sujets conseillés

Gecko64

Gecko64

SStephane

Gecko64

b0b0

SStephane

Veuillez vous connecter pour commenter

Parcourir

Activité