Problème de mise en page (div ?)

[mini_yang]

Bonjour,

Alors voila, c'est la première fois que je crée un site avec des balises div et une feuille de style donc je suis archidébutante

J'ai un problème de mise en page. Apparemment sur firefox il ne se pose aucun problème. Par contre sur IE (6 ou 7) j'ai un décalage au niveau du conteneur.

Je pense que le problème est dans la feuille de style... est-ce un problème de dimensions ? Merci de bien vouloir me corriger

http://xelane.freehostia.com/

J'ai passé la page sous validateur HTML mais je ne suis pas parvenue à corriger toutes les erreurs. Donc, je n'ai pas pu passer sous validateur CSS

Voici le CSS

*{
margin:0;
padding:0;
}

a img
{
border: 0px;
}

body
{
	width: 800px;
	margin:auto; /* Pour centrer la page */
	margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom: 20px;	/* Idem pour le bas du navigateur */
	background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc  */
}

#page
{
	margin: auto;
	width:800;
	height:800;
}

#en_tete
{
   width: 800px;
   height: 300px;
   margin-bottom: 20px;
}

#menu_horizontal
{
   width: 800px;
   height: 25px;
   margin-top: 10px;
   margin-bottom: 0px;
}

/* Le menu */

#menu /* Ma colonne menu de la page */
{
   margin-top: 20px;
   float: left; /* Le menu flottera à gauche */
   width: 182px; /* Très important : donner une taille au menu */
   clear: left;
}

.sous_menu /* Les sous-menus */
{
   background-color: #626262;
   border: 0px;
   margin: 0px;
   width: 180px;
}

