28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu verticale

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.

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&eacute;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>


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;
}

Modifié par uniuc (04 Dec 2013 - 19:27)
Bon résolve

il me suffisait pour aligner le sous menu au menu de coller dans

 #leftnav li ul { 

margin:0; 
padding:0; 
 
}


pour ajuster le menu de rajouter 

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


Pas sur que ma sémantique soit viable mais çà fonctionne Smiley murf
Sujet clos
Aller à