menu fixe - Forums de discussion

Navigation

Accueil du forum » (X)HTML / CSS » menu fixe

Le sujet

menu fixe
Par gizmo, le Mercredi 04/06/2008 à 15h15'55
12 messages

bonjour

Je suis un p'tit nouveau qui se lance dans la fabrication d'un site internet.
Pour le moment j'utilise des frames afin de délimiter une frame fixe en haut pour un menu et une frame en bas pour le contenu

Un pb se pose quand les sous menu sont trop long, on ne les voient plus entièrement. Je crois qu'il existe une solution sans frame qui passe par une div fixe. Quelqu'un aurait-il amabilité de m'expliquer son fonctionnement et de m'envoyer un code type

Merci

________________
gizmo

Les réponses

Par xerses, le Mercredi 04/06/2008 à 20h25'22
736 messages

Les frames sont devenues complètement obsolètes pour l'organisation d'un site web.

Tu peux en effet utiliser des <div> qui te permettront de placer des contenus variables en longueur.

Si tu souhaites faire une page avec un menu en haut et un contenu en dessous, il suffit de la réaliser ainsi :

<div id="contenu_site">

<div id="menu">
Ton menu
</div>

<div id="page">
Tout ton contenu de page
</div>

</div>

Ainsi, tu peux gérer facilement via une feuille de style, l'organisation de tes 2 parties, à savoir #menu et #page le tout contenu dans #contenu_site que tu peux aussi mettre en forme.

Voilà, j'espère avoir été explicite. Si tu as d'autres questions, n'hésites pas.

________________
Anything that can go wrong will go wrong (Murphy)
Statut: Modérateur

Par gizmo, le Vendredi 06/06/2008 à 16h03'25
12 messages

Le pb que je rencontre maintenant est que mon menu ne tiens pas sur une ligne et lorsque que je clique sur un des liens du menu le navigateur ouvre une autre fenêtre alors que je désire qu'il s'affiche dans la div "contenu". Pouvez vous me dire où se trouve l'erreur, l'oubli

body
{
margin: 0;
padding: 0;
font-family: Garamond, Batang, Times New Roman;
font-size: 14px
}

dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;

}

#menu
{

position: absolute;
top: 2;
left: 10;
z-index:100;
width: 100%; /* correction pour Opera */
}

#menu dl
{

float: left;
width: 12em;
}

#menu dt
{
cursor: pointer;
text-align: center;
background: #ccc;
border: 1px solid gray;
margin: 1px;

}

#menu dd
{
display: none;
border: 1px solid gray;

}

#menu li
{
text-align: center;
background: #c0c0;
font-family: Times;
font-size: 11px

}

#menu li a, #menu dt a
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;

}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus
{
background: #eee;
}

#page
{
position: absolute;
top: 150px;
left: 10px;
width: 90%;
height: 90%;
color: black;
font-weight: bold;
font-size: 22px;
border: 1px solid grey;
background-color: green;
overflow: auto;
border: 1px solid #000;
}

<!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" >

<head>
<title>Bienvenue sur mon site ! v2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="robots" content="all"/>
<script type="text/javascript">

</script>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>

<body>

<div id="contenu_site">

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="PageAccueil.html" >Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1') ;">La gazette des fées</dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="JOURNAL/Simpson.html" >Edition spéciale</a></li>
<li><a href="JOURNAL/Actucine.html" >Actu ciné</a></li>
<li><a href="JOURNAL/Dossier1.html" >Dossier</a></li>
<li><a href="JOURNAL/PlaneteDanger.html" >Planète en danger</a></li>
<li><a href="JOURNAL/BricoEco.html" >Bricoléco</a></li>
<li><a href="JOURNAL/OuvrezOreille.html" >Ouvrez vos oreilles</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="ASSR.html" >ASSR</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Les voyages</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="VoyageSKI/SejourSki.html" >Séjour Ski</a></li>
<li><a href="jersey/accueilJersey.html" >Jersey</a></li>
<li><a href="Angleterre/accueilAngleterre.html">Angleterre</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="CDI/AccueilCDI.html">Le CDI</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="Polesciences.html">Les Sciences</a></dt>
</dl>
</div>

<div id="page">
Tout ton contenu de page
</div>
</div>

</body>

</html>

________________
gizmo

Par xerses, le Lundi 09/06/2008 à 11h33'09
736 messages

Normalement, avec le code que tu présentes, il n'y a (me semble-t-il) aucune raison pour que les liens du menu fasse ouvrir une nouvelle fenêtre.
Seule l'option '_blank' d'un lien permet de lancer l'ouverture d'une nouvelle fenêtre.

Ce que je pense, c'est que tu n'utilises pas la même architecture pour tes pages, à savoir le code que je t'ai donné précédemment. C'est peut être cela que tu appelles "nouvelle page".

