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 :

DIV est CSS --> liens


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    412
    Détails du profil
    Informations personnelles :
    Âge : 54
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Décembre 2008
    Messages : 412
    Par défaut DIV est CSS --> liens
    Bonjour,


    Je vient de faire une maquette de ma page, je voudrai que lorsque je clique sur un lien pouvoir toujours rester dans la même maquette (Structure de la page) et que ce lien affiche son contenu dans <div id="contenu">Affiche la page du lien</div> qui affichera en même temps les liens de <div id="menu"> du sous menu.

    es-ce possible et si oui comment ?

    Merci.


    Maquette.php
    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
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>maquette1</title>
    <style type="text/css">
    <!--
    #body
    {
       width: 760px;
       margin: auto;
       margin-top: 20px;
       margin-bottom: 20px;    
       background-image: url("images/fond.png");
    }
     
     
     
    #entete {
        color: #FF0000;
            background-color: #FFCC33;
            height: 150px;
            width: 1024px;
            background-repeat: no-repeat; /* Contour noir autour de l'entete */
        margin-bottom: 10px; /* Espace vide entre entete et info page */
     
    }
    #menu {
            height: 50px;
            width: 1024px;
            text-align: center;
            padding-top: 15px;
            background-color: #020202;
            
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       
     
    }
    #contenu {
        color: #FF0000;
            background-color: #FFCC33;
            height: 400px;
            width: 1024px;
            
            margin-center: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
       margin-bottom: 1px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
       padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
       
       color: #B3B3B3;
       background-color: #626262; /* Une couleur de fond pour le corps */
       background-image: url("motif.png"); /* Motif audessus de la page */
       background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
       
       border: 0px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
     
    }
    #pied {
             padding: 0px;
       clear: both;
     
       text-align: center;
     
     
            color: #FF0000;
            background-color: #FF9966;
            height: 90px;
            width: 1024px;
    }
    #conteneur {
            width: 1024px;
            margin-right: auto;
            margin-left: auto;
    }
    #conteneur #menu ul {
            list-style-type: none;
            font-size: 16px;
            color: #000;
            display: inline;
            height: 50px;
            width: 1024px;
            padding-top: 20px;
            padding-left: 0px;
    }
    #infos {
            color: #FFFFFF;
            background-color: #000000;
            height: 260px;
            width: 1024px;
    }
    #conteneur #menu ul li {
            display: inline;
            font-size: 18px;
    }
    .espace {
            margin-right: 50px;
    }
    #conteneur #menu ul li a {
            color: #FFF;
            text-decoration: none;
    }
    #conteneur #menu ul a:hover {
            color: #FF0;
    }
    -->
    </style>
    </head>
     
    <body>
    <div id="conteneur">
      <div id="entete"><img src="@maison-1-468x60.gif" alt="" width="1024" height="150" /></div>
      <div id="infos"><?php include("L:/Program files 2/wamp/www/maison/N4/template/info-maison.php"); ?></div>
      <div id="menu">
        <ul>
          <li class="espace"><a href="maquette1-2.php">Accueil</a></li>
          <li class="espace"><a href="domotique.php">Domotique</a></li>
          <li class="espace"><a href="maison.php">Maison</a></li>
          <li class="espace"><a href="jardin.php">Jardin</a></li>
          <li class="espace"><a href="films.php">Films</a></li>
          <li class="espace"><a href="videos.php">Vid&eacute;os</a></li>
          <li><a href="musique.php">Musique</a> </li>
        </ul>
      </div>
      <div id="contenu"></div>
     
     
      <div id="pied"><?php include("L:/Program files 2/wamp/www/maison/commun/template/pied.php3"); ?></div>
    </div>
    </body>
    </html>

  2. #2
    Membre éprouvé
    Profil pro
    Inscrit en
    Mars 2010
    Messages
    82
    Détails du profil
    Informations personnelles :
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations forums :
    Inscription : Mars 2010
    Messages : 82
    Par défaut
    Bonjour,
    Oui, c'est possible.
    il y a différentes techniques, tu peux par exemples découper le fichier en 2 parties:
    fichier1.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <!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">
    <head>
    ...
        </ul>
      </div>
      <div id="contenu">
    fichier2.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    </div>  
      <div id="pied"><?php include("L:/Program files 2/wamp/www/maison/commun/template/pied.php3"); ?></div>
    </div>
    </body>
    </html>
    Et ensuite pour faire une page (ex:domotique.php)
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <?php
    include("fichier1.php");
    ?>
    Votre texte sur la domotique
    <?php
    include("fichier2.php");
    ?>
    Cette technique est simple à mettre en place pour un "petit" site (quelques pages)

    A chaque fois que vous faites une nouvelle page vous reprenez le code ci dessus

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Décembre 2008
    Messages
    412
    Détails du profil
    Informations personnelles :
    Âge : 54
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations forums :
    Inscription : Décembre 2008
    Messages : 412
    Par défaut
    Bonsoir

    voila ce que j'ai fait mais lorsque je clique sur afficher du menu je n'ai pas le sousmenu qui s'affiche a la place du menu, et les liens sont sous le menu, et ne fonctionne pas,

    voila ce que j'ai m'y et ajouter.

    CSS ajouter
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #sousmenu_domotique {
    	display: none
    }
    Div pour le sous menu ajouter
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="sousmenu_domotique">
    <a href="page1.php" id="1" >Qu'esce que la domotique</a><br/>
    <a href="page2.php" id="2" >La norme domotique</a><br/>
    </div>

    Pour que le lien s'affiche je l'ai m'y ici (onclik)
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div id="menu">
        <ul>
          <li class="espace"><a href="maquette1-2.php">Accueil</a></li>
          <li class="espace"><a href="#" onclick="document.getElementById('sousmenu_domotique').style.display='block'">Afficher</a><div id="sousmenu_domotique" style="display:none">Mon sous menu</div></li>
          <li class="espace"><a href="maison.php">Maison</a></li>
          <li class="espace"><a href="jardin.php">Jardin</a></li>
          <li class="espace"><a href="films.php">Films</a></li>
          <li class="espace"><a href="videos.php">Vidéos</a></li>
          <li><a href="musique.php">Musique</a> </li>
    Merci.

  4. #4
    Inactif  
    Homme Profil pro
    Inscrit en
    Septembre 2003
    Messages
    570
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Septembre 2003
    Messages : 570
    Par défaut
    je propose une méthode plus web 2.0 : utiliser AJAX, documente toi sur le sujet

Discussions similaires

  1. [CSS] balise div et css pour eviter les framesets
    Par jfjava2002 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 24/03/2006, 11h56
  2. [CSS] Les liens changent de couleur
    Par Mister Nono dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 09/12/2005, 12h12
  3. la balise <div> et CSS
    Par Trunks dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 04/12/2005, 21h10
  4. CSS : un lien qui prend toute une ligne d'un tableau.
    Par pmithrandir dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 20/04/2005, 16h52
  5. coller une img à un div en css: impossible?
    Par Martyin dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 13/12/2004, 11h12

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