menu fixe - Forums de discussion

Navigation

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


Le sujet

gizmomenu 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

xersesPar 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

gizmoPar 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">
<!--
window.onload=montre;function montre(id) {var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</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

xersesPar 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

gizmoPar 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

laflichPar 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 )

gizmoPar 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

xersesPar 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

gizmoPar 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

xersesPar 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

gizmoPar 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&eacute;es
<ul class="Menu">
<li><a href="JOURNAL/Simpson.html">Edition sp&eacute;ciale</a></li>
<li><a href="JOURNAL/Actucine.html">Actu cin&eacute;</a></li>
<li><a href="JOURNAL/Dossier1.html">Dossier</a></li>
<li><a href="JOURNAL/PlaneteDanger.html">Plan&egrave;te en danger</a></li>
<li><a href="JOURNAL/BricoEco.html">Bricol&eacute;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&eacute;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&eacute;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&eacute;</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&eacute;curit&eacute; Routi&egrave;re</h2>
<p class="assr">
Pour pr&eacute;venir et r&eacute;duire les accidents, la p&eacute;riode de la scolarit&eacute; au
coll&egrave;ge repr&eacute;sente un moment privil&eacute;gi&eacute;. Inscrite dans un continuum
&eacute;ducatif, l'&eacute;ducation &agrave; la s&eacute;curit&eacute; routi&egrave;re s'effectue au
coll&egrave;ge sous la forme d'un enseignement obligatoire, transdisciplinaire, int&eacute;gr&eacute; dans
les horaires et les programmes.<br>
Egalement ins&eacute;r&eacute;es dans la vie scolaire, des actions de s&eacute;curit&eacute;
routi&egrave;re peuvent &ecirc;tre organis&eacute;es en coll&egrave;ge et en lyc&eacute;e dans le cadre des
comit&eacute;s d'&eacute;ducation &agrave; la sant&eacute; et &agrave; la citoyennet&eacute;, dispositifs
obligatoires destin&eacute;s &agrave; organiser la pr&eacute;vention des conduites &agrave; risques.

</p>
<p class="assr">
Tout &eacute;l&egrave;ve, quel que soit son lieu de scolarisation, doit avoir pass&eacute; :
<ul>
<li class="assr">
<b>l'ASSR de 1er niveau</b> le jour o&ugrave; il atteint ses 14 ans, &acirc;ge &agrave; 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&ugrave; il atteint ses 16 ans, &acirc;ge &agrave; partir duquel
il peut commencer l'apprentissage &agrave; la conduite accompagn&eacute;e d'un v&eacute;hicule
&agrave; moteur. L'ASSR 2 est obligatoire pour s'inscrire &agrave; l'&eacute;preuve th&eacute;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&eacute;es &agrave; 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&eacute;curit&eacute; routi&egrave;re (ASR)
dans les GRETA et dans les CFA.<br>
Une attestation d'&eacute;ducation &agrave; la route (AER) valide les connaissances des personnes
pr&eacute;sentant une d&eacute;ficience visuelle ne leur permettant pas, en raison de leur handicap, de se
pr&eacute;senter aux &eacute;preuves des attestations scolaires de s&eacute;curit&eacute;
routi&egrave;re ou de l'attestation de s&eacute;curit&eacute; routi&egrave;re.
</p>
</td>
</tr>
<tr>
<td>
<font color="purple">
<a href="http://eduscol.education.fr/D0187/recherchetraining.htm">
<h4 class="assr">Pour vous entra&icirc;ner cliquer sur ce lien</h4></a>
</td>
</tr>
</tbody>
</table>
</div>



</body>

________________
gizmo

Pages

Réponses les plus anciennes... 123 ...Réponses les plus récentes

A lire également

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

Top-sites membres

les star de la rue | -218 pointsLes Amis des Animaux | -3266 pointsBlogHotel - Hébergement de Blog gratuit | -4155 pointsArmor Passion | -5749 points

Discussions récentes dans les forums

Membres
Pseudo:
Pass: Mémoriser ?
Problème d'identificationInscription gratuite
Tribune libre
CNIL: 1098091
Connectés: 17
Publicité: Vidéo humoristique de publicité télé.