Si c'est ça, il faut que tu colles la même architecture, avec le menu dans toutes tes pages html. Ici, le fonctionnement est différent de celui des frames (mis à jour du contenu seulement), lors du clic sur un lien, c'est la page entière qui se voit modifier.

Bonne continuation

________________
Anything that can go wrong will go wrong (Murphy)
Statut: Modérateur

Par gizmo, le Lundi 09/06/2008 à 20h44'33
12 messages

Ok si je comprends bien je dois mettre le menu sur chaque page que je créé pour qu'il apparaisse en ayant l'impression qu'il reste fixe. C'est donc un jeu d'illusion J'essaie cela et vous tiens au courant

________________
gizmo

Par laflich, le Mardi 10/06/2008 à 01h44'15
5 messages

Salut es que tu peut nous donner un lien vers ton site pour voir les chose plus clairement.

Merci

________________
Rejoignez la cummune des blageurs : <a href="http://blaguers.e3b.org">Blaguers</a> ( http://blaguers.e3b.org )

Par gizmo, le Jeudi 12/06/2008 à 21h32'21
12 messages

J'ai suivi les conseils de Xerses et cela fonctionne beaucoup mieux. Toutefois un nouveau pb est apparu lorsque l'on navigue avec ie les sous menu ne restent pas ils disparaissent. J'attends avec impatience vos avis

vous pouvez consultez les pages à l'adresse suivante

http://pharouest.ac-rennes.fr/e351882F

________________
gizmo

Par xerses, le Vendredi 13/06/2008 à 07h44'02
736 messages

Le menu déroulant que tu utilises ne doit tout simplement pas être adapté pour fonctionner avec IE.

Tu peux adapter facilement celui-ci à tes besoins : http://www.astucesdewebmaster.com/css-et-mise-en-forme/menu-deroulant-horizontal-jquery-28

Testé sous IE7 et Firefox.

Tiens nous au courant.

[Message édité par xerses le 13/06/2008 à 07h44'20]

________________
Anything that can go wrong will go wrong (Murphy)
Statut: Modérateur

Par gizmo, le Vendredi 13/06/2008 à 18h15'25
12 messages

J'ai remplacé mon menu déroulant par l'exemple proposé par le lien que tu as donné. Mise à part la mise en forme du menu qui est différente entre ie7 et mozilla cela fonctionne plutôt bien hormis un clignotement suivant la positionnement de la souris.

Autre question quand les sous menu sont trop long et viennent chevaucher ma div "contenu" les sous menu chevauchant ne sont plus accessible. La solution que j'ai utilisé est de descendre la div mais je suppose qu'il y a un autre moyen pour mettre en avant les sous menus

Merci encore de votre patience

________________
gizmo

Par xerses, le Vendredi 13/06/2008 à 18h35'34
736 messages

Je pense que le problème vient d'ici :


<div style="position: absolute; left: 145px; top: 5px; width: 452px; height: 249 px;">

En effet, la position absolute place l'objet au dessus des autres.
Normalement, par défaut, il me semble que les menus déroulants devraient passer au dessus.

Essaye en mettant un position:relative;

________________
Anything that can go wrong will go wrong (Murphy)
Statut: Modérateur

Par gizmo, le Samedi 14/06/2008 à 10h00'22
12 messages

ben dans ce cas ma div ne reste pas là où je voudrai qu"elle soit. Voici le code utilisé

ficjier CSS

body
{
margin: 0;
padding: 0;
font-family: Garamond, Batang, Times New Roman;
font-size: 14px;
background-image: url(Images/nuages.jpg)
}

#menu
{
position: absolute;
top: 3px;
left: 10px;
}

#page
{
position: relative;
top: 100px;
left: 150px;
width: 70%;
height: 80%;
color: black;
font-size: 22px;
border: 0px solid;
overflow: auto;
text-align: center
}

#Nav {
padding: 0;
list-style: none;
}

#Nav li {
width: 150px;
background: #ddd;
margin: 0px 0 0 0px;
float: left;
padding: 0;
}
#Nav li a {
display: block;
background-color: #555;
color: white;
text-decoration: none;
margin: 0; padding: 3px;
}
#Nav li a:hover,#Nav li a:active {
display: block;
background-color: #777;
color: white;
text-decoration: none;
margin: 0; padding: 3px;
}
.Menu {
padding: 0;
list-style: none;
display: none;
}

fichier HTML

<head>
<title>ASSR</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name"author" content="Laurent Chapelliere">
<meta name="robots" content="all"/>
<link rel="stylesheet" href="menu.css" type="text/css">
<link href='style.css' type='text/css' rel='stylesheet'/>
<script src='jquery.js' type='text/javascript'></script>
<script src='menu.js' type='text/javascript'></script>

</head>

<body>

