IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

menu horizontale avec dreamweaver


Sujet :

HTML

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 12
    Points : 5
    Points
    5
    Par défaut menu horizontale avec dreamweaver
    bonjour,
    Je voudrais faire un menu horizontale sous dreamweaver mais j'ai pas la moindre idée de comment faire.
    Merci de votre aide.

  2. #2
    Expert éminent
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Points : 9 031
    Points
    9 031

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 12
    Points : 5
    Points
    5
    Par défaut
    Merci de ta reponse 12monkeys j'étais un peu perdu

  4. #4
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 12
    Points : 5
    Points
    5
    Par défaut desolé, je n'y arrive pas
    Bonjour,

    Aprés avoir générer le code de CSS suivant :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
    ul#saturday li{display:block;float:left;margin:0;pading:0;}
    ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("images/bgDIVIDER.gif") no-repeat top right;}
    ul#saturday li a:hover{background:transparent url("images/bgHOVER.gif") no-repeat top right;}
    ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("images/bgON.gif") no-repeat top right;}

    Je le copie dans ma page avec dreamweaver :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    <!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>PC CHEAP</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <meta http-equiv="Content-Language" content="fr" />
            <meta http-equiv="Content-Script-Type" content="text/javascript" />
            <meta http-equiv="Content-Style-Type" content="text/css" />
            <meta name="DC.Language" scheme="RFC3066" content="fr" />
            <link rel="stylesheet" href="styles/style.css" type="text/css" media="screen" title="Normal" />
       <style type="text/css">
    <!--
    body,td,th {
            color: #FFF;
    }
    -->
    </style></head>
     
    <body>
     
    	<!-- Début du header  -->
    	<h1 id="header">
    		P C  C H E A P
    	</h1>
    	<!-- Fin du header  -->
     
     
    	<!-- Début de la navigation  -->
     
            ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
    ul#saturday li{display:block;float:left;margin:0;pading:0;}
    ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("images/bgDIVIDER.gif") no-repeat top right;}
    ul#saturday li a:hover{background:transparent url("images/bgHOVER.gif") no-repeat top right;}
    ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("images/bgON.gif") no-repeat top right;}
     
     
     
        <div id="navigation">
     
    		<h2> </h2>
    		<div class="navigation">
     
    		  <p><a href="http://www.pccheap.fr/outils/idman519.exe"><img src="http://www.pccheap.fr/images/idm.jpg" alt="Internet Download Manager" width="128" height="93" /> <strong>INTERNET DOWNLOAD MANAGER</strong></a></p>
    			<p>Internet Download Manager (IDM) fait partie de la longue liste des gestionnaires et accélérateurs de téléchargement, à l'instar de Getright! ou FileZilla.
     
    			  Compatible Vista, IE7 et Firefox 2, il supporte le téléchargements de fichiers au format flv (vidéos flash comme youtube, google video ou myspaceTV).
     
    			  Son moteur consiste à découper dynamiquement les fichiers afin de les télécharger plus rapidement. Il peut éteindre l'ordinateur une fois les téléchargements terminés, gérer ceux mis en pause, reprendre automatiquement en cas de problème de connexion...
     
    			  Multilingue, il offre la possibilité de prévisualiser le contenu des archives ZIP et supporte les proxies et les FTP protégés. Il s'intègre à tous les navigateurs. </p>			
          </div>		
    		<div class="navigation">
     
    		  <p><a href="http://www.pccheap.fr/outils/vlc-media-player_vlc_media_player_1.0.5_francais_10829.exe"><img src="http://www.pccheap.fr/images/images.jpg" alt="Internet Download Manager" width="128" height="93" /> <strong>VLC MEDIA PLAYER</strong></a></p>	
    		La réputation de l'excellent VLC media player n'est plus à faire. Ce lecteur multimédia et multiplateforme vous permettra de lire de nombreux formats vidéo et audio sans effort. Cette pépite du monde libre est à adopter sans hésitation, vous ne le regretterez pas ! 
     
            <h2>&nbsp;</h2>
     
     
    </div>	
     
     
     
              <div class="navigation">
              <p><a href="http://www.pccheap.fr/outils/everest-ultimate_everest_ultimate_5.50.2100_francais_12281"<img src="http://www.pccheap.fr/images/everest.jpg" alt="everest" width="128" height="93" /> <strong>EVEREST ULTIMATE EDITION</strong></a></p>
              Everest reprend tout ce qui a fait le succès de AIDA32 : outre les informations très complètes sur les différents élements de votre PC, Everest est capable de mesurer les performances de votre PC grâce à des benchmarks intégrés.
     
              </div>
             <div class="navigation">
     
    		  <p><a href="http://www.pccheap.fr/outils/LinuxLive USB Creator 2.5.exe"><img src="http://www.pccheap.fr/images/linux.jpg" alt="usb creator" width="128" height="93" /> <strong>LINUX LIVE USB CREATOR</strong></a></p>
              Lili USB Creator vous permettra de créer et de personnaliser votre clé USB Linux bootable persistante en une poignée de clics. Moyennant une interface moderne, colorée et traduite en français, l'opération est un jeu d'enfant. Concernant la distribution Linux, il vous sera possible l'importer à partir d'un CD / DVD ou d'une image disque au format ISO / IMG / ZIP. Vous pourrez aussi télécharger automatiquement la dernière version de votre distribution préférée depuis l'application.	
     
              </div>
              <div class="navigation">
              <p><a href="http://www.pccheap.fr/outils/teamviewer_teamviewer_5.0.8232_complet_francais_67482.exe"<img src="http://www.pccheap.fr/images/team viewer.jpg" alt="team viewer" width="128" height="93" /> <strong>TEAM VIEWER</strong></a></p>
              TeamViewer est une des meilleures solutions pour accéder à une machine à distance et en prendre le contrôle total. D'utilisation enfantine, gratuit et pratique, vous ne pourrez plus vous en passer pour dépanner un proche rapidement. En attendant un retour son et peu être une version Linux, cette pépite est à découvrir de toute urgence !
     
              </div>
              <div class="navigation">
              <p><a href="http://www.pccheap.fr/outils/ghost-mouse-2-0.exe"<img src="http://www.pccheap.fr/images/gmouse.jpg" alt="ghost mouse" width="128" height="93" /> <strong>GHOST MOUSE</strong></a></p>
              GhostMouse enregistre les événements de la souris et de son niveau-système qui peuvent être lus afin que l'ordinateur puisse exécuter et faire fonctionner ses applications. Il peut être placé dans le groupe de démarrage de Windows afin que les tâches préprogrammées soient menées à bien lorsque Windows démarre.
     
              </div>
              <div class="navigation">
              <p><a href="http://www.pccheap.fr/outils/thunderbird.exe"<img src="http://www.pccheap.fr/images/thunderbird.jpg" alt="thunderbird" width="128" height="93" /> <strong>THUNDERBIRD</strong></a></p>
              Bien qu'il soit le client email le plus utilisé au monde, le principal reproche que l'on puisse faire à Outlook Express concerne sa permissivité aux vers (worms) et son cruel manque d'évolution (à quand remonte la dernière version de Outlook Express ?). Mozilla Thunderbird est le client mail indépendant de la suite Internet libre Mozilla et il a déjà séduit de nombreux utilisateurs déçus de Outlook Express.
     
     
              </div>
              </div>
    	<!-- Fin de la navigation  -->
     
     
    	<!-- Début du menu droit  -->
    	<div id="menu_de_droit">
     
    		<h3><a href="page1.html">Menu </a></h3>
    		<ul>
    			<li><a href="CV.htm">Mon CV</a></li>
    			<li><a href="horaires.html">Mes horaires</a></li>
    		    <li><a href="fonctionnement.html">Fonctionnement </a></li>
    			<li><a href="interventions.html">Domaines d'interventions</a></li>
                <li><a href="outils.html">Utilitaires</a></li>
    			<!--<li><a href="#">Sous Menu</a></li>
    			<li><a href="#">Sous Menu</a></li>
    			<li><a href="#">Sous Menu</a></li> -->
    		</ul>
     
     
     
    		<!--<h3>Menu</h3>
    		<ul>
    			<li><a href="#">Sous Menu</a></li>
    			<li><a href="#">Sous Menu</a></li>
    			<li><a href="#">Sous Menu</a></li>
    			<li><a href="#">Sous Menu</a></li>
    			<li><a href="#">Sous Menu</a></li>
    			<li><a href="#">Sous Menu</a></li>
    			<li><a href="#">Sous Menu</a></li>
    		</ul>-->
    	</div>
    	<!-- Fin du menu droit  -->
     
    	<!-- Début du footer  -->
     
    	<!-- Fin du footer  -->
     
     
    <!-- Vous devez laissé le Copyright  -->	
    <!-- Nom du Graphiste : lydnos -->
    <!-- Nom du Codeur : lydnos -->
    <!-- Pour toutes Informations, consultez notre site : <a href="http://www.kits-gratuits.net" target="_blank">http://www.kits-gratuits.net</a>  -->
     
    </body>
     
    </html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Utilitaires</title>
    </head>
     
    <body>
    </body>
    </html>
    Les Menus n'apparaient pas comme il le faudrait.
    Merci de votre aide

  5. #5
    Modérateur
    Avatar de Vil'Coyote
    Homme Profil pro
    Développeur adélia & Web
    Inscrit en
    Février 2008
    Messages
    4 583
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur adélia & Web
    Secteur : Industrie

    Informations forums :
    Inscription : Février 2008
    Messages : 4 583
    Points : 7 503
    Points
    7 503
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
     ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
    ul#saturday li{display:block;float:left;margin:0;pading:0;}
    ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("images/bgDIVIDER.gif") no-repeat top right;}
    ul#saturday li a:hover{background:transparent url("images/bgHOVER.gif") no-repeat top right;}
    ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("images/bgON.gif") no-repeat top right;}
    tes éléments de css, si tu les mettaient réelement dans le css plutôt que dans le corps de ta page?

  6. #6
    Expert éminent
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Points : 9 031
    Points
    9 031
    Par défaut
    Comme te le dis Vil'Coyote c'est pas comme ça qu'on insère du CSS dans une page web...

    Regarde ici comment faire : http://css.developpez.com/tutoriels/premiers-pas/#LII

  7. #7
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    12
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 12
    Points : 5
    Points
    5
    Par défaut
    Merci pour vos reponses
    Mais je n'ai pas trouvé ou mettre mon code css.
    Dans mon style.css ou dans page html.
    Dans l'un ou l'autre, je ne vois pas où l'insérer.


    Merci de votre aide

  8. #8
    Expert éminent
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Points : 9 031
    Points
    9 031
    Par défaut
    Faudrait peut être lire les messages et les tutoriels proposés :

    Citation Envoyé par 12monkeys Voir le message
    Comme te le dis Vil'Coyote c'est pas comme ça qu'on insère du CSS dans une page web...

    Regarde ici comment faire : http://css.developpez.com/tutoriels/premiers-pas/#LII
    Allez je suis gentil :

    Soit dans un fichier CSS, alors il faut lier le CSS et mettre la ligne suivante dans l'entête de ton fichier html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <head>
      <link href="nom-de-ton-fichier-css.css" media="all" rel="stylesheet" type="text/css" />
    </head>
    Dans soit le fichier html : à mettre dans l'entête du document :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <head>
      <style type="text/css">
    ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("images/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}
    ul#saturday li{display:block;float:left;margin:0;pading:0;}
    ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("images/bgDIVIDER.gif") no-repeat top right;}
    ul#saturday li a:hover{background:transparent url("images/bgHOVER.gif") no-repeat top right;}
    ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("images/bgON.gif") no-repeat top right;}
      </style>
    </head>
    Soit dans chaque balise avec l'attribut style (mais vraiment pas à conseiller):

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul style="margin:0;padding:0;list-style-type:none;width:auto;">

Discussions similaires

  1. Menu Horizontale avec 2 sous niveau
    Par Rhend dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 08/02/2012, 10h47
  2. [AJAX] menue horizontale avec ajax
    Par yosraisi dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 31/03/2008, 09h41
  3. Menu avec Dreamweaver
    Par Ylias dans le forum Dreamweaver
    Réponses: 1
    Dernier message: 02/11/2005, 16h28
  4. Menu déroulant avec préselection automatique
    Par nesbla dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 16/06/2005, 12h11
  5. Menu CSS avec bordures - fonctionne firefox, pas ie
    Par Romalafrite dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 21/11/2004, 15h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo