18041 sujets

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

Design à deux colonnes de même hauteur : soucis de footer et coquilles

Bonjour à tous,

Je viens de lire, et refaire au fur et à mesure, cet excellent tuto.

Au final j'ai un aspect identique à trois chouilles prêts, mais celui qui me pose le plus soucis est le footer : il "dépasse" sur le coté droit lorsque je précise une largeur de 100%.

Si je la spécifie en dur, en pixels, il n'y a aucun soucis. Mais j'aurais tout de même voulu avoir la raison de ce changement.

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Création d'un design à 2 colonnes - 1. Le code XHTML</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	</head>
	<body>
		<div id="global">
			<div id="header">
				<h1>2cols4u</h1>
			</div>
			<div id="center">
				<div id="content">
					<h2>Etape 1 : le code XHTML</h2>
					<p>Vous trouverez ci-dessous le code de la page HTML que vous êtes en train de lire. Et oui, malgré l'absence de feuille de style, la page est déjà lisible ! Les liens fonctionnent, les titres sont mis en évidence, les listes structurées, etc.</p>
					<p>La page est divisée horizontalement en trois parties distinctes :</p>
					<ol>
						<li>l'en-tête (identifié par "<em>header</em>"), destiné à accueillir la bannière et éventuellement une devise ou slogan.</li>
						<li>la partie centrale ("<em>center</em>", bien vu !) contiendra les deux colonnes qui nous intéressent. Elle comprend donc elle-même 2 zones distinctes (les divisions <em>sidebar</em> et <em>content</em>).</li>
						<li>le pied de page ("<em>footer</em>") comprend diverses informations que l'on souhaite afficher discrètement sur toutes les pages, en général des mentions de copyright ou les coordonnées & références de la société ...</li>
					</ol>
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
					<p>blablabla</p>	
				</div>
				<div id="sidebar">
					<h3>Navigation</h3>
					<ul id="menu">
						<li><a href="./" title="Introduction">Introduction</a></li>
						<li><a href="etape1.html" title="Première étape : le code (X)HTML">Etape 1</a></li>
						<li><a href="etape2.html" title="Deuxième étape : le positionnement">Etape 2</a></li>
						<li><a href="etape3.html" title="Troisiéme étape : couleurs & images de fond">Etape 3</a></li>
						<li><a href="etape4.html" title="Quatrième étape : le menu">Etape 4</a></li>
						<li><a href="etape5.html" title="Cinquième étape : titres & liens">Etape 5</a></li>
						<li><a href="etape6.html" title="Sixième étape : ajustements pour IE">Etape 6</a></li>
					</ul>
					<h3>Brèves</h3>
					<p>Pourquoi j'aime les standards du W3C ? Pour <a href="http://openweb.eu.org/articles/pourquoi_standards/" title="Openweb : Pourquoi les standards du W3C">ça</a></p>
					<h3>Liens</h3>
					<ul>
						<li><a href="http://www.alsacreations.com" title="AlsacréationS apprendre XHTML, les CSS et les standards W3C de la conception Web">Alsacréations</a></li>
					</ul>
				</div>
			</div>
			<div id="footer">
				<p>Je suis un pied de page. Et comme disait Groucho Marx, si vous n'aimez pas mes opinions, j'en ai d'autres.</p>
			</div>
		</div>
	</body>
</html>


CSS :

html {
	background: #ddd url(html.png);
	}
html, body {
	height: 100%;
	margin: 0;
	}
body {
	font: 90% "Trebuchet MS", sans-serif;
}
div#global {
	min-height: 100%;
	width:750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	background: url(global.png) center repeat-y;
	}
div#header {
	background: #7fcf2e url(header.jpg) no-repeat;
	color: #fff;
	height: 201px;
	position: relative;
	}
div#header h1 {
	margin: 0;
	position: absolute;
	bottom: 10px;
	left: 30px;
	font: 3em Georgia, serif;
	}
div#center {
	/* Pour éviter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px;
	overflow: auto;
	}
div#footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	background: #7fcf2e url(footer.png) repeat-x;
	color: #fff;
	}
div#content {
	float: left;
	width: 530px;
	margin-left: 10px;
	}
div#sidebar {
	float: right;
	width: 200px;
	}

ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#menu li a {
	display: block;
	height: 30px;
	line-height: 30px;
	background: url(img/fond_lien.png) no-repeat left top;
	padding-left: 35px;
	margin: 2px 0;
	border-bottom: 1px solid #7fcf2e;
}
ul#menu li a:hover {
	background-position: left bottom;
}
ul#menu li a {
	color: #390;
	font: small-caps 1.1em/30px Georgia,serif;
	text-decoration: none;
}
ul#menu li a:hover {
	color: #c30;
}
div#content h2 {
	padding-left: 35px;
	background: #fff url(titre.png) left center no-repeat;
	color: #6c0;
	}
div#content h3, div#sidebar h3 {
	color: #c00;
	font-variant: small-caps;
	}
div#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	}
a {
	color: #6c0;
	font-weight: bold;
	}
a:hover {
	color: #c00;
	}



Ensuite, je sais pas si je peux me permettre mais il y a deux trois p'tites coquilles :

A l'étape 2, le positionnement, le tuto indique de mettre un float left aux deux divs sidebar et content. Mais le fragment de code présenté montre un float left et un float right. Et ce sont ces floats là qui sont utilisés pour le reste du tuto.

A l'étape 3, le fragment de code présente deux fois "padding : 0 10px" dans le style div#global


Voilà, et merci de vos éventuelles réponses.
Modifié par Fenris (31 Jan 2007 - 00:01)
Sujet clos
Aller à