.titletext /* Tous les titres (de menus et de corps) */
{   
   color: #FFFFFF;
   font-size: 13pt;
   font-family: Comic sans MS, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.sous_menu .linktext /* Les liens du menu */
{
   font-size: 10pt;
   font-family: Comic sans MS, "Arial Black", "Times New Roman", Times, serif;
}

.sous_menu div /* Toutes les div se trouvant dans un sous-menu */
{
  width: 180px;
  border: 0px;
  padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
/*  padding-left: 10px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
  margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
  margin-bottom: 2px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

.sous_menu .title /* Cellule de titre de menu */
{
   width: 180px;
   height: 26px;
   background-image: url(./images/Menu_gauche/01title.gif);
   background-repeat: no-repeat;
   border: 0px;
   margin: 0px;
   padding-top: 0px;
   text-align: center;
}

.sous_menu .head /* Cellule du haut du menu */
{
   width: 180px;
   height: 15px;
   background-image: url(./images/Menu_gauche/02head.gif);
   background-repeat: no-repeat;
   border: 0px;
   margin: 0px;
}

.sous_menu .middle /* Cellule du milieu du menu */
{
   background-image: url(./images/Menu_gauche/03middle.gif);
   background-repeat: repeat-y;
   border: 0px;
   width: 180px;
   margin: 0px;
   padding-left: 20px;
   padding-right: 20px;
}

.sous_menu .bottom /* Cellule du bas du menu */
{
   height: 19px;
   background-image: url(./images/Menu_gauche/04bottom.gif);
   background-repeat: no-repeat;
   border: 0px;
   width: 180px;
   margin: 0px;
}

.sous_menu a /* Tous les liens se trouvant dans un menu */
{
   color: #000000;
}

.sous_menu a:hover /* Quand on pointe sur un lien du menu */
{
   color: black;
}

/* Le corps de la page */

#corps
{
   margin-left: 200px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   margin-top: 20px;
   padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   background-color: #626262; /* Une couleur de fond pour le corps */
   border: 0px; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

#corps .text /* Le texte du contenu */
{
   font-size: 10pt;
}

#corps .title /* Cellule de titre du corps */
{
   width: 600px;
   height: 26px;
   background-image: url(./images/Conteneur/01titlec.gif);
   background-repeat: no-repeat;
   border: 0px;
   margin: 0px;
   text-align: center;
}

#corps .head /* Cellule du haut du corps */
{
   width: 600px;
   height: 12px;
   background-image: url(./images/Conteneur/02headc.gif);
   background-repeat: no-repeat;
   border: 0px;
   margin: 0px;
}

#corps .middle /* Cellule du milieu du corps */
{
   background-image: url(./images/Conteneur/03middlec.gif);
   background-repeat: repeat-y;
   border: 0px;
   width: 600px;
   margin: 0px;
   padding-left: 20px;
   padding-right: 20px;
}

#corps .bottom /* Cellule du bas du corps */
{
   height: 17px;
   background-image: url(./images/Conteneur/04bottomc.gif);
   background-repeat: no-repeat;
   border: 0px;
   width: 600px;
   margin: 0px;
}

#corps #text /* Le paragraphe du conteneur */
{
   font-size: 10pt;
   font-family: Comic sans MS, "Arial Black", "Times New Roman", Times, serif;
   font-color: #000000;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   text-align: center;
   color: #B3B3B3;
}

Dernièrement, je ne sais pas comment marche l'encodage des pages, d'où les caractères bizaroïdes...

Désolé si je m'exprime mal... et merci d'avance

[Edit captain_torche : ]Merci d'utiliser la balise codebox pour les codes longs

Modifié 8 Décembre 2006 par captain_torche

[xou]

Bonjour et bienvenue sur le Hub,

Je n'ai pas regardé ton code mais à te lire je pense que ce lien va t'être utile:

http://openweb.eu.org/articles/dimensions_boites_css/

[mini_yang]

Merci pour le lien je vais jeter un oeil.

[mini_yang]

A propos du lien sur les doctype, je suis déjà en xhtml strict... donc je ne vois plus qu'une solution

=> revenir aux vieilles tables...

Modifié 9 Décembre 2006 par mini_yang

[karnabal]

Mouais, 'fin c'est tristounet de revenir à la mise en page avec les tables. Pars des gabarits que tu trouveras ici.

Modifié 9 Décembre 2006 par karnabal

[Dudu]

Bonjour

je crée un site avec des balises div

C'est une mauvaise chose, on ne le répétera jamais assez :!:

Supprimer les tableaux pour tout remplacer par du <div> ne sert à rien. Ce qui est important en revanche c'est d'utiliser les balises qu'il faut au bon endroit: un <div> s'il faut un diviseur, une <table> s'il faut un tableau, un <h1> s'il faut un titre, un <p> s'il faut un paragraphe, etc...

Dans le lien que tu donnes, TOUT (ou presque) est encapsulé dans des balises <div>, même les menus !

Idéalement:

• La bannière mériterait d'être un <h1>, dont l'image serait spécifiée en CSS (et pas un <div> contenant l'image directement dans le code HTML)
  
• Le menu mériterait d'être une liste <ul> dont les éléments seraient des <li> (et pas une avalanche de <div>)
  
• Les mots "Menu" et "Accueil" devraient être des <h2> (pas dans des <div> ...)
  
• Aucune balise, même <div> ne doit être vide de contenu (c'est à dire <div></div>)
  
• Toutes les images "décoratives" ou "présentatives" doivent être codées dans la feuille de style
  

En fait, désolé mais tu n'as pas encore vraiment la bonne façon de travailler, et ton problème vient essentiellement de là. Évidemment, en partant sur de mauvaises bases HTML, tu n'obtiendras pas un CSS correct, ou très difficilement.

À mon avis, tu gagnerais beaucoup à partir d'un code HTML propre. Soit en l'apprenant, soit en partant sur des gabarits tout-faits.

• Si tu souhaites apprendre, voici un excellent tutoriel. Profites-en pour regarder le code source de cette page, et le comparer au tien.
  
• Si tu souhaites partir de mises en page déjà faites, je te renvoie au lien donné ci-dessus par karnabal.
  

Quoi qu'il en soit, nous sommes là en cas de problème. Et on va t'aider à faire ta mise en page de façon correcte, reviens nous dire ce qu'il en est

[mini_yang]

Bon alors voila. J'ai fait une grosse modification, c'est à dire que, comme me l'a proposé Dudu, j'ai réduit le nombre de div au profit de balises plus adaptées et ça a pas mal arrangé les choses => merci

Maintenant, je me retrouve face un autre léger problème, vous verrez sous IE6 que je me retrouve avec une sorte de bordure (qui, je sais, n'en est pas une au sens propre du terme) entre le titre et le menu/contenu. Et d'autre part, j'ai un peu de mal avec les puces... quelques soient les attributs que je mets à la "list-style" (actellement none) j'ai toujours un retrait supérieur à la longueur "margin" fixée...

Je veux bien éditer le code de la feuille de style de mon premier post, mais vu que je n'ai pas le bouton éditer contrairement aux forums phpbb, je vous la mets ici :

<style type="text/css">

*{
margin:0;
padding:0;
}

a img
{
border: 0px;
}

body
{
	width: 800px;
	margin:auto; /* Pour centrer la page */
	margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom: 20px;    /* Idem pour le bas du navigateur */
	background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc  */
}

#en_tete
{
   width: 800px;
   height: 325px;
   margin-bottom: 20px;
}

/* Le menu */

#menu /* Ma colonne "menu" de la page */
{
   margin: 0px;
   float: left; /* Le menu flottera à gauche */
   width: 180px; /* Très important : donner une taille au menu */
   clear: left;
}

.menu_haut
{
   background: url(images/Menu_gauche/menu-head.gif) top no-repeat;
}

.menu_bas
{
   background: url(images/Menu_gauche/menu.gif) bottom no-repeat;
   padding: 0px 5px 5px 5px;
}

h2
{
margin: 0px 0px 11px 0px;
font-size: 12pt;
text-align: center;
color: #FFFFFF;
}

li
{
list-style: none;
font-size: 10pt;
}

a
{
color: #000000;
text-decoration: none;
font-weight: bold;
}

a:hover {
text-decoration: overline underline;
}
/* Le corps de la page */

#corps
{
   margin: 20px 0px 20px 200px;
   padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   background-color: #626262; /* Une couleur de fond pour le corps */
   border: 0px; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}

.contenu_haut
{
   background: url(images/Conteneur/contenu-head.gif) top no-repeat;
}

.contenu_bas
{
   background: url(images/Conteneur/contenu.gif) bottom no-repeat;
   padding: 0px 20px 20px 20px;
}

p
{
font: bold, 10pt, Comic sans MS;
color: #000000;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   text-align: center;
   color: #B3B3B3;
}
</style>

Et merci encore une fois pour votre aide

Modifié 10 Décembre 2006 par mini_yang

[xou]

Le comportement d'internet explorer est toujours différent de celui de firefox ou les autres navigateurs respectant d'avantage les standards du web et il te faudra de temps en temps utiliser les commentaires conditionnels, notemment très souvent avec les listes.

http://forum.alsacreations.com/faq/#item53

http://www.blog-and-blues.org/articles/Les...pour_IE_Windows

Mais dans ton cas c'est certainnement l'utilisation des balises imbriquées (div,ul,li...) et leur style qui pose problème. Mets plutôt un lien vers une page que du code, tu auras certainnement plus de réponses, car là honnetement je n'ai pas le temps de chercher alors que sur une page j'idfentifierais tout de suite le problème.

[mini_yang]

Merci, je vais voir ça.

Je ne sais pas si c'est ça, mais voici une page de menu, qui s'inclut dans la page index dans laquelle la feuille de style est appelée.

http://xelane.freehostia.com/accueilmenug.php

Je rappelle la page index : http://xelane.freehostia.com/

[Damien_]

ET pour tes vidéos, sous IE6 et IE7 tu dois cliquer une fois pour activer le controle et ensuite pouvoir controler le lecteur .. tu dois juste rajouter cette ligne pour ne pu avoir a activer le contrôle.

<script type="text/javascript" src="ieupdate.js"></script>

et inserer le fichier que tu trouvera ici: http://www.dam1en.fr/php/ieupdate.js

Bye, ton site est sympa visuelement

Modifié 12 Décembre 2006 par Damien_

[mini_yang]

Me revoilà.

Le comportement d'internet explorer est toujours différent de celui de firefox ou les autres navigateurs respectant d'avantage les standards du web et il te faudra de temps en temps utiliser les commentaires conditionnels, notemment très souvent avec les listes.

(...)

Mais dans ton cas c'est certainnement l'utilisation des balises imbriquées (div,ul,li...) et leur style qui pose problème.

Ok, j'ai compris le principe. Cependant, il reste à trouver un code accessible pour ie, ce qui a été un échec. En effet j'utilise les div pour séparer les différentes parties de mes 2 cadres menu et contenu (titre, contenu du cadre, bas). Mais entre ces parties (=div) il y a un espace que je ne parviens pas à supprimer (même après avoir vérifié tout ce qui est border margin etc...). Pour cette "séparation" (uniquement), j'ai choisi les tables. J'arrive à un rendu assez proche du résultat souhaité (ici) sur IE7. Seulement sur IE6, le contenu est décalé jusqu'en dessous du menu. Est-ce parce que le contenu n'a pas assez de place pour rester à droite du menu ? Et pourquoi ?...

ET pour tes vidéos, sous IE6 et IE7 tu dois cliquer une fois pour activer le controle et ensuite pouvoir controler le lecteur .. tu dois juste rajouter cette ligne pour ne pu avoir a activer le contrôle.

<script type="text/javascript" src="ieupdate.js"></script>

et inserer le fichier que tu trouvera ici: http://www.dam1en.fr/php/ieupdate.js

Bye, ton site est sympa visuelement

Merci pour l'info, j'ai mis l'appel au script en head mais je ne parviens pas à changer quoi que ce soit...

Merci à tous pour votre aide.

Modifié 18 Décembre 2006 par mini_yang

[mini_yang]

Je up, mon problème est toujours d'actualité