mini_yang

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

Me revoilà. 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 ?... 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.

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/

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

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...

Merci pour le lien je vais jeter un oeil.

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