Souci décalagerésolu

Bonjour à tous !.

j'ai un petit souci de décalage. Mon menu gauche est bien en place, mais le centre et le menu droit sont complètement décalés En bas.
Quelqu'un pourrait-il me donner un coup de pouce ?.
Je vous en remercie infiniment.
Amicalement.
Julien.
Voici mon site :http://ile.chrispat.free.fr/index.php

.menu  
    { 
    margin-top: 1.1em;  /* */ 
    left: 1.2em;  /* */ 
    width: 9em;  /* 14em*/ 
    border: 1px solid #6495ED;  /* */ 
    background-color: #FFCC00;  /* */ 
    color: black;   /* */ 
    } 

.menu ul  
    { 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    }  

.menu li  
    { 
    margin: 0px; 
    padding: 0px; 
    } 

.menu p  
    {       /* configuration des titres */ 
    clear:both; 
    font-weight: bold; 
    font-size: 1.2em;  /* */ 
    width: 7.5em;     height: 1.3em; /* */ 
    margin: 0px; 
    border: 1px solid #6495ED; 
    background-color: #6495ed; /* */ 
    color: #FFFFFF; /* */ 
    text-align: center; 
    } 

.menu a  
    { 
    margin-left: 0.6em; 
    padding-top: 0.2em; 
    padding-bottom: 0.2em; 
    width: 8em;    height: 1.3em; 
    display: block; 
    text-align: left; 
    text-decoration: none; 
    color: #000000; 
    font-size: 1em; 
    } 
      
.menu a:hover  
    { 
    background-color: #add8e6;  /*#add8e6 */ 
    color: #000000; 
    text-align: left; 
    text-decoration: none; 
    }

Modifié par Julien2B (25 May 2005 - 17:28)

Salut,

Merci de bien vouloir afficher tes exemples correctement avec les balises de [ CODE]

Peut être qu'un petit float : left dans le menu de gauche t'apporterais de l'aide.

Bonjour,
essaie d'appliquer un float: left; à ton menu de gauche. Normalement, le contenu ira s'aligner à côté.

Edit: grilled
Modifié par lab_siteweb (16 May 2005 - 13:51)

Héhé grillage de 7 mn ! faut actualiser de temps en temps

Bonjour
Excuse-moi Raphaël pour ce petit oubli.
je me doute bien qu'il faut que je me mette float: left; j'ai déjà essayé de le placer, mais ça m'a donné que des erreurs. Je dois sûrement mal le placer.
Faudrait que je mette ou ?.
Je vous remercie.
Julien.

À ce que je vois, il y a plusieurs divs pour les menus de gauche. Je dirais que tu les englobent tous dans un autre div (ma fois pour le code ça fait pas très beau) et à ce div tu lui donnes la propriété float: left;

Va voir sur ce thread http://forum.alsacreations.com/topic.php?fid=4&tid=3798&s= c'est un peu la même mise en page que tu recherches !


grosso modo la structure devrait être la suivante pour ton menu gauche :

<div id="menugauche><-------- auquel tu appliques un float:left
<p>premier titre de menu</p><-------- a definir dans le CSS l'effet recherché !
<ul><----- premier menu
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><--------------- fin du premier menu auquel tu aplliques un margin-bottom pour le séparer du suivant
<ul><-------------- debut du 2eme sous-menu
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div><-------- fin de la div menu le reste du code suit et devrait s'aligner correctement

inutile donc de mettre plusieurs fois <div class="menu">

Dis nous si tu n'y arrive pas !

<div class="menu"> 
    <p id="deux">compteur</p> 
    </div> 
    <div class="menu"> 
    <p id="trois">galeries photos</p> 
    <ul class="liste"> 
    <li><a href="index.php">Accueil</a></li> 
    <li><a href="nocario1.php">Nocario 1</a></li> 
    <li><a href="nocario2.php">Nocario 2</a></li> 
    <li><a href="nocario3.php">Nocario 3</a></li> 
    <li><a href="pietricaggio1.php">Pietricaggio 1</a></li> 
    <li><a href="pietricaggio2.php">Pietricaggio 2</a></li> 
    <li><a href="pietricaggio3.php">Pietricaggio 3</a></li> 
    <li><a href="erbaggio1.php">Erbaggio 1</a></li> 
    <li><a href="erbaggio2.php">Erbaggio 2</a></li> 
    <li><a href="michel.php">Saint-Michel</a></li> 
    <li><a href="neige1.php">Nocario neige 1</a></li>
