Aller au contenu

Alignement vertical div

Gecko64

Par Gecko64
dans (X)HTML et CSS

 Partager

Sujets conseillés

Gecko64

Gecko64

Posté
Posté

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 :)

Lien vers le commentaire
Partager sur d’autres sites
SStephane

SStephane

Posté
Posté (modifié)

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é par SStephane
Lien vers le commentaire
Partager sur d’autres sites
b0b0

b0b0

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
SStephane

SStephane

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...