Div et CSS liens
xunil2003
Messages postés
765
Date d'inscription
Statut
Membre
Dernière intervention
-
xunil2003 -
xunil2003 -
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
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
A voir également:
- Div et CSS liens
- Vérificateur de liens - Guide
- Div c++ - Télécharger - Langages
- Ou trouver les liens copiés sur android - Guide
- Telecharger liens direct - Accueil - Outils
- Enlever le soulignement d'un lien css ✓ - Forum Webmastering
5 réponses
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
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
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
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
bonsoir,
Le CSS et sous menu doit il être comme ceci
LE CSS
BALISE DIV
Mais pour le javascript ou doit je le mettre
Merci.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
Div pour le sous menu ajouter
Pour que le lien s'affiche je l'ai m'y ici (onclik)
j'ai du faire une erreur quelque par ?
Merci.
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.
