18041 sujets

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

Adaptation concernant le tuto "design fluide"

J'ai lu avec intérêt le tuto :

http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant

et notamment ce passage :
a écrit :
Comment faire des colonnes de même hauteur ?

En adaptant légèrement ce tutoriel, on devrait pouvoir appliquer la technique dite des « colonnes factices » pour réaliser un design avec trois colonnes de même hauteur.


Mais je bute lamentablement. Smiley biggol

Mon site est centré, et la tranche qui se répète se trouve dans cette partie centrée.
le souci c'est que si les colonnes de droite ou gauche (float) sont plus longues que la centrale (relative), l'image ne va pas jusqu'à la colonne la plus longue.

(Je voulais vous joindre l'image de tranche mais il y a une erreur de script : elle fait pourtant bien moins de 200k...mais 955px x 3px)

Voici le code :

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Problème avec les blocs de coté</title>
	<style type="text/css">
		html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0;
	font-size: 12px;
	font-style: inherit;
	font-weight: inherit;
	color: #70869a;
	}
	
	#conteneur {
	position: relative;
	margin: 0 auto;
	text-align: left;
	width: 955px;
	background: #ffffff url(tranche_article.gif) repeat-y;
	}
		p {margin-top: 0; text-align: center; background: moccasin;}
		
		div#colonne1 {
			float: left;
			width: 240px;
			padding: 1px 0;
		}
		div#colonne2 {
			float: right;
			width: 240px;
			padding: 1px 0;
		}
		div#centre {
			padding: 1px 20px;
			margin-left: 240px;
			margin-right: 240px;
		}
	</style>
</head>

<body>
<div id="conteneur">

	<p>Entete</p>
	<div id="colonne1">
	<h2>colonne1</h2>
	colonne1<br>colonne1<br>colonne1<br>colonne1<br>colonne1<br>colonne1<br>colonne1<br>colonne1<br>		
	colonne1<br>colonne1<br>colonne1<br>colonne1<br>colonne1<br>colonne1<br>colonne1<br>colonne1<br>				
	</div><!-- fin de div#colonne1 -->
	
	<div id="colonne2">
	<h2>colonne2</h2>
	colonne2<br>colonne2<br>colonne2<br>colonne2<br>colonne2<br>colonne2<br>colonne2<br>colonne2<br>
	colonne2<br>colonne2<br>colonne2<br>colonne2<br>colonne2<br>colonne2<br>colonne2<br>colonne2<br>
	</div><!-- fin de div#colonne2 -->
	
	<div id="centre">
	<h2>centre</h2>
	centre<br>centre<br>centre<br>centre<br>centre<br>centre<br>centre<br>centre<br>centre<br>centre<br>
	</div><!-- fin de div#centre -->
	
</div><!-- fin de div#conteneur -->
</body>
</html>


Merci d'avance si quelqu'un a une idée.
Bonjour,

Est-ce que tu t'es documenté sur la méthode des colonnes factices, citée dans le tutoriel (avec un lien qui va bien)? Quelle partie de l'article publié sur Pompage.net ne te semble pas claire?
Bonjour, mon problème c'est que je pensais avoir compris
a écrit :
le secret, embarrassant de simplicité
d'utiliser l'image de fond qui fait 955px X 3px qui est placé dans le conteneur... Je n'ai pas trouvé d'autre astuce
Ahhhhh Smiley fache je suis dégouté ! Je viens de comprendre l'astuce, mais c'est vraiment pas sympa de leur part : je ne l'ai pas vu indiquée : pour ce truc "simple" fonctionne, il FAUT ajouter un footer, même vide avec une propriété clear:both. C'est évident quand on le voit mais ça va mieux en le disant. Smiley lol

A bientôt.
beyonder a écrit :
Ahhhhh Smiley fache je suis dégouté ! Je viens de comprendre l'astuce, mais c'est vraiment pas sympa de leur part : je ne l'ai pas vu indiquée : pour ce truc "simple" fonctionne, il FAUT ajouter un footer, même vide avec une propriété clear:both. C'est évident quand on le voit mais ça va mieux en le disant. Smiley lol
A bientôt.

C'est qu'alors tu n'auras pas lu avec assez d'attention le tutoriel fourni et réalisé par Florent, notamment les liens externes Smiley cligne et que tu seras passé à coté des notions de dépassement de flottants et du contexte de formatage Smiley cligne

Cdt,
Sylvain
Comme le dit Sylvain, non, il ne faut pas. Si on a déjà un pied de page dans le conteneur, un clear: both peut être pas mal. Dans le cas inverse, on utilisera plutôt un contexte de formatage avec un overflow: hidden. Faire une petite recherche sur le dépassement des flottants (petite indication: la FAQ en parle).
Sujet clos
Aller à