PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

Pages :: 1

#1 03-04-2014 22:31:06

arabii
Membre
Inscription : 30-03-2014
Messages : 11

probleme menu et div

Bonjour,

J'esseye depuis un prtit temps de mettre un menu vertical simple


<style type="text/css">
/* CSS PROVENANT DU SITE http://webyo.net */
#menu {
border: 1px solid #ccc;
width: 150px;
}

* html #menu { /* IE */
width: 144px;
}

#menu ul {
padding: 0;
margin: 0;
list-style-type: none;
}

#menu a {
padding: .4em .3em;
display: block;
width: 100%; /* IE6 */
color: #000;
text-decoration: none;
border-bottom: 1px solid #ccc;
}

#menu a:visited {
color: #000;
}

html>body #menu a { /* No IE */
width: auto;
}

#menu a:hover {
background-color: #eee;
color: #0066ff;
}

#menu #current a {
background-color: #eee;
color: #0066ff;
}
</style>
<!-- DEBUT MODELE PROVENANT DU SITE http://webyo.net -->
<div id="menu">
  <ul>
  <li><a href="" title="">Menu 1</a></li>
  <li id="current"><a href="" title="">Menu 2</a></li>
  <li><a href="" title="">Menu 3</a></li>
  <li><a href="" title="">Menu 4</a></li>
  <li><a href="" title="">Menu 5</a></li>
  <li><a href="" title="">Menu 6</a></li>
  </ul>
</div>
<!-- FIN MODELE PROVENANT DU SITE http://webyo.net -->
 

Dans un div colonne-gauche  voici mon css:


/* CSS PROVENANT DU SITE http://webyo.net */
body {
margin:0;
padding:0;
line-height: 1.5em;
}

/* background-image:url(background.jpg) */

html{background-color:;
background-image:url(background.jpg);
}

#contenu {
width: 840px;
margin: 0 auto; /* Centrer la page */
}

#header {
background:url(v3.jpg); /* Couleur de fond */
height: 140px; /* Hauteur de l'entête */
color: #000; /* Couleur du texte */
font-weight: bold;
border:7px double black;
padding:5px;
}

#bloc-contenu {
float: left;
width: 100%;
}

#col-centre {
margin: 0 190px 0 164px; /* Marge droite et marge gauche */
background-color:#33FFFF;
min-height:2000px;
border:7px double;
width:;
word-wrap: break-word;
padding-right:3px;
}

#col-droite {
width: 175px; /* Largeur de la colonne */
margin-left: -190px; /* Marge gauche */
background-color: #33FFFF;
float: left;
min-height:2000px;
border:7px double;
}

#col-gauche {
float: left;
width: 150px; /* Largeur de la colonne */
margin-left: -840px; /* Marge gauche */
background-color: #33FFFF;
min-height:2000px;
border:7px double;
}

#footer {
background-color: #33FFFF;
clear: both;
width: 825px;
font-weight: bold;
color: #000;
text-align: center;
padding: 4px 0;
border:7px double black;
}

.col-int {
padding: .5em 1em;
}

p, h1, pre {
margin: 0 2em 1em 1em;
}

h1 {
font-size: 120%;
padding-top: 1em;
}
 

mais la moitié du menu se met sur la colonne-centre:(

je voudrais que le menu rentre dans la col-gauche

je ne sais pas comment faire

merci d"avance pour toute aide

Hors ligne

#2 04-04-2014 07:33:23

Maljuna Kris
Infantimigulo
Lieu : Douarnenez 29100 Breizh Izel
Inscription : 08-05-2009
Messages : 2 453
Site Web

Re : probleme menu et div

Saluton,

SAns aller voir sur le fond (je n'ai pas trop le temps), pourquoi deux CSS ?

Gloire à qui n'ayant pas d'idéal sacro-saint,
Se borne à ne pas trop emmerder ses voisins. G. Brassens Don Juan 1976.
Avĉjo MoKo kantas
La chaîne YouTube MoKo Papy

Hors ligne

#3 29-10-2014 03:34:40

Delphine
Membre
Inscription : 21-10-2014
Messages : 18

Re : probleme menu et div

Bonjour,

je pense que vous avez certainement réussi.
Mais au cas ou ce n'est pas le cas, je vous donne un exemple de menu vertical déroulant



<html>
<head>
<style>
#menu-accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#menu-accordeon li {
   background-color:#729EBF;
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}
</style>
</head>
<body>
<ul id="menu-accordeon">
   <li><a href="#">Lien menu 1</a>
      <ul>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
      </ul>
   </li>
    <li><a href="#">Lien menu 2</a>
      <ul>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
      </ul>
   </li>
   <li><a href="#">Lien menu 3</a>
      <ul>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
      </ul>
   </li>
</ul>

</body>

</html>

Hors ligne

Pages :: 1

Pied de page des forums

Propulsé par FluxBB