<div id="menu">
<ul id="Nav">
<li><a href="afaccueil.html">Accueil</a>
</li>
<li>La gazette des fées
<ul class="Menu">
<li><a href="JOURNAL/Simpson.html">Edition spéciale</a></li>
<li><a href="JOURNAL/Actucine.html">Actu ciné</a></li>
<li><a href="JOURNAL/Dossier1.html">Dossier</a></li>
<li><a href="JOURNAL/PlaneteDanger.html">Planète en danger</a></li>
<li><a href="JOURNAL/BricoEco.html">Bricoléco</a></li>
<li><a href="JOURNAL/OuvrezOreille.html">Ouvrez vos oreilles</a></li>
</ul>
</li>
<li>ASSR
<ul class="Menu">
<a href="ASSR.html">ASSR</a>
</ul>
</li>
<li>Les voyages
<ul class="Menu">
<li><a href="VoyageSKI/SejourSki.html">Séjour Ski</a></li>
<li><a href="jersey/accueilJersey.html">Jersey</a></li>
<li><a href="Angleterre/accueilAngleterre.html">Angleterre</a></li>
</ul>
</li>
<li>CDI
<ul class="Menu">
<li><a href="CDI/Presentation.html">Présentation</a></li>
<li><a href="https://www.toutatice.fr/pmb3/opac_css/?rne=0351882F">PMB</a></li>
<li><a href="CDI/rech_doc.html">Recherches documentaires</a></li>
<li><a href="CDI/nouveaute.html">Nouveauté</a></li>
<li><a href="CDI/culture.html">Culture et vous ?</a></li>
</ul>
</li>
<li>Les Sciences
<ul class="Menu">
<li><a href="SVT/accueilSVT.html">SVT</a></li>
<li><a href="Math/Mathenpoche.html">Maths</a></li>
<li><a href="Physique/accueilPhysique.html">Physique</a></li>
</ul>
</li>
</ul>
</div>

<div id="page">
<table style="width: 80%; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td>
<h2>ASSR : Attestation Scolaire de la Sécurité Routière</h2>
<p class="assr">
Pour prévenir et réduire les accidents, la période de la scolarité au
collège représente un moment privilégié. Inscrite dans un continuum
éducatif, l'éducation à la sécurité routière s'effectue au
collège sous la forme d'un enseignement obligatoire, transdisciplinaire, intégré dans
les horaires et les programmes.<br>
Egalement insérées dans la vie scolaire, des actions de sécurité
routière peuvent être organisées en collège et en lycée dans le cadre des
comités d'éducation à la santé et à la citoyenneté, dispositifs
obligatoires destinés à organiser la prévention des conduites à risques.

</p>
<p class="assr">
Tout élève, quel que soit son lieu de scolarisation, doit avoir passé :
<ul>
<li class="assr">
<b>l'ASSR de 1er niveau</b> le jour où il atteint ses 14 ans, âge à partir duquel
il est possible de conduire un cyclomoteur. L'ASSR 1 et une formation pratique de cinq heures
constituent le BSR, obligatoire pour conduire un cyclomoteur en l'absence de permis.
</li>
<li class="assr">
<b>l'ASSR de 2nd niveau </b> le jour où il atteint ses 16 ans, âge à partir duquel
il peut commencer l'apprentissage à la conduite accompagnée d'un véhicule
à moteur. L'ASSR 2 est obligatoire pour s'inscrire à l'épreuve théorique
du permis de conduire. Comme l'ASSR 1, l'ASSR 2 peut aussi avec une formation pratique de cinq
heures constituer le BSR, obligatoire pour conduire un cyclomoteur en l'absence de permis.
</li>
</ul>
</p>
<p class="assr">
Ces attestations sont obligatoires pour toutes les personnes nées à compter du 1er janvier 1988
qui souhaitent conduire. Les jeunes qui n'ont pu passer ou obtenir l'une ou l'autre de ces attestations en
milieu scolaire peuvent passer depuis 2004 une attestation de sécurité routière (ASR)
dans les GRETA et dans les CFA.<br>
Une attestation d'éducation à la route (AER) valide les connaissances des personnes
présentant une déficience visuelle ne leur permettant pas, en raison de leur handicap, de se
présenter aux épreuves des attestations scolaires de sécurité
routière ou de l'attestation de sécurité routière.
</p>
</td>
</tr>
<tr>
<td>
<font color="purple">
<a href="http://eduscol.education.fr/D0187/recherchetraining.htm">
<h4 class="assr">Pour vous entraîner cliquer sur ce lien</h4></a>
</td>
</tr>
</tbody>
</table>
</div>

</body>

________________
gizmo

Pages

Réponses les plus anciennes... 1 • 2 • 3 ...Réponses les plus récentes

A lire également

- Les conditions générales d'utilisation du site

Top-sites membres

Discussions récentes dans les forums

Membres

Problème d'identification Inscription gratuite

Tribune libre

CNIL: 1098091
Connectés: 17