18073 sujets

Questions générales et questions de débutants

Probleme avec le survol menu +place un cadre [resolu]

Bonjour
apres avoir lu le livre CSS2 de Raphael qui est tres interressant j'ai fais un petit queque chose. mais dans ma page de trois colonnes avc un menu à gauche et une à droite quand je survol la colonne de droite je declanche le menu de gauche et vis versa que puis je faire pour eviter cela et je voudrais fare un cadre elastique dans les deux dimensions dans le coin droite et en bas de page peut on m'aider


<style type="text/css">
<!--

body                                   {
                                       margin:0;
                                       padding:0
                                       }
     
p                                      {
                                       margin:0 0 1em 0;
                                       }
     
h1                                     {
                                       height: 0;
                                       width: 1000px;
                                       background-color: #4c4e00;
                                       color: white;
                                       margin:0;
                                       text-align:center;
                                       }
     
#global                                {
                                        margin:0;
                                       width: 1000px;
                                       background-color:#666600;
                                       }
          
#gauche                                {
                                       
                                       float: left;
                                       width: 150px;
                                       background-color:#666600;
                                       color: white;
                                       }
          
#droite                                {
                                       
                                       float: right;
                                       width: 150px;
                                       background-color:#666600;
                                       color: white;
                                       }
          
#gauche p, #droite p                   {
                                       margin-left:1em
                                       text-align:right;
                                       }
                     
#gauche ul, #droite ul                 {
                                       margin:0 0 1em 0;
                                       }
                       
#gauche li, #droite li                 {
                                       liste-style-type:none;
                                       margin:0 0 0 1em;
                                       }
                       
#gauche li a, #droite li a             {
                                       color: white;
                                       texte-decoration: none;
                                            line-height: 20px;
                                       }
                           
#gauche li a:hover, #droite li a:hover {
                                        texte-decoration: underline;
                                            color:orange;
                                       }
                                       
#gauche tr                             {
                                       align="center"
                                       }
                                       
                                       
#contenu                               {
                                       margin-left: 150px;
                                       margin-right: 150px;
                                       background-color: #eaeae9;
                                       }
                                       
#contenu p                             {
                                       margin: 0 0 0 1em;
                                       }
                                       

                                       
                                       
#pied                                  {
                                       clear: both;
                                       width: 1000px;
                                       background-color: #cccc00;
                                       margin:0;
                                       text-align:center;
                                       }
                                       

-->
</style>



</head>


<body>

<h1>Groupement Catholique de Brétigny</h1>

<div id="global">
   <div id="gauche">
      <p>SECTEUR</p>
      
      <ul id="menu">
      <li><a href="http://absalonp.free.fr/Trombinoscope.htm">Trombinoscope</</a></li>
      <li><a href="http://absalonp.free.fr/pourcelebrerlafoi.htm">pour celebrer la foi</</a></li>
      <li><a href="http://absalonp.free.fr/pour_approfondir_sa_foi_d.htm">pour approfondir sa foi</</a></li>
      <li><a href="http://absalonp.free.fr/info_secteur.htm">info secteur</</a></li>
      <li><a href="http://absalonp.free.fr/pour_les_enfants_et_les_jeunes.htm">pour les enfants et les jeunes</</a></li>
      <li><a href="http://absalonp.free.fr/lesgrandesetapesdemaviechr.htm">les grandes etapes de ma vie chr</</a></li>
      <li><a href="http://absalonp.free.fr/pour_se_former.htm">pour se former</</a></li>
      <li><a href="http://absalonp.free.fr/temps_fort.htm">temps fort</</a></li>
      <li><a href="http://absalonp.free.fr/renseignements_divers.htm">renseignements divers</</a></li>
      <li><a href="http://absalonp.free.fr/vie_materielle_de_l.htm">vie materielle de l'eglise</</a></li>
      <li><a href="http://absalonp.free.fr/decouvrir.htm">decouvrir</</a></li>
      <li><a href="http://absalonp.free.fr/crea.htm">Compte rendu Equipe Animatrice</</a></li>
      </ul>
      <p></p>
      
   </div>
   
   <div id="droite">
      <p>HORS SECTEUR</p>
      
      <ul id="menu">
      <li><a href="http://absalonp.free.fr/Liste%20des%20Papes.htm">Liste des Papes</</a></li>
      <li><a href="http://www.levangileauquotidien.org">Evangile du jour</</a></li>
      <li><a href="http://absalonp.free.fr/prieres.htm">Prières</</a></li>
      <li><a href="http://absalonp.free.fr/liens.htm">Liens</</a></li>
      <li><a href="http://www.eudistes-france-afrique.org">Eudistes</</a></li>
      </ul>
    </div>
      
    
   <div id="contenu">
      <table>


        <tr>
            <td></td>
            <td align="center"><p><a href="http://catholique-evry.cef.fr/decou/decou002.php"><img src="H:\ESSAIS\nouvel1-small.jpg"</p></td>
            <td align="center"><p><a href="plessis.htm"><img src="H:\ESSAIS\plessis-small.gif"alt="plessis" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td align="center"><p><a href="flashs.htm"><img src="H:\ESSAIS\index.1.gif"</a></p></td>
            <td align="center"><p><a href="marolles.htm"><img src="H:\ESSAIS\marolles-small.gif"alt="marolles" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td align="center"><p><a href="http://catholique-evry.cef.fr/synode/equipe/equipe01.php"><img src="H:\ESSAIS\Lourdes-small.jpg"</a></p></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td align="center"><p>Diocese d'Evry</p></td>
            <td align="center"><p>Plessis-Paté</p></td>
            <td align="center"><p></p></td>
            <td align="center"><p>Marolles</p></td>
            <td align="center"><p>Synode</p></td>
            <td align="center"><p></p></td>
        </tr>
        
        
        <tr>
            <td></td>
            <td valign="bottom" align="center"><p><a href="bretigny.htm"><img src="H:\ESSAIS\bretigny-small.jpg"alt="bretigny" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td valign="middle" align="center"><p><a href="bretigny.htm"><img src="H:\ESSAIS\bretigny-small.gif"alt="bretigny" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td align="center"><p><a href="menu.htm"><img src="H:\ESSAIS\logo-small.jpg"alt="logo" title="cliquuez pour la voir Les renseignements du Secteur" border="0" /></a></p></td>
            <td valign="middle" align="center"><p><a href="leudeville.htm"><img src="H:\ESSAIS\leudeville-small.gif"alt="leudeville" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td><br />
            <td valign="bottom" align="center"><p><a href="CHEPTAINVILLE.htm"><img src="H:\ESSAIS\cheptainville-small.gif"alt="cheptainville" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td valign="top" align="center"><p>Bretigny</p></td>
            <td valign="top" align="center"><p>Bretigny</p></td>
            <td align="center"><p><a href="ISB%20-%20116.rtf">INFO.NET.SECTEUR</p></td>
            <td valign="top" align="center"><p>Leudeville</p></td>
            <td valign="top" align="center"><p>Cheptainville</p></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td align="center"><p><a href="vert_le_grand.htm"><img src="H:\ESSAIS\vertlegrand-small.gif"alt="vert le grand" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td align="center"><p><a href="echarcon.htm"><img src="H:\ESSAIS\echarcon-small.gif"alt="echarcon" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td></td>
            <td align="center"><p><a href="saint.htm"><img src="H:\ESSAIS\stvrain-small.gif"alt="saint-vrain" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td align="center"><p><a href="vert_le_petit.htm"><img src="H:\ESSAIS\vertlepetit-small.gif"alt="vert le petit" title="cliquuez pour la voir Les renseignements de la Paroisse" border="0" /></a></p></td>
            <td></td>
        </tr>
        
        <tr>
            <td></td>
            <td align="center"><p>Vert le Grand</p></td>
            <td align="center"><p>Echarcon</p></td>
            <td align="center"><p></p></td>
            <td align="center"><p>Saint-Vrain</p></td>
            <td align="center"><p>Vert le Petit</p></td>
            <td></td>
        </tr>
        
  </table>
  
  </div>
  <div id="pied">
      <p><img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=absalonp.dat&amp;dd=A">
         <img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=absalonp.dat&amp;display=clock">
         <img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=absalonp.dat&amp;display=date&amp;dformat=DDMMYY"></p>
  </div>
</body>
</html>

merci

Patrick
Modifié par absalonp (10 May 2006 - 13:06)
Bonjour absalonp,

Dans un premier temps, peut-tu éditer ton message et baliser ton code à l'aide du bouton code stp Smiley cligne

Sinon, je n'ai pas constaté ce que tu décris au niveau de tes menus.

Pour finir, je n'ai pas compris ce que tu désires faire ? un cadre élastique dans les deux dimensions de quoi ?
En complément de la remarque de blue sur le balisage du code, merci de donner un titre concret à ton sujet, ça ne veut rien dire là... on se doute bien que tu as besoin d'aide, comme 99% des gens qui créent un topic...
Bonsoir
En faite ma page est faite d'une entête de trois colonnes (une de chaque côté de 150px de large et une central) et d'un pied de page.
Mais dans la colonne de droite vers le bas (en dessous du menu)j'aimerais faire un cadre avec les bord arrondi et qu'il soit elastique en largeur et en hauteur bien sur dans la largeur de la colonne (150px) pour y mettre du texte.

et dans mon premier message le probleme que j'exposer s'est que lors ce que je passe la souris sur le menu de gauche le liens passe en orange ce qui est normal mais ce qui m'embete s'est que suivant ou je me trouve avec la souris j'arrive à declancher des liens qui sont dans le menu de la colonne de droite tout en etant dans la colonne de gauche et vis versa meme en etant dans la colone du centre.

merci pour votre aide
Patrick
Bonjour Patrick,

En fait, le souci pour tes liens, c'est que tu as mis :

</

avant :

</a>

dans tes listes.

Enlèves les et le problème disparaîtra.

Sinon, tu as des petites erreurs dans ton css :

Tu as oublié un point-virgule après :

margin-left:1em;

à ta div :

#gauche p, #droite p {


sinon

list-style-type:none;

n'a pas de e à list


text-decoration: none;

n'a pas de e à text

et

align="center"

ne marche pas en css.

Pour ton cadre tu peux aller voir la tu trouveras plusieurs exemples Smiley smile
bonjour

et merci blue,

effectivement je n'avais pas vu les erreurs ,mais je debute.je me suis inscrit au forum ensuite j'ai achete le livre de Raphael que j'ai mis un peut de temp à lire .mon but et de refaire mon site initial qui n'est pas tres bien ecrithttp://absalonp.free.fr
prost resolu je vous remerci tous

bonne journee Patrick
Bonjour Patrick,

Tout le monde a débuté un jour et fait des erreurs Smiley cligne

Pour dire que ton sujet est résolu, il faut que tu affiches [résolu] dans ton titre en éditant ton premier message.

Merci Smiley smile
Sujet clos
Aller à