Sujet Précédent Sujet Suivant

Menu verticale

Résolu/Fermé
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 - 4 déc. 2013 à 17:44
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 - 4 déc. 2013 à 21:44
Bonjour à tous,

J'ai un problème avec un menu déroulant que je veut mettre en place,
son DIV leftnav.
Mon problème est qu'il ne se place pas dans son emplacement il se décale à droite au lieu de ce coller au conteneur pageview, de plus quand il se déroule, les sous-menus se décale à droite alors que je désir une ouverture en colonne, et franchement je ne vois pas trop d'ou viens le problème n'étant pas pro de css.
Je sais que l'es autres menus sont bourré de fautes mais il me permettent de me donner une idée sur la disposition de ma page.
donc si quelqu'un vois d'ou viens mon problème je suis tout ouïe.


ICI LE HTML 

<!DOCTYPE html>
<html class="no-js" lang="fr">


<head>

      <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>

    <!--   CSS -->
       <link rel="stylesheet" type="text/css" media="screen" href="/testvert.css"/>

          <link rel="shortcut icon" href="/global/img/gfx/favicon.ico"/>

     <title>

     </title>

</head>


<body>


<div id="pageBody">

<div id="social">

     <a href=" "  target="_blank" class=" " >
      <img src="/global/img/gfx/f.png" alt="f"/></a>

     <a href=" " class="home" style="width:15px"><span></span></a>
     <a href="liens.html" class=" " ><span>Liens</span></a>
     <a href=" " class="" style="width:15px"><span></span></a>
     <a href="jeux.html" class=" " ><span>Jeux</span></a>
     <a href=" " class="" style="width:15px"><span></span></a>
     <a href="legale/legale.html" class=" " ><span>Légale</span></a>
     <a href=" " class="" style="width:15px"><span></span></a>
     <a href="contacts.html" class=" " ><span>Contacts</span></a>

</div>

<div id="navbar">

     <a href=" " class="active home " style="width:115px"><span>1</span></a>
     <a href="2.html " class=" " style="width:115px"><span>2</span></a>
     <a href="3.html" class=" " style="width:115px"><span>3</span></a>
     <a href="4.html" class=" " style="width:115px"><span>4</span></a>
     <a href="5.html" class=" " style="width:115px"><span>5</span></a>
     <a href="6.html" class=" " style="width:115px"><span>6</span></a>
     <a href="7.html" class=" " style="width:115px"><span>7</span></a>

</div>

 <div id="leftnav">
 
 <ul>
 
     <li><a> nav1 </a>
      <ul>
         <li><a href="#">Lien menu</a></li>
         <li><a href="#">Lien menu</a></li>
         <li><a href="#">Lien menu</a></li>
      </ul>	  
	 </li>
	  
	  <li><a> nav2 </a>
	   <ul>
         <li><a href="#">Lien menu</a></li>
         <li><a href="#">Lien menu</a></li>
         <li><a href="#">Lien menu</a></li>
       </ul>
	 </li>
	  
</ul>	  


</div>

<div id="pageview">
  <a> pageview </a>
</div>





<!-- END PAGE BODY -->
</div>

</body>

</html>




ICI LE CSS 






/*             cadre de fond                   */
/*  à modifier selon la longueur de la page    */  

html, body {width:100%;  background-color:#9e7b45;}

#pageBody {

  background:#e8e8e9; 
  width: 960px; 
  height:1250px; 
  z-index:-1;
  margin:0 auto 0 auto;
}

/* masque les bordures d'images sous wie */
img {
	border: none;
}


a:link 
{ 
 text-decoration:none; 

} 

/*    ---------------------------- barre social  ------------------------ */


#social {
  background:#edede8;
  position: relative;
  top: 0px;
  height:40px;
  width: 960px;
  display: block;
  float: left;
  clear: both;

}



#social a {
   list-style-type: none;
        white-space: nowrap;
  font-family: Calibri;
  font-weight : bold;
  color:#666666;
  color: rgb(102, 102, 102);
  text-decoration: none;
  font-size: 16px;
  float:right; 
  margin:0;
  display: block;
  text-align: right;
  /*padding: 7px 0px 8px 0px;*/
  margin: 8px 0px;

}
/* gere le shadows des lettres*/
#social a:hover {
  text-decoration: none;
  text-shadow:0px 0px 0px rgb(118, 118, 117);
  /*  0px 0px 13px #666666,  peut etre rajouté pour un halo autour des lettres*/
}

#social a.active {
  color: rgb(179, 179, 178);
  text-shadow: 0px -1px 0px rgb(179, 179, 178);
}

#social a.home, div.social a[href='http://bbox.com/cn'] {
  background: url("/global/img/gfx/bboxlogobl.png") no-repeat center center;
  height: 18px;
  /*padding: 0px 0px 0px 0px;*/
  position: relative;
  top: 3px;
  bottom: 0px;
  left: 0px;
}

#social a.home span {
  display: none;
}

/* ---------------------- Nav Barre -----------------------------------------*/

