Aller au contenu

Problème de mise en page (div ?)

mini_yang

Par mini_yang
dans (X)HTML et CSS

 Partager

Sujets conseillés

mini_yang

mini_yang

Posté
Posté (modifié)

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 :blush:

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... :blush: et merci d'avance :)

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

Modifié par captain_torche
mini_yang

mini_yang

Posté
  • Auteur
Posté (modifié)

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é par mini_yang
karnabal

karnabal

Posté
Posté (modifié)

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

Modifié par karnabal
Dudu

Dudu

Posté
Posté

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 ! :wacko:

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

mini_yang

Posté
  • Auteur
Posté (modifié)

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 :hypocrite::thumbsup:

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é par mini_yang
xou

xou

Posté
Posté

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

Damien_

Damien_

Posté
Posté (modifié)

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é par Damien_
mini_yang

mini_yang

Posté
  • Auteur
Posté (modifié)

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é par mini_yang

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...