<li><a href="neige2.php">Nocario neige 2</a></li>
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="merci.php">Remerciements</a></li> 
    </ul> 
    </div> 
    <div class="menu"> 
    <p id="quatre">histoire</p> 
    <ul class="liste"> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    </ul> 
    </div> 
    <div class="menu"> 
    <p id="cinq">la généalogie</p> 
    <ul class="liste"> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    <li><a href="#">link</a></li> 
    </ul> 
    </div>

Bonjour Gilles.

Merci pour ton aide, j'ai encore essayé de mettre float:left; dans le menu, comme tu peux le voir en dessous. Et voilà ce que cela donne sur la page de mon site.
http://ile.chrispat.free.fr/index.php

.menu  
    { 
    margin-top: 1.1em;  /* */ 
    left: 1.2em;  /* */ 
    width: 9em;  
float:left;/**/ 
    border: 1px solid #6495ED;  /* */ 
    background-color: #FFCC00;  /* */ 
    color: black;   /* */ 
    } 

Il ne faut laisser qu'un seul <div class="menu"> qui encadre tout tes <ul>.
Tu verras ca va marcher. Sinon les UL c'est bon !
Modifié par gilles6975 (16 May 2005 - 15:17)

Gilles ! Un très grand remerciement pour toutes ton aide.
Tout marche à merveille sous Internet Explorer.
Par contre avec firefox il y a et une très grande marge entre le bas du menu, et le bas de la page.
À tu et une solution ?.
Faut toujours qu'il y ait une erreur quelque part...
Je déteste quand ça marche pas, pourquoi tant de haine contre moi.
Merci encore.
Julien.http://ile.chrispat.free.fr/index.php

Cadeau pour toi de quoi continuer ton développement sur de bonnes bases
CSS :

/***********************************************/
/* CONTENEUR                                                           */
/***********************************************/
body {
   padding:0px;
   margin:0px
}
#template {
  font:  14px  arial, helvetica, verdana, sans-serif;
  color: #06c;
  list-style-type: none;
  border-top: 5px solid #333;
  margin: 0px auto 0px auto;
  width: 80%;
  background: #f90;
}
/***********************************************/
/* ENTETE                                                                   */
/***********************************************/
#header {
  background: #F00;
  border: 1px solid #000;
  height: 70px;
  text-align: center;
  color: #000;
  font-weight: bold;
  font-size: 2em;
}
#tetecorsegauche {
  float: left;
  margin-left: 10px;
}
#tetecorsedroite {
  float: right;
  margin-right: 10px;
}
/***********************************************/
/* MENU GAUCHE                                                        */
/***********************************************/
#menu{
    float:left;
    width: 140px;
    border: 1px solid #6495ED;
    background-color: #FFCC00;
    color: black;
}
#menu ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#menu li a{
    margin: 0px;
    padding: 5px;;
    display: block;
    height: 1.1em;
    color: #000;
    text-decoration: none;
}
#menu a:hover{
    background-color: #add8e6;
}
#menu p{
    font-weight: bold;
    font-size: 1.2em;
    border: 1px solid #6495ED;
    background-color: #6495ed;
    color: #fff;
    text-align: center;
    margin: 0px;
    }
/***********************************************/
/* MENU DROITE                                                         */
/***********************************************/
#Rmenu {
  background: #f60;
  float: right;
  width: 140px;
}
/***********************************************/
/* PARTIE CENTRALE                                                    */
/***********************************************/
#content {
  position: relative;
  background: #fc6;
  border: thick green double;
  margin: 0px 141px;
}
/***********************************************/
/* PIED DE PAGE                                                         */
/***********************************************/
#footer {
  background: #f00;
  clear: both;
  border-top: 2px dotted #ddd;
  padding: 5px 0;
  text-align: center;
}
#footer p{
  margin: 0px;
  padding: 0px;
}
/***********************************************/
/* GALERIE PHOTO                                                      */
/***********************************************/
#gallery {
text-align:center;
}
#gallery p {
display:inline;
}
#gallery span {
  display:block;
  display:inline-table;
  display:inline-block;
}
#gallery p img {
  margin:5px;
  border: 0px solid #000;
  cursor:hand;
  width:292px;
  height: 135px;
}

- XHTML (quasiment rien touché) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Nocario</title>
<meta name="author" content="masterjmc" />
<meta name="copyright" content="copyright ©2003-2005 masterjmc" />
<meta name="rating" content="General" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="[b]test8.css[/b]"  /!\remettre le bon nom de fichier /!\

media="screen" title="Feuille css principale"/>
<script type="text/javascript" src="javaimages.js"></script>
</head>
<body>

<div id="template">
     <div id="header">
          <img id="tetecorsegauche" src="design/logo.gif" alt="testa maura" />
          <img id="tetecorsedroite" src="design/logog.gif"alt="testa maura" />
          Commune de Nocario<br />
          en Haute Corse
     </div>

     <div id="menu">
          <p>compteur</p>
          <p>galeries photos</p>
             <ul>
                 <li><a href="index.php">Accueil</a></li>
                 <li><a href="nocario1.php">Nocario 1</a></li>
                 <li><a href="nocario2.php">Nocario 2</a></li>
                 <li><a href="nocario3.php">Nocario 3</a></li>
                 <li><a href="pietricaggio1.php">Pietricaggio 1</a></li>
                 <li><a href="pietricaggio2.php">Pietricaggio 2</a></li>
                 <li><a href="pietricaggio3.php">Pietricaggio 3</a></li>
                 <li><a href="erbaggio1.php">Erbaggio 1</a></li>
                 <li><a href="erbaggio2.php">Erbaggio 2</a></li>
                 <li><a href="michel.php">Saint-Michel</a></li>
                 <li><a href="neige1.php">Nocario neige 1</a></li>
                 <li><a href="neige2.php">Nocario neige 2</a></li>
                 <li><a href="fontaine.php">La fontaine</a></li>
                 <li><a href="merci.php">Remerciements</a></li>
             </ul>
           <p>histoire</p>
             <ul>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
             </ul>
           <p>la généalogie</p>
             <ul>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                  <li><a href="#">link</a></li>
             </ul>
    </div>
    <div id="Rmenu">
             <ul>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>

                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
                 <li><a href="#">link</a></li>
            </ul>
     </div>
<div id="content">
La commune de Nocario, se situe en Haute Corse à 600m d'altitude au pied du Mont San Pedrone, qui culmine à 1767m et domine toute la Castagniccia comprend deux hameaux, Erbaggio, Pietricaggio. Il y a 3 chapelles, Sainte Barbara, Saint Martin, Saint Jean-Baptiste, et l'église Sainte Michel. Le nombre d'habitants est de 47 en l'an 2000. Le début de implantation du village de Nocario remonterait avant 1081...


<div id="gallery">
<p><span><img src="imaccueil/accueil01.jpg" alt="l'image agrandie" onclick="montre('imaccueil/accueil1.jpg')"><br>Village de Nocario aujourd'hui.</span></p>
<p><span><img src="imaccueil/accueil02.jpg" alt="l'image agrandie" onclick="montre('imaccueil/accueil2.jpg')"><br>Village de Nocario dans les années 50.</span></p>
<p><span><img src="imaccueil/accueil03.jpg" alt="l'image agrandie" onclick="montre('imaccueil/accueil3.jpg')"><br>Village de Nocario dans les années 20.</span></p>
</div>

</div>

<div id="footer">
<p>Le site de la commune de Nocario a été créé en 2003</p>
</div>
</div>
</div>
</body>
</html>

Modifié par gilles6975 (16 May 2005 - 18:37)

Bonjour Gilles !.