#navbar {

  position: relative;
  top: 0px;
  width: 960px;
  display: block;
  float: left;
  clear: both;
  border-radius: 0px;
  background: #353d46; /* Old browsers */

}

#navbar a {
   list-style-type: none;
        white-space: nowrap;
  font-family: Calibri;
  /*Pour un choix gras ou pas*/
  /*font-weight : bold;*/
  /*color: #bcc0c3;*/
  color:#c8cbcc;
  text-decoration: none;
  /*color: rgb(188, 192, 195);*/
  color:rgb(200,203,204);
  font-size: 18px;
  text-shadow: 0px -1px 0px rgb(0, 0, 0);
  float: left;
  
  display: block;
  text-align: center;
  padding: 7px 0px 8px 0px;
  margin: 8px 0px;
  border-right: 2px solid rgba(27, 36, 42, .5);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, .15);
}

#navbar a:hover {
  text-decoration: none;
  text-shadow: 0px 0px 15px #FFFFFF, 0px -1px 0px rgb(0, 0, 0);
}

#navbar a.active {
  color: rgb(242, 152, 8);
  text-shadow: 0px -1px 0px rgb(0, 0, 0);
}

#navbar a.home, div.navbar a[href='http://pascale.sanson.free.fr/cn'] {
  background: url("/global/img/gfx/rlclogobl.png") no-repeat center center;
  height: 25px;
  /*padding: 0px 0px 0px 0px;*/
  position: relative;
  top: 4px;
  bottom: 0px;
  left: 0px;
}

#navbar a.home span {
  display: none;
}



/*---------------------------------------     leftnav        ----------------------------------*/

#leftnav     {

 position: relative;
  top: 0px;
  width: 115px;
  height: 200px;
  display: block;
  float: left;
  clear: both;
  font-size: 14px;


  padding: 0; /*<!---Suppression des padding par défaut--->*/
/*margin: auto;*/

}

#leftnav li   {

margin: 0;
border-top: 2px solid transparent; /*séparation verticale*/
list-style-type: none;

}

#leftnav li a  {

display:block;
width: 115px;
height: 30px;
line-height: 30px; /*Hauteur de la ligne pour centrage verticale du texte*/
text-align: center;
text-decoration: none;
background-color: #050; /*couleur des celulles*/
color: #F00; /* remplacement de la couleur de police par défaut*/

}

#leftnav li a:hover {

color : #FF0;

}



#leftnav li ul {

display: none;

}

#leftnav li:hover ul  {

display: block;
margin: 0;

}


#leftnav li:hover ul li a {

background-color:#0a0;
border-left: 15px solid #050;
width: 115px;

}

#leftnav li:hover ul li a:hover {

background-color: #070;

}

/* ------------------------------------ page view ------------------------------------  */



#pageview {

  background:#000fff; 
  width: 845px; 
  height: 800px;
 float: right;
  z-index:-1;
  margin:0 auto 0 auto;
}
A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 4/12/2013 à 18:19
salut

Cela vient de ul qui par défaut se décale

pour aligner le sous menu au menu tu rajoutes dans #leftnav li ul {

margin:0;
padding:0;


pour ajuster le menu tu rajoute

#leftnav ul {
margin: 0;
padding:0;
}

voila
Un petit merci vaut mieux qu'une grande ignorance
1
Réponse 2 / 2
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
4 déc. 2013 à 19:18
merci beaucoup pour ton aide je viens de tester, ca fonctionne impec.

Il ne me reste plus qu'a trouver comment faire en sorte que ce menu n'ai pas à ce recharger à chaque page et comment créer l'ouverture des submenu avec un clic mais à mon avis ca ne devrais pas être bien compliqué.

--
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 4/12/2013 à 19:47
tu peux faire des include en php pour éviter de faire ton menu dans chaque page ainsi que tout ce qui est répété dans chaque page de ton site
https://www.alsacreations.com/actu/lire/254-le-point-sur-la-fonction-include-php.html

pour ouvrir au clic il faut plutot du javascript voici un petit script accordéon
http://dev.twiip.ch/scripts/accordion/
tu adapte en mettant ton menu à la place du texte et en adaptant le css
0
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
4 déc. 2013 à 19:55
merci Je vais aller voir ça, sinon je pensait à un système de IFRAME pour ce qui s'afficheras dans le pageview.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 4/12/2013 à 20:06
oublie les iframe ... php est ton ami et tu en aura besoin un jour ou l'autre alors autant s'y mettre. Le seul truc il faut installer un serveur sur ta machine du style easyphp mais c'est très simple a faire

voila tu peux mettre le sujet en résolu
0
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
4 déc. 2013 à 21:44
Excuse moi pour la réponse tardive j'étais sur une question qui m'intéressait avec antoinegdln4.

Je n'ai rien contre le php, en ce qui concerne le serveur offline, perso je tourne sous XAMPP après ça va être placé chez maven il y a tout ce qu'il faut a mon avis.

en tout cas encore marci ;)
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
Barre verticale droite sur clavier mac
oui -
jeanbern -

1 réponse
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses