Menu simple à transformer en onglets CSS

Résolu
cathywawa Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   -  
cathywawa Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je crée un iste avec dreamweaver (CS3).
J'ai créé un menu simple avec des boutons pour chaque rubrique mais je voudrais le transformer en menu à onglets.

Je ne sais pas comment adapter les fichiers donnés par ce site "http://normandlamoureux.com/cours/css/#introduction", en fonction de mon site "http://www.cwsecretariat.fr".

Je vous remercie pour votre aide qui me sera d'un grand secours.

A voir également:

5 réponses

Réponse 1 / 5
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
SALUT

J en ai fais un vite fais , tu l adapte a tes liens !! j ai laisse un bout de css embarque pour que en cas d utilisation d includ tu sache quel css pour que le bouton de la page ouverte reste clique !!

le dossier

menu_tab_pour_cathywawa

sur un de mes Sites

tout les fichiers sont dans le .rar

RAD
2
Réponse 2 / 5
cathywawa Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   14
 
Bonjour,

Alors, j'ai personnalisé le menu de RAD ZONE et ça a l'air d'aller. merci beaucoup à RAD ZONE.

Par contre, j'ai un autre souci, mais je vais ouvrir un autre post : c'est comment faire pour que mes pages en .php s'affichent quand les visiteurs cliquent sur l'onglet correspondant ?
0
Réponse 3 / 5
cathywawa Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   14
 
Bonjour RAD ZONE et merci beaucoup pour ton aide !

Je suis désolée mais je ne sais pas où inclure le code du menu que tu m'as fait au niveau de ma page index.php et quelle partie je peux retirer de mon code actuel. Merci pour ton aide

Voici l'actuel (sans une grosse partie des balises meta pour ne pas encombrer !) :

...
<meta name="Date-Creation-yyyymmdd" content="010608">
<meta name="Date-Revision-yyyymmdd" content="010608">
<style type="text/css">
<!--
body {
background-color: #E2E2E2;
}
#Layer1 {
position:absolute;
width:39px;
height:40px;
z-index:1;
left: 161px;
top: 549px;
}
#Layer2 {
position:absolute;
width:44px;
height:40px;
z-index:2;
left: 164px;
top: 325px;
}
#Layer3 {
position:absolute;
width:40px;
height:35px;
z-index:3;
left: 162px;
top: 605px;
}
#Layer4 {
position:absolute;
width:200px;
height:115px;
z-index:4;
}
#Layer5 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#Layer6 {
position:absolute;
width:60px;
height:46px;
z-index:4;
left: 157px;
top: 382px;
}
#Layer7 {
position:absolute;
width:200px;
height:115px;
z-index:5;
}
#Layer8 {
position:absolute;
width:47px;
height:43px;
z-index:5;
left: 159px;
top: 256px;
}
#Layer9 {
position:absolute;
width:37px;
height:43px;
z-index:6;
left: 162px;
top: 494px;
}
#Layer10 {
position:absolute;
width:45px;
height:40px;
z-index:6;
left: 165px;
top: 499px;
}
#Layer11 {
position:absolute;
width:49px;
height:43px;
z-index:7;
left: 163px;
top: 443px;
}
.Style4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.Style25 {font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; }
-->
</style>
<script src="../../../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

</head>

<body>
<table width="800" height="200" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td width="696" height="200"><img src="../Nouvelles images index/banniere2.jpg" width="800" height="200" /></td>
</tr>
</table>
<table width="800" height="236" border="2" align="center" cellpadding="0" cellspacing="0" bordercolor="#663366" bgcolor="#FFFFFF">
<tr>
<td width="111" height="52" bgcolor="#FFFFFF"><div align="center"><a href="index.php?page=accueil"></a><a href="index.php?page=accueil"><img src="../Nouvelles images index/button42486551.jpg" width="105" height="45" border="0" /></a></div></td>
<td width="111" bgcolor="#FFFFFF"><div align="center"><a href="index.php?page=avantages"><img src="../Nouvelles images index/button16569213.jpg" width="105" height="45" border="0" /></a></div></td>
<td width="111" bgcolor="#FFFFFF"><div align="center"><a href="index.php?page=methode"><img src="../Nouvelles images index/button77669968.jpg" width="105" height="45" border="0" /></a></div></td>
<td width="111" bgcolor="#FFFFFF"><div align="center"><a href="index.php?page=services"><img src="../Nouvelles images index/button62296464.jpg" width="105" height="45" border="0" align="middle" /></a>
</div></td>
<td width="111" bgcolor="#FFFFFF"><div align="center"><a href="index.php?page=references"><img src="../Nouvelles images index/button30065628.jpg" width="105" height="45" border="0" /></a></div></td>
<td width="111" bgcolor="#FFFFFF"><div align="center"><a href="index.php?page=contact"><img src="../Nouvelles images index/button92709460.jpg" width="105" height="45" border="0" /></a></div></td>
<td width="116" bgcolor="#FFFFFF"><div align="center"><a href="index.php?page=liens"><img src="../Nouvelles images index/button10542160.jpg" width="105" height="45" border="0" /></a></div></td>
</tr>
<tr>
<td colspan="7" bgcolor="#FFFFFF"><table width="100%" bgcolor="#FFFFFF">
<tr>
<td bordercolor="#FFFFFF"><div align="center">
<p align="left">
<?php
If ($page == '' or $page == "index") { $page = "accueil"; }
$page = $page.".php";
If (!is_file($page)) { $page = "erreur.php"; }
clearstatcache();
include($page);
?>
<br />
</p>
</div></td>
</tr>
</table></td>
</tr>
</table>