Et me voilà devant mon ordinateur, je regarde sur le forum, et la je vois tout mon site recopier très proprement. C'est vraiment un très beau cadeau que tu m'as fait la.
Ça me touche vraiment beaucoup, et je ne sais pas comment te remercier.
Vraiment, sincèrement un très grand merci à toi gilles.
J'ai encore une petite chose à te demander, pour les images, (galerie photo) de la page d'accueil c'est très bien.
Mais par exemple, la page ( Nocario 1 ) avant j'avais les images dans des cadres, et trois photos par ligne. ( Nocario 2 )
Mais avec ton modèle je n'ai plus qu'une image par ligne, et l'image est tout a gauche.
Ça fait très moche. J'aurais voulu garder ce modèle. L'idéal aurait été de mettre le modèle ci-dessous dans la feuille de style principal, et celui que tu as fait dans une feuille à par pour les images de la page d'accueil. Tu en penses quoi ?.
Voici mon site :http://ile.chrispat.free.fr/index.php

dl.gallery
{
border: 1px solid #000;
background-color: #9933FF;/* couleur d'origine #ddd*/
width: 102px;/* largeur du cadre */
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}

.gallery dt { 
 }

.gallery dt img
{
border: 1px solid #000;
width: 100px;
height: 100px;
}

.gallery dd
{
margin: 0;
padding: 0;
}

merci.
Julien.

A priori les images sur la page d'accueil pourront être amenées à disparaitre quand tu feras des mises à jour. Plutot que de leur donner des arguments de mise en page trop complexe peut être utiliser la balise

#content img{centrer etc..}

En ce qui concerne tes galeries photos elles contiendront toujours des photos donc il est bon de leur creer une class spécifique qui soit adapté pour elle. Une liste de définition comme celle dont tu copies le code (dt dd dl etc..) peut être la bonne solution.

Pour tout cela pas la peine de creer une autre feuille de style. Simplement mettre les éléments à la suite des autres.

Nota : donc doctype est du XHTML 1.0 strict fait atention a bien fermer tes balises. Celles qui n'ont pas d'éléments fermant (meta img br hr etc..) doivent contenir à la fin un /. Par exemple <br />. De même les liens et les images doivent posseder un texte alternatif explicite.

Une image apparaitra donc dans le code XHTML en 1.0 strict de la manière suivante :

<img src="mamaison.jpg" alt="photo de ma maison au soleil" />

Modifié par gilles6975 (17 May 2005 - 15:12)

Bonjour Gilles !.

En fait, pour les images de la page d'accueil, j'ai changé le nom , comme sa plus de problème.

<div id="galleryaccueil">

donc, mon problème du jours, car évidemment il faut toujours qu'il y en est un,
c'est par exemple dans la page de Nocario ou les autres, avec firefox les images apparaissent bien, mais sous Internet Explorer, elles sont cachées.
Je m'arrache les cheveux depuis deux heures avec ce problème. Franchement c'est décourageant quand sa marche pas, si l'on pouvait avoir une baguette magique !
Amicalement.
Julien.

J'arrive pas a comprendre à quoi cela peut servir ?

#galleryaccueil p {
display:inline;
}
#galleryaccueil span {
display:block;
display:inline-table;
display:inline-block;
}

Normalement les listes de définition utilisés pour faire des diaporama sont assez simple à mettre en oeuvre. Va voir ici c'est bien expliqué. Pas besoin de coller du span et autre. Voir pour ca l'article sur ce site "trop de div tue les divs".

