Impossible de faire des menus corrects-Sos débutante

lamel · Message par **lamel** » 29 mai 2008, 11:51

Bonjour,

Après plusieurs jours de galère, et plusieurs tuto consultés, je ne trouve toujours pas la solution de mon pb.

J'ai essayé de me débrouiller avec le CSS, j'ai presque réussi mais à l'affichage dans IE, tout est décalé. Je m'explique un peu plus, je souhaite créer un menu vertical et un menu horizontal. Pour le menu vertical je pensais avoir réussi, mais quand j'affiche ma page tout paraît écrit plus gros et se décale, j'avais le même problème avec l'en-tête, mais apparemment ça fonctionne maintenant. Pour le menu horizontal, là j'ai encore plus de mal, je n'arrive pas à l'aligner, et des puces s'affichent alors que je n'ai rien demandé...
Est-ce que quelqu'un peut me donner des indices sur mes erreurs

Je vous met le code html.

Code : Tout sélectionner

<html>
<head>
  <title>Titre</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" href="essai" type="text/css">
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(225, 255, 253);"
 alink="#000099" link="#000099" vlink="#990099">
<div style="text-align: center;" id="en_tete">
<h3>djfjgj fjjggjgj gjgjgjg smzopi </h3>
</div>
<div class="menu_horizontal"><li>Nous contacter</li>
<li>Liens</li>
</div>
<div id="menu_vertical">
<div class="element_menu_vertical">
<h4>ACCUEIL</h4>
</div>
<div class="element_menu_vertical">
<h4><a href="page1.html">Le syicggvct</a></h4>
</div>
<div class="element_menu_vertical">
<h4>La rivfghh ure</h4>
</div>
<div class="element_menu_vertical">
<h4>Les asdfgons</h4>
</div>
<div class="element_menu_vertical">
<h4>Dsef sf sdf tze</h4>
</div>
<div class="element_menu_vertical">
<h4>Coferfrert</h4>
</div>
<div class="element_menu_vertical">
<h4>Coerfr dg fg</h4>
</div>
</div>
<div id="corps">
<h2>Bienvenue ...</h2>
<div style="text-align: center;">bla bla bla bla <br>
</div>
<div style="text-align: center;">bla bla bla </div>
<p style="text-align: center;"></p>
</div>
</body>
</html>

Je vous remercie beaucoup si vous pouviez m'apporter une solution. Mon premier site est fait avec des tableaux, il est très basique et difficilement modifiable, j'aimerais bien évoluer vers quelque chose de correct...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

Message par **chinon37** » 29 mai 2008, 13:26

Bonjour,

Je t'ai concocté un plan de page basique avec les deux menus.
Tu peux modifier l'apparence en utilisant l'éditeur de styles (f11).
Les menus ont été faits avec des listes.
les puces sont supprimées par une règle css (onglet liste, règle li)
Le menu horizontal est obtenu par la règle de style #menuhaut li: on demande un affichage en ligne (menu boite) des balises li (éléments de liste) contenues dans le div #menuhaut.
Bon courage

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-15" http-equiv="content-type">
    <title>
      essai
    </title>
    <meta content="toto" name="author">
    <style type="text/css">
#menuhaut {
    background-color: #cccccc;
    text-align: center;
    font-size: 1.2em;
    height: 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    }
    #menugauche {
    width: 120px;
    background-color: #999999;
    float: left;
    }
    #menuhaut li {
    list-style-type: none;
    display: inline;
    margin-right: 10px;
    margin-left: 10px;
    margin-top: 0px;
    }
    #menugauche li {
    list-style-type: none;
    color: #4b4fbd;
    font-size: 1.2em;
    }

    </style>
  </head>
  <body>
    <div id="menuhaut">
      <ul>
        <li>menu1
        </li>
        <li>menu2
        </li>
        <li>menu3
        </li>
        <li>menu4
        </li>
      </ul>
    </div>
    <div id="menugauche">
      menuvertical<br>
      <ul>
        <li>menu a
        </li>
        <li>menu b
        </li>
        <li>menu c
        </li>
        <li>menu d
        </li>
      </ul>
    </div>
    <div style="background-color: rgb(209, 255, 196);">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      <br>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.<br>
      <br>
      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
  </body>
</html>

lamel · Message par **lamel** » 29 mai 2008, 15:06

Merci pour ton aide.
J'ai réussi à bien mettre mon menu horizontal, par contre j'ai toujours le même pb de décalage avec IE. J'ai essayé avec Mozilla et pas de problème... Je sais pas si ça donnera la même chose une fois le site en ligne mais internet explorer c vraiment pas terrible..

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14

jpbardiau · Message par **jpbardiau** » 29 mai 2008, 20:51

lamel a écrit :mais internet explorer c vraiment pas terrible..

+1

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9) Gecko/2008051202 Firefox/3.0

Message par **chinon37** » 29 mai 2008, 21:09

Je sais pas si ça donnera la même chose une fois le site en ligne mais internet explorer c vraiment pas terrible..

+1 en + du +1 ci-dessus

Tu peux toujours nous soumettre ta page pour évaluation

eda · Message par **eda** » 15 juin 2008, 11:36

salut salut...(attention debutant)
je ne comprend pas comment faire un menu comprenant donc des themes où quand on passe la souris dessus une petite fenetre aparait contenant des sous themes,et quand on retire la souris la fenetre disparait...
j'espere avoir donné une bonne explication du probleme.
merci de votre aide

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)

Invité · Message par **Invité** » 15 juin 2008, 19:30

un petit tour ici.C'est avec un de ces sites que j'ai appris

http://1site1stit.free.fr/

http://info.sio2.be/kpz/index.php

Vous trouverez la solution a votre probleme, c'est traité dans les differentes rubriques

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.0.04506)

Geckozone

Impossible de faire des menus corrects-Sos débutante

Impossible de faire des menus corrects-Sos débutante

Qui est en ligne ?