[Résolu] [Tuto design à 2 colonnes] Problème de footer

(reprise du message précédent)

je viens de tester sur un autre ppc sous ie6 avec ecran un peu moins grand en résolution et le résultat est désastreux....

pitié aidez moi!!!!!!!!!!!!!

je suis sûr que mon CSS spécial ie6 est pris en compte donc je ne comprends plus là.....

Donne-moi une page en ligne, et je pourrai p-e t'aider. Mais là, j'ai pas le courage d'examiner le code ...

http://skeud.online.free.fr/test_skeud.online.free.fr/

voilà, si besoin est je peux te transmettre tout mon code...

merci d'avance c'est sympa

Avant toute chose, passer son code au validateur, html & css. Ici, il y a manifestement un problème d'encodage.

Ensuite, nettoie tes feuilles de style ! tu as mélangé la feuille de style principale & celle dédiée à IE 6 et inférieurs.

comment ça j'ai mélangé les deux feuilles de style?

je n'ai fais qu'un copier coller de celle sur alsacréations...
Modifié par Skeud (24 Nov 2006 - 11:37)

Je ne vois pas trop le rapport avec ce sujet, où il était question d'un bug CSS de Konqueror. Je crois qu'ici, sans offense, l'erreur est humaine

a écrit :
je n'ai fais qu'un copier coller de celle sur alsacréations...

Je t'assure qu'il y a des lignes de code qui ne se trouvent pas dans le tutoriel. Je le saurais, quand même

Un exemple ?

#global {
   height: 100%;
   min-height: 100%;
}

ne se trouve absolument pas dans la feuille de style principale du tuto.

Compare toi-même, il y a d'autres différences.
Modifié par Sopo (24 Nov 2006 - 11:41)

excuse moi alors mais il est vrai que l'effet produit si je laisse 1% de height ressemblait à DocFabio mais bon je vais d'abord vérifier...je m'excuse de m'etre emporter...

peux tu m'indiquer les 3 liens direct pour que je télécharge les 3 fichiers index + 2CSS stp


encore merci...

et désolé

La feuille de style principale :

/* POSITIONNEMENT */
html, body {
	height: 100%;
	margin: 0;
	}
#global {
	min-height: 100%;
	width: 750px;
	margin: 0 auto;
	position: relative;
	}
#footer {
	position: absolute;
	width: 750px;
	bottom: 0;
	}
#center {
	/* éviter la superposition 
	du pied de page et du contenu */
	padding-bottom: 60px; 
	overflow: auto;
	}
#sidebar {
	float: right;
	width: 199px;
	}
#content {
	/* On laisse de la place à droite 
	pour l'autre colonne */
	float: left;
	width: 530px; 
	}
/* FONDS */
html {
	background: #ddd url(img/html.png);
	}
#global {
	padding: 0 10px;
	background: url(img/global.png) center repeat-y;
	}
#header {
	background: #7fcf2e url(img/header.jpg) no-repeat;
	color: #fff;
	height: 201px;
	}
#header h1 {
	margin: 0;
	}
#footer {
	background: #7fcf2e url(img/footer.png) repeat-x;
	color: #fff;
	}
/* MENU */
ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#menu li a {
	display: block;
	height: 30px;
	background: url(img/fond_lien.png) no-repeat left top;
	padding-left: 35px;
	margin: 2px 0;
	border-bottom: 1px solid #7fcf2e;
	color: #6c0;
	font: small-caps 1.1em/30px Georgia,serif;
	text-decoration: none;
}
ul#menu li a:hover {
	background-position: left bottom;
	color: #c30;
}
/* DECO */
body {
	font: 90% "Trebuchet MS", sans-serif;
	}
#content, #sidebar h3, #footer p, #sidebar p {
	padding: 0 10px;
	}
#content {
	padding: 0;
	margin-left: 10px;
	}
#content h2 {
	padding-left: 35px;
	background: #fff url(img/titre.png) left center no-repeat;
	color: #6c0;
	}
#content h3, #sidebar h3 {
	color: #c00;
	font-variant: small-caps;
	}
#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	}
a {
	color: #6c0;
	font-weight: bold;
	}
a:hover {
	color: #c00;
	}
#header {
	position: relative;
	}
#header h1 {
	position: absolute;
	margin: 0;
	padding: 0;
	bottom: 10px;
	left: 30px;
	font: 3em Georgia, serif;
	}

La feuille de style à réserver à IE <= 6 :

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

Le code html est le même pour toutes les pages du tuto, je te laisse le récupérer toi-même

Avec quel logiciel travailles-tu ? Vérifie que l'encodage utilisé correspond bien avec celui déclaré dans le <head> du document (j'utilise utf-8, dans le tuto).

je travaille avec Notepad++.

j'ai refais tout à partir de vos 2 fichiers et ça marche déjà mieux..

mis à part le fait que j'obtiens de drôle de symboles à la place des accentuations....auriez vous une idée?

merci encore sopo

Skeud a écrit :
mis à part le fait que j'obtiens de drôle de symboles à la place des accentuations....auriez vous une idée?

c'est le problème d'encodage dont je te parlais. Dans Notepad++, vas dans "Format" et sélectionne UTF-8. Ou change le charset dans la balise meta "http-equiv" (dans le <head> du fichier html) pour iso-8859-1.

merci beaucoup mr sopo!!!
sinon pour IE6 je ne peux pas tester là mais je pense que ça va aller!!!
je mets RESOLU dès que c'est ok