De même dans ton développement prend les etapes une par une ! Sur ton site y' a du javascript qui traine alors que le positionnement n'est même pas terminé. Fait attention à fermer tes balises (la sous ie le site n'est plus centré !).
Enfin arrete de creer 50 style css. En général un seul suffit et au pire il en faut 3 soit un par type de media (ecran, impression). Tout ton site doit pouvoir être mis en page par un seul fichier CSS.
La tu vas finir par avoir plus de fihier *.css que de *.php

Bonne lecture et bon courage

Je viens de jeter un petit coup d'oeil à tes travaux !

- en ce qui concerne l'epace en bas de la page, faits une recherche sur les propriétés flottantes et notamment sur la propriété clear.
- Pour la 2 ème fois je te rappelle qu'avec un doctype (en haut de ton code) spécifiant du XHTML 1.0 strict tu es obligé de fermer toutes les balises donc il faut faire diparaitre les <br> pour les remplacer par des <br />. Idem pour les images et les balises meta et les balises objet (java par exemple).
- Dans ton code tu met un prologue XML etc... (tout en haut) qui ne sert strictement a rien ici ! En plus il provoque des bugs sous ie.
- Dans le header dans l'ordre on a la déclaration du doctype suivi du titre de la page puis des balises meta. hez toi il y a une balise meta qui se ballade !
- Pour les images l'attribut alt comme son nom l'indique est un texte alternatif servant a decrire l'image et non a indiquer l'action que cela provoque. La petite main de navigation suffit a montrer qu'une action va se produire. Au pire se servir de l'attribut title qui lui au moins est visible sous FF.

- Pour tes positionements, tu m'as l'air un peu perdu. Je t'invite a aller voir sur ce lien : http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS et de bien etudié ce que tu souhaites. les gabarits sont tout fait tu n'as qu'à choisir le tien. Je ne sais pas trop si tu veux une largeur fluide ou non. De même je ne sais pas si tu cherches une mise en page 3 colonnes ou si tu veux que les menus ne soient visibles qu'en haut de la page et qu'ensuite le contenu prennne toute la place (code que je t'avais soumis).
En ce qui concerne les postionements tu aurais interet à lire (et a assimiler) la technique. Voir l'article de Laurent Denis : http://www.openweb.eu.org/articles/initiation_flux/

Bonjour professeur Gilles !.

Tout d'abord merci pour tout les conseils.
Alors voilà, j'ai fermé toutes les balises, comme tu me la recommandé.
Supprimé toutes les balises qui ne servaient à rien.
J'ai aussi corrigé le doctype en haut de toutes les pages, et ça me corrige les pages, sous Internet Explorer elle se retrouve centrer.
Et j'ai validé toutes les pages du site, sur le site du w3c, aucune erreur n'a été détectée, j'en suis assez fier.
Ce que je n'arrive pas à comprendre, s'est que mes galeries d'images, ne se mettait pas sur mon font saumons entouré d'un liseré vert, il y a sûrement une erreur quelque part, mais franchement, je n'arrête pas de vérifier et je ne trouve rien.
Peut-être qu'un oeil expert trouvera la solution.
Amicalement.
Élève Julien.

Ca commence a venir ! C'est quand même mieux quand le code est propre et qu'il n'y a pas plein de lignes parasites !

En ce qui concerne ton fond saumon (j'aime pas la couleur mais bon) tu ne le vois pas parceque ta liste de definition (dt dl etc...) à l'attribut float. Or si tu regardes le lien que je t'ai donné concernant les positionnements tu verras qu'un élément en float ne fait pas partie de ta page en tant que tel (si je puis dire). En fait dans ton code comme il est ecrit, la div avec le fond saumon ne contient virtuellement rien puisuqe les éléments float sont hors de la mise en page (par definition).
Donc pour expliquer au navigateur que la div saumon doit contenir les flottants on utilise un subterfuge qui consiste à créer par exemple :

.clearboth{clear:both}
et on peut mettre dans le XHTML
<br class="clearboth" />

De cette facon le navigateur sait que tout ce qui est entre le debut de la div saumon et ce br doit être affiché dans la div saumon ! C'est pour cela que je t'invitais a regarder les propriétés clear. Dans leur usage strict la propriété clear sert en fait à sortir du flux provisoire créer par des éléments en float.

Cependant dans ta mise en page (ne sachant pas que tu ferais ce style de gallerie) les éléments sont deja en float à savoir : le menu droit le menu gauche et la div conteneur. Un clear both met donc la pagaille dans la mise en page.
Une solution qui oblige a reprendre un peu le code est de mettre le menu gauche et droit en position: absolute (comme dans l'exemple des gabarits de ce site dont je t'ai mis le lien). De cette manièreil n'y aura qu'un seul flux celui des images et il te sera alors aisé d'utiliser cette propriété clear.

Enfin je te recommande d'adopter une charte graphique beaucoup plus simple et plus harmonieuse. Normalement 2 couleurs de fonds plus le header suffisent pour mettre en évidence le contenu du site. Multiplier les couleurs n'est pas forcemment une bonne solution. Surtout celle que tu choisis . Un orange tranché avec du violet, du rouge, du jaune pale, du bleu turquoise, du noir, etc.. Ca fait beaucoup. M'enfin si tu aimes, libre a toi