<table width="800" height="198" border="3" align="center" bordercolor="#054169" bgcolor="#FFFFFF">
<tr bordercolor="#663366">
<td width="246" height="188" nowrap="nowrap" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><p><span class="Style4"><img src="../logoc.jpg" width="203" height="91" /><br />
</span><span class="Style25">24 voie des Sarrazins<br />
51250 SERMAIZE-LES-BAINS<br />
FRANCE<br />
<br />
Tél. : + 33 (0)6.67.16.24.26<br />
E-mail :<a href="mailto:admin@cwsecretariat.fr">admin@cwsecretariat.fr</a></span></p> </td>
<td width="534" height="188" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><p align="left" class="Style25"><strong>Pour ajouter cette page à vos FAVORIS, tapez CTRL + D</strong></p>
<p align="left" class="Style25"><a href="index.php?page=plandusite">Plan du site</a> - <a href="index.php?page=apropos">A propos</a> - <a href="index.php?page=protectionvieprivee">Protection de la vie privée</a><br />
Menu : <a href="index.php?page=accueil">Accueil</a> - <a href="index.php?page=avantages">Avantages</a> - <a href="index.php?page=methode">Méthode et garanties</a> - <a href="index.php?page=services">Services et Tarifs</a> - <a href="index.php?page=references">Références</a> - <a href="index.php?page=contact">Contact</a><br />
<a href="javascript:window.print()">Imprimer cette page</a> - <a href="Envoipage.php">Recommander ce site à un(e) ami(e) ou collègue</a><br />
<br />
<br />
<br />
© 2008. Tous droits réservés.<br />
<u><a href="http://www.cwsecretariat.fr">http://www.cwsecretariat.fr</a><br />
</u></p></td>
</tr>
</table>

</body>
</html>
-1
Réponse 4 / 5
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
a la place de ca 
 <tr>
        <td width="111" height="52" bgcolor="#FFFFFF">
          <div align="center">
            <a href="index.php?page=accueil"></a>
            <a href="index.php?page=accueil">
              <img src="../Nouvelles images index/button42486551.jpg" width="105" height="45" border="0" /></a>
          </div></td>
        <td width="111" bgcolor="#FFFFFF">
          <div align="center">
            <a href="index.php?page=avantages">
              <img src="../Nouvelles images index/button16569213.jpg" width="105" height="45" border="0" /></a>
          </div></td>
        <td width="111" bgcolor="#FFFFFF">
          <div align="center">
            <a href="index.php?page=methode">
              <img src="../Nouvelles images index/button77669968.jpg" width="105" height="45" border="0" /></a>
          </div></td>
        <td width="111" bgcolor="#FFFFFF">
          <div align="center">
            <a href="index.php?page=services">
              <img src="../Nouvelles images index/button62296464.jpg" width="105" height="45" border="0" align="middle" /></a>
          </div></td>
        <td width="111" bgcolor="#FFFFFF">
          <div align="center">
            <a href="index.php?page=references">
              <img src="../Nouvelles images index/button30065628.jpg" width="105" height="45" border="0" /></a>
          </div></td>
        <td width="111" bgcolor="#FFFFFF">
          <div align="center">
            <a href="index.php?page=contact">
              <img src="../Nouvelles images index/button92709460.jpg" width="105" height="45" border="0" /></a>
          </div></td>
        <td width="116" bgcolor="#FFFFFF">
          <div align="center">
            <a href="index.php?page=liens">
              <img src="../Nouvelles images index/button10542160.jpg" width="105" height="45" border="0" /></a>
          </div></td>
      </tr>


sur chaques page ou en includ !!

RAD
-1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
cathywawa Messages postés 25 Date d'inscription   Statut Membre Dernière intervention   14
 
salut !


Merci. J'ai donc fait le changement mais, seulement sur ma page index.php, étant donné que les autres pages sont appelées à partir de celle-ci.

Voici ce que ça donne : http://www.cwsecretariat.fr/index3.php

J'ai mis les liens seulement vers les pages "accueil" et "avantages".

Comment faire pour que l'onglet de la page sur laquelle je me trouve soit d'une autre couleur ? Ca reste pareil comme quand je suis sur "accueil".

PS : je ne sais pas ce que veut dire "mettre en includ".

Merci pour ta réponse
-1

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses