28173 sujets

CSS et mise en forme, CSS3

Mise en forme avec float

Bonjour à tous,

Mon soucis n'étant pas simple à expliquer, le mieux est de recopier mon code ci-dessous pour voir ce que ça donne (sous Firefox pour l'instant), et ensuite mon soucis est :
1. Avec le <hr class="spacer" /> le rectangle gris s'étend à la taille du menu de gauche (ce que je ne veux pas, car le <hr> n'est là que pour éviter que l'image en float déborde du rectangle gris).
2. Si je vire le <hr class="spacer" /> (vous pouvez tester), le rectangle gris ne s'étend plus, mais l'image déborde...

Comment faire pour résoudre cela ?

Merci d'avance pour votre aide Smiley smile 


<html>

<head>
	<style type="text/css">
	#container {
		width: 800px;
		border: 1px solid #F00;
		padding: 10px;
		margin: 0 auto;
	}
	#menu {
		width: 200px;
		float: left;
		border: 1px solid #0F0;
	}
	#content {
		margin-left: 220px;
		border: 1px solid #00F;
	}

	#content div {
		background-color: #C1C1C1;
		width: 400px;
		margin: 0 auto;
	}
	.spacer {
		border: 0 none;
		height: 0;
		width: 0;
		clear: both;
		margin: 0;
		padding: 0;
	}
	</style>
</head>

<body>

<div id="container">
	<div id="menu">
		<div>Menu 1</div>
		<div>Menu 2</div>
		<div>Menu 3</div>
		<div>Menu 4</div>
		<div>Menu 5</div>
	</div>
	<div id="content">
		<div>
			<img src="http://www.io.tudelft.nl/research/dfs/mobility/Images/Other/Renault_Ublo.jpg" style="float: left; padding: 5px;" />
			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
			<hr class="spacer" />
		</div>
	</div>
</div>

</body>
</html>

Smiley biggol
Modifié par aurapp (03 Oct 2007 - 17:17)
j'ai guide sur le html... il me dis que certain styles que tu as utilisé pour le hr sont déprécié ou même ne devrait pas exister.

Renseigne toi
Après validation XHTML puis validation CSS sur le W3C, voici mon code sans aucune erreur (et pour le style du <hr>, il n'y avait aucune erreur).

Revoici mon code... si quelqu'un peut regarder pour me donner une idée ou une piste de solution, ça serait cool Smiley smile 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<style type="text/css">
	#container {
		width: 800px;
		border: 1px solid #F00;
		padding: 10px;
		margin: 0 auto;
	}
	#menu {
		width: 200px;
		float: left;
		border: 1px solid #0F0;
	}
	#content {
		margin-left: 220px;
		border: 1px solid #00F;
	}

	#content div {
		background-color: #C1C1C1;
		width: 400px;
		margin: 0 auto;
	}
	hr.spacer {
		border: 0 none;
		height: 0;
		width: 0;
		clear: both;
		margin: 0;
		padding: 0;
	}
	</style>
	<title>Test</title>
</head>

<body>

<div id="container">
	<div id="menu">
		<div>Menu 1</div>
		<div>Menu 2</div>
		<div>Menu 3</div>
		<div>Menu 4</div>
		<div>Menu 5</div>
	</div>
	<div id="content">
		<div>
			<img src="http://www.io.tudelft.nl/research/dfs/mobility/Images/Other/Renault_Ublo.jpg" style="float: left; padding: 5px;" alt="" />
			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
			<hr class="spacer" />
		</div>
	</div>
</div>

</body>
</html>
Salut,


Arf! overflow: auto; sur #container et #content div non?
En éliminant le <hr> Smiley biggol
Modifié par ghost (03 Oct 2007 - 23:33)
Je confirme qu'évidemment cela fonctionne (une FAQ de ce site traite le pb) mais attention aux effets de bord, car comme le précise Laurent Denis ce bricolage induit un comportement certes conforme à l'effet visuel désiré mais non validé par la spec CSS2.

En bref, un navigateur parfaitement conforme risque de rendre overflow:auto impuissant à résoudre ce type de pbs... Smiley confused
a écrit :
Je penche aussi a priori pour l'effet de bord, dont la permanence dans de futurs navigateurs n'est pas garantie : à propos d'overflow:auto, CSS2 déclare en effet que "l'interprétation de cette valeur dépend de l'agent utilisateur, cependant, celui-ci devrait fournir un mécanisme de défilement quand les boîtes débordent." La question est à creuser dans la spec.


Source : http://www.svay.com/blog/index/2005/02/27/241-une-nouvelle-solution-aux-problemes-de-float-fait-surface

reste à savoir lequel des deux commentaires est antérieur à l'autre ! Smiley ravi
Bonjour,

Ce n'est pas un effet de bord, mais une application de la propriété overflow documentée par CSS2.1, qui ne figurait pas dans CSS2.0. D'où le commentaire de Maurice à l'époque où cela a été mis à jour.
Bonjour Laurent on peut donc en déduire que cette méthode est acceptable d'un point de vue standard et donc applicable sans (trop de) risques sur les navigateurs tendant à la standardisation, si je ne m'abuse ?

Ce qui permettrait de clore ce sujet.
Merci pour vos réponses.
Pour finioler un peu, une autre question :
L'overflow est normalement censé ajouter des barres de défilements si le contenu déborde.
Dans mon cas, le conteneur en overflow n'a pas de hauteur (height) donc par défaut, il est en height:auto.
Comment alors un navigateur pourrait-il considérer (même à l'avenir) qu'un contenu déborde et qu'il faut ajouter des barres de défilement alors même que le contenu ne peut pas déborder vu qu'il n'y a pas de height ?

Sauf que, avec une image (dans mon cas) en float, et bien le contenu déborde. Mais je doute que les navigateurs aillent un jour jusqu'à calculer la hauteur d'une image pour voir si en théorie elle débordera d'un conteneur par rapport à son contenu texte...

Qu'en dites vous ?
Cela voudrait dire que le risque n'est pas énorme à utiliser overflow dans ce cas...
Sujet clos
Aller à