Problème de largeur du footer

Linoa · 8 Mars 2009

Bonjour m'sieurs dames,

Débutante webmaster, les seuls petits sites que j'ai créés jusque-là étaient faits à base de tableaux. Aujourd'hui, alors que j'ai pour projet de créer un site sur mon expérience de française à Londres (projet déjà bien entamé puisque j'ai terminé la rédaction du contenu), j'ai décidé d'apprendre les bases du xhtml et css, sans passer par la case tableaux... Mais bon du coup tout ça est nouveau pour moi, et je tente tant bien que mal de comprendre comment ça fonctionne !!

Pour cela, je me suis renseignée sur le site alsacreations.com, et ai refait l'un de leurs tutoriels (celui qui ressemble le + à ce que je souhaite avoir pour mon futur site, sauf que perso j'aimerais rajouter un menu horizontal en + du menu vertical, mais je n'y suis pas encore !!), dont voici l'url : http://www.alsacreations.com/tuto/lire/564...me-hauteur.html

Grâce au tuto, j'ai pu comprendre les bases du positionnement. Et vu que j'avais fait plusieurs erreurs, j'ai aussi appris à les corriger.

Sauf qu'il m'en reste une, et je n'arrive pas à trouver d'où elle vient... Voici ma page avec le résultat du tuto : http://coursmci.free.fr

Comme vous le verrez, mon footer est plus large que ma page... c'est moche :whistling: (ceci dit il est ok sur IE6, youpiiii)

Sauriez-vous me dire d'où vient ce problème ?

Voici mes différents codes :

Code html :

<!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>
		<title>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/menu.css" media="screen" />
		<!--[if lte IE 6]>
		<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
		<![endif]-->
	</head>

<body>
<div id="global">
			<div id="header">
				<h1>2cols4u</h1>
			</div>
			<div id="center">
				<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 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>	
				</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>

main.css :

/* CSS Document */
html, body 
{
	height: 100%;
	margin: 0;
}
body
{
	margin: 0;
	padding: 0;
	text-align: justify;
	font: 90% "Trebuchet MS", sans-serif;
	background: #fff url(../img/fond.png);
}
div#global 
{
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	background: url(../img/global.png) center repeat-y;
}
div#header 
{
	background: #7fcf2e url(../img/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 
{
	padding-bottom: 30px; 
	overflow: auto;
}
div#footer 
{
	position: absolute;
	width: 100%;
	bottom: 0;
	background: #7fcf2e url(../img/footer.png) repeat-x;
	color: #fff;
}
div#footer p 
{
	margin: 2px 0;
	font-size: 0.9em;
}
div#sidebar h3, div#footer p, div#sidebar p  
{
	padding: 0 10px;
}
div#content 
{
	float: right;
	width: 530px;
	margin: 10px;
}
div#content h2 
{
	padding-left: 35px;
	background: #fff url(../img/titre.png) left center no-repeat;
	color: #6c0;
}
div#content h3 
{
	color: #c00;
	font-variant: small-caps;
}
div#sidebar 
{
	float: left;
	width: 200px;
}
a 
{
	color: #6c0;
	font-weight: bold;
}
a:hover 
{
	color: #c00;
}

menu.css :

/* CSS Document */
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;
	color: #390;
	font: small-caps 1.1em/30px Georgia,serif;
	text-decoration: none;
}
ul#menu li a:hover 
{
	background-position: left bottom;
	color: #c30;
}

ie.css :

/* CSS Document */
div#global{
	height: 100%;
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/global.png", sizingMethod="scale");
	position: static;
	}
div#content {
	display: inline;
	}
div#center {
	overflow: visible;
	height: 1%;
	}
div#content, div#sidebar {
	margin-top: 15px;
	}
a, pre {
	position: relative;
	}
body {
	position: relative;
	}

Petite question également : vaut-il mieux que je garde un css "menu" à part du "main", ou vaut-il mieux que je regroupe tout dans le css "main" ?

Un grand merci d'avance et à bientôt !

Linoa

paolodelmare · 8 Mars 2009

Ton site semble déjà très conforme.

une solution :

div#footer {
	background: rgb(127, 207, 46) url('footer.png') repeat-x scroll 0% 0%;
	position: absolute;
	width: 750px;
	bottom: 0pt;
	color: rgb(255, 255, 255);

}

Ton #global est en largeur fixe, il n'est pas utile de mettre footer en width: 100%, tu n'as qu'a fixer la largeur que tu as choisie (750px)

Il faut savoir qu'IE et le reste de la galaxie n'interprètent pas les modèle de boites de la même manière : cf www.alsacreations.com/article/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html

Tu peux utiliser l'extension webdevelopper(de chris pederick) pour firefox, c'est très utile pour trouver les petits bugs.

En tout cas bravo, c'est déjà très propre

Linoa · 8 Mars 2009

Hello Paolo,

Merci beaucoup pour ta réponse rapide !

