28172 sujets

CSS et mise en forme, CSS3

Un "border-bottom: none" sur un div bloque son expansion !?

Bonjour à tous,

je rencontre le problème suivant : j'ai une page web contenant de haut en bas un div "header", un div "corps" et un div "footer". Le div "corps" contient lui-même 2 div identiques placés l'un sous l'autre auxquels j'applique un margin-top et un margin-bottom de 10px afin d'avoir un espace entre eux et le header et le footer.

Or, si j'applique une bordure à leur contenant (corps), tous se passe bien : le div corps se prolonge jusqu'au header et au footer.

Si par contre j'applique un border-top: none et un border-bottom: none au div corps, celui-ci s'arrête avant d'atteindre le header et le footer.

Je ne comprends pas pourquoi. Comment régler ce problème sans mettre par exemple un   dans la page html ?

Voici mon code :


<html>

<head>

	<title>Mon Titre</title>

	<style type="text/css">

		#header
		{
			margin-left: auto;
			margin-right: auto;
			width: 950px;
			height: 140px;
			border: solid black 1px;
			background-color: #BFB28D;
		}

		#corps
		{
			margin-left: auto;
			margin-right: auto;
			width: 950px;
			height: auto;
			border: solid black 1px;
			border-top: none; /* ---> Si je supprime cette ligne, le haut du div "corps" se prolonge jusqu'au header */
			border-bottom: none; /* ---> Si je supprime cette ligne, le bas du div "corps" se prolonge jusqu'au footer */
			background-color: #FFEFD0;
		}

		#footer
		{
			margin-left: auto;
			margin-right: auto;
			width: 950px;
			height: 30px;
			border: solid black 1px;
			background-color: #BFB28D;
		}

		.sousdiv
		{
			margin-left: auto;
			margin-right: auto;
			width: 850px;
			height: auto;
			margin-top: 10px;
			margin-bottom: 10px;
			border: solid black 1px;
			background-color: #BFB28D;
		}

	</style>
		
</head>

<body>

	<div id="header">
	</div>

	<div id="corps">

		<form name="form1" method="post">

			<div id="AA" class="sousdiv">
			Lorem ipsum
			</div>
			
			<div id="BB" class="sousdiv">
			Lorem ipsum
			</div>
		
		</form>

	</div>

	<div id="footer">
	</div>

</body>

</html>


Voici ce que j'obtiens lorsque j'applique un border-top: none et un border-bottom: none au div corps :

http://nsa07.casimages.com/img/2009/04/29/09042906043385803.jpg

Et voici ce que je souhaite obtenir, sans les bordures basse et haute du div corps ici présentes :

http://nsa07.casimages.com/img/2009/04/29/090429060454651719.jpg

En passant, sur cette dernière copie d'écran, pourquoi y-a-til plus d'espace entre le Lorem ipsum du bas et le footer qu'entre le Lorem ipsum du haut et le header ? Smiley biggol

Merci d'avance pour votre aide. Smiley cligne
Modifié par Mafate (29 Apr 2009 - 18:27)
Bonsoir,

1. TOUJOURS UTILISER UN DOCTYPE.

2. Lire cet article sur la fusion des marges.

a écrit :
En passant, sur cette dernière copie d'écran, pourquoi y-a-til plus d'espace entre le Lorem ipsum du bas et le footer qu'entre le Lorem ipsum du haut et le header ?

Aucune idée. Théoriquement il ne devrait pas y avoir de différence. Les pistes pouvant expliquer cette différence sont, à mon avis:
- le navigateur (testé avec Internet Explorer 6 ou 7?);
- le mode de rendu Quirks (cf. mon premier point ci-dessus, faire des recherches sur ces concepts ne sont pas maitrisés).

Bonne continuation.
Bonsoir Florent,

Et merci pour ton aide. J'utilise bien-sûr un DOCTYPE dans la vraie vie, en l'occurence celui-ci, mais j'avais épuré mon code pour ne pas surcharger mon post :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


J'ai géré mon problème de marge avec un padding et cela fonctionne très bien ! Smiley cligne

Concernant ma dernière question, le navigateur que j'utilise est Firefox 3.0.10, aussi je ne pense pas que cela vienne de lui. As-tu d'autres suggestions à ce propos ?

Encore merci.
Mafate a écrit :
As-tu d'autres suggestions à ce propos ?

Utiliser Firebug pour vérifier quels styles s'appliquent exactement, à quel caractéristique de quel élément correspondent les écarts, etc. Et éventuellement nous donner l'adresse d'une page de test en ligne où on pourra effectuer ce genre de test.
Sujet clos
Aller à