Sujet Précédent Sujet Suivant

Div et CSS liens

Fermé
xunil2003 Messages postés 761 Date d'inscription mercredi 17 novembre 2004 Statut Membre Dernière intervention 24 mars 2024 - 28 mars 2010 à 16:06
 xunil2003 - 29 mars 2010 à 00:12
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]<!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é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>/CODE

5 réponses

Réponse 1 / 5
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
28 mars 2010 à 18:23
Bonjour,

c'est simple !
Pour cela, tu dois mettre un id à ton div contenant les sous liens.
Ensuite, tu dois rendre invisible ce div (display: none);

Puis sur le lien mettre en Javascript le code permettant d'afficher le tout !

exemple:

<a href="#" onclick="document.getElementById('menu').style.display='block'">Afficher</a>
<div id="menu" style="display:none">Mon sous menu</div>

A+
Gaerebut
0
Réponse 2 / 5
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
28 mars 2010 à 18:27
Il faut utiliser AJAX (en Javascript).
https://openclassrooms.com/fr/courses/245710-ajax-et-lechange-de-donnees-en-javascript/244425-le-concept-dajax
https://openclassrooms.com/fr/courses/245710-ajax-et-lechange-de-donnees-en-javascript/244798-lobjet-xmlhttprequest
0
Réponse 3 / 5
xunil2003 Messages postés 761 Date d'inscription mercredi 17 novembre 2004 Statut Membre Dernière intervention 24 mars 2024 14
28 mars 2010 à 19:01
bonsoir,

Le CSS et sous menu doit il être comme ceci

LE CSS 
#sousmenu_domotique {
	display: none
}


BALISE DIV 
div class="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>


Mais pour le javascript ou doit je le mettre 
<a href="#" onclick="document.getElementById('menu').style.display='block'">Afficher</a>
<div id="menu" style="display:none">Mon sous menu</div>


Merci.
0
Réponse 4 / 5
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
28 mars 2010 à 19:15
Là où tu veux voir le texte "Afficher" puis "Mon sous menu".
0

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

Posez votre question
Réponse 5 / 5
xunil2003
29 mars 2010 à 00:12
Bonsoir

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 décalé vers le bas, voila ce que j'aimy et ajouter.

CSS ajouter 
#sousmenu_domotique {
	display: none
}


Div pour le sous menu ajouter 
<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) 
<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="menu" 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>
    </ul>
  </div>


j'ai du faire une erreur quelque par ?

Merci.
0

Discussions similaires

Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Comment retrouver des lien copier sur sont téléphone
SAMA -
Lylou -

2 réponses