En effet, j'ai changé la largeur de mon footer en mettant 750px, là le rendu est impec !

Pour ce qui est du site, je n'ai aucun mérite, j'ai suivi le tuto uhuh !! Ca va peut-être se gâter quand je tenterai d'appliquer tout ça à mon futur site, on verra bien. M'enfin au moins, malgré mes difficultés, j'ai compris les bases, et c'est super intéressant !

Linoa · 8 Mars 2009

Oops, j'ai une autre petite question...

Sur ma page, les titres <h3> du tuto ("Navigation", "Brèves", "Liens") s'affichent en noir, gras, ils ne prennent pas en compte le style donné dans ma feuille CSS :

div#content h3
{
	color: #c00;
	font-variant: small-caps;
}

Sauriez-vous pour quelle raison je ne me retrouve pas avec le rendu voulu ? Pourtant le <h2> est ok...

Encore merci !

PotatoesJunky · 8 Mars 2009

Tu as défini 2 types de H3, 1 en sidebar et l'autre en contenu.

Ce n'est pas possible, il ne doit exister qu'une définition pour les titres (de H1 à H7).

Je te conseille de renommer le H3 de la sidebar en H4, par exemple

Linoa · 8 Mars 2009

Merci beaucoup pour ta réponse, PotatoesJunky !

Alors du coup j'ai changé mon div#sidebar h3 en div#sidebar h4 et ai rajouté les lignes suivantes dans mon css :

div#sidebar h4
{	color: #c00;
	font-variant: small-caps;
}

Là mon rendu est ok ! :thumbsup:

Mille mercis pour votre aide !

Modifié 8 Mars 2009 par Linoa

**Dadou** · 8 Mars 2009

Tu as défini 2 types de H3, 1 en sidebar et l'autre en contenu.
Ce n'est pas possible, il ne doit exister qu'une définition pour les titres (de H1 à H7).

C'est faux, il peut tout a fait y avoir plusieurs définitions pour les titres quand ces derniers sont dans des zonages différents

paolodelmare · 8 Mars 2009

Dadou est dans le vrai

Il est techniquement possible de mettre autant de Hn que tu veux, mais d'un point de vue sémantique, il est préférable de garder h1 et h2 uniques afin de conserver une bonne hiérarchisation de ta page.

Comme tu débutes en CSS, je te recommande de bien étudier les sélecteurs, c'est ce qui permet toute la puissance des feuilles de styles.

PotatoesJunky · 8 Mars 2009

Dadou > tout-à-fait d'accord, mais étant donné que Linoa est débutante, j'ai préféré simplifier

**Dadou** · 8 Mars 2009

Pas trop quand même

Dadou est dans le vrai
Il est techniquement possible de mettre autant de Hn que tu veux, mais d'un point de vue sémantique, il est préférable de garder h1 et h2 uniques afin de conserver une bonne hiérarchisation de ta page.

Pas d'accord d'un point de vue sémantique le zoning quand il est bien fait permet de garder une bonne hiérarchisation de la page

Dudu · 9 Mars 2009

Salut

Tu as défini 2 types de H3, 1 en sidebar et l'autre en contenu.
Ce n'est pas possible

Bien sûr que si c'est possible ! :huh:

il ne doit exister qu'une définition pour les titres (de H1 à H7).

C'est tellement faux que <h7> n'existe pas. Ça va de <h1> à <h6>.

Je te conseille de renommer le H3 de la sidebar en H4, par exemple

Ce n'est vraiment conseillé de choisir ses balises en fonction de leur rendu :nonono:

Linoa · 10 Mars 2009

Hello !

Merci à tous pour votre intervention !

Euh bon alors par contre je ne sais pas ce qui est le mieux du coup uhuh ! Là j'ai remis mon sidebar h3, pour le moment il a de toute façon le même aspect que mon content h3.

Dudu · 10 Mars 2009

Euh... chez moi ils s'affichent en rouge et en petites capitales, comme prévu.

Quel navigateur utilise-tu ?

Linoa · 10 Mars 2009

Euh oui c'est bien ça, pourquoi ? Là où j'avais fait une erreur, c'est que je pensais à tort que mon sidebar h3 allait reprendre les propriétés de mon content h3... Du coup j'ai rajouté les propriétés de mon sidebar h3 dans ma feuille CSS, ça a rectifié le problème.

J'utilise Firefox 3.0.7, et vérifie sur IE7 et IE6.

Modifié 11 Mars 2009 par captain_torche
Inutile de citer le message précédent; on vient de le lire (captain_torche)

Connexion

Problème de largeur du footer

Sujets conseillés

Linoa

paolodelmare

Linoa

Linoa

PotatoesJunky

Linoa

Dadou

paolodelmare

PotatoesJunky

Dadou

Dudu

Linoa

Dudu

Linoa

Veuillez vous connecter pour commenter

Parcourir

Activité