Problème height à 100%

[BartWordV6]

Bonjour,

Désolé de venir vous embêter avec un sujet qui à été déjà pas mal abordé, mais après avoir tenté pas mal de tutos pour résoudre mon problème, je suis désespéré .

Voici donc la page à problèmes : http://www.elisha-cuthbert.fr/beta/a-propos.php.

Comme vous l'avez déjà compris, il faudrait que le contenu occupe toute la page, afin que le menu ne sorte pas.

Hop, voici donc le plus important du CSS :

html, body {margin: 0 0 0 0; background-color:#EDEDED; font-family: tahoma; font-size: 11px; text-align:justify; color: #646464;
height: 100%; width: 100%; padding: 0; border: none}
#global {width:798px; padding: 0 0px; margin: 0 auto; position: relative;}
#conteneur {width:798px; background:url(images/bgTexte.jpg); }
#header {width:797px; height:276px; background:url(images/header.jpg);} 
#menu {float:left; margin-left:35px; margin-top:-35px; line-height:16px}
#menutitle {width:214px; height:30px; background:url(images/menuTop.gif);}
#menutitle_f {width:214px; height:30px; background:url(images/menuTop_f.gif);}
#menutitle_s {width:214px; height:30px; background:url(images/menuTop_s.gif);}
#menuconteneur {width:214px; background:url(images/menuBg.gif);}
#menucontenu {width:206px; padding: 0 0px; margin: 0 auto; position: relative; font-family: arial; font-size: 13px; text-align:center; color: #646464;}
#menufin {width:214px; height:2px; background:url(images/menuSeparateur.gif);}
#contenu {width:498px; margin-left:264px; margin-top:-10px;}
#footer {width:797px; height:75px; background:url(images/footer.jpg); margin-top:0px;}

Je sais, c'est mal organisé, je suis vraiment désolé .

Si vous comprenez vraiment pas, vous n'avez qu'a me le dire, sinon il y a des commentaires dans le code de la page .

Seriez vraiment sympa de m'aider .

Merci d'avance

Edit: Si vous avez le temps, j'ai aussi un problème de compatibilité avec IE : le site n'est pas centré, puis il y a un problème au niveau des menus. Mais bon c'est pas le plus important.

[dragondz]

Dans le footer ajoute

clear: both;

comme ça il entoure tout le contenu, mais il ne descend pas jusqu'en bas!

Sous FF ça marche.

A+

[BartWordV6]

Merci beaucoup

Une idée du pourquoi le site n'est pas centré sous IE ?

[Dan]

Une idée du pourquoi le site n'est pas centré sous IE ?

Rajoute un margin:auto à #conteneur

Dan

[BartWordV6]

Merci, mais là ca ne marche pas

Le site est toujours collé à gauche sous IE

[Dan]

Désolé, ce n'est pas pour #conteneur mais pour #global.

Remplace pour #global "margin: 0 auto" par "margin:auto"

[BartWordV6]

Toujours collé à gauche

Je remets le CSS, il à changé depuis le 1er post

html, body {margin: 0 0 0 0; background-color:#EDEDED; font-family: tahoma; font-size: 11px; text-align:justify; color: #646464; padding: 0; border: none; position:relative;}
#global {width:798px; padding: 0 0px; margin:auto; position:relative;}
#conteneur {width:798px; background:url(images/bgTexte.jpg);}
#header {width:797px; height:276px; background:url(images/header.jpg);} 
#menu {float:left; margin-left:35px; margin-top:-35px;}
#menutitle {width:214px; height:30px; background:url(images/menuTop.gif);}
#menutitle_f {width:214px; height:30px; background:url(images/menuTop_f.gif);}
#menutitle_s {width:214px; height:30px; background:url(images/menuTop_s.gif);}
#menuconteneur {width:214px; background:url(images/menuBg.gif);}
#menucontenu {width:206px; padding: 0 0px; margin: 0 auto; position: relative; font-family: arial; font-size: 13px; text-align:center; color: #646464; line-height:16px;}
#menufin {width:214px; height:2px; background:url(images/menuSeparateur.gif);}
#contenu {width:498px; margin-left:264px; margin-top:-10px;}
#footer {width:797px; height:75px; background:url(images/footer.jpg); margin-top:0px; clear: both;}

[Dan]

Chez moi avec ces styles, la page est centrée sur IE7 et Firefox alors qu'elle ne l'est pas sous IE7 avec ton CSS

html, body {background-color:#EDEDED; font-family: tahoma; font-size: 11px; text-align:justify; color: #646464; padding: 0; border: none; }
#global {width:798px; padding:0px; margin:auto; }
#conteneur {width:798px; background:url(images/bgTexte.jpg);}

[sopo]

Salut,

c'est pour IE6 ou IE7 que ton site n'est pas centré ?

Si c'est IE6 qui pose problème, essaie de supprimer les commentaires & les espaces qui se trouvent avant le DOCTYPE. Ils font peut-être basculer IE6 en mode quirks, ce qui l'empêche d'appliquer les marges automatiques correctement.

Dan > en principe,

global {
   margin: 0 auto;
}

devrait centrer le site, non ?

Modifié 26 Mai 2007 par sopo

[BartWordV6]

Salut,

Je n'ai pas testé sous IE6, mais en tout cas sous IE7 ce n'est pas centré.

[captain_torche]

Ton souci principal (qui t'a déjà été signalé), est le commentaire apparaissant en haut de ton fichier.

Pour que ton navigateur (quel qu'il soit) se comporte de la manière que tu souhaites, il ne faut pas qu'il y ait QUOI QUE CE SOIT (pas de ligne vide, même pas le plus petit espace) avant ton Doctype.

Si tu veux garder ton source tel qu'il est actuellement (message d'avertissement + nombreuses lignes avant le contenu), il FAUT que tu mettes le doctype AVANT le commentaire.

[nicolas_g]

dans ton <body> ajoutes la propriété text-align:center

Ca permet de centrer les sites sous ie. Ce n'est pas très propre car ensuite il faut définir partout tes text-align. Mais au moins ca fonctionne.

[BartWordV6]

Merci pour toutes vos réponses

Le problème est réglé

[sopo]

Salut,

dans ton <body> ajoutes la propriété text-align:center

Ca permet de centrer les sites sous ie. Ce n'est pas très propre car ensuite il faut définir partout tes text-align. Mais au moins ca fonctionne.

Argh ! Ce n'est utile que pour IE5, si on travaille en mode de conformité avec les standards (comme on devrait toujours le faire) et non en mode quirks !

Ce n'est pas de l'intégrisme ou du fanatisme, c'est simplement une question d'espérance de vie de la page. Un jour, peut-être, les navigateurs abandonneront leurs modes de rendu adaptés aux sites préhistoriques, et ce jour-là toutes les pages sur lesquelles vous aurez fait ce genre de compromis risquent de voler en éclat. Ce n'est qu'une possibilité, mais pourquoi prendre ce risque alors qu'on peut s'en passer ?