28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes

Je voudrais vous soumettre un petit problème dont je suis sûr que c'est tout bête, mais je ne vois pas. Dans le style ci-dessous
lorsque je supprime la ligne 9
<!--position: fixed; -->
cela a une incidence sur la position du bloc menu dans la page. Pourtant il me semble bien que cette ligne est désactivée, non?
Quel est ce prodige?
Merci d'avance pour votre aide.

<style>
.sidebar {
  margin: 0;
  margin-left: 5px;
  padding: 0;
  width: 160px;
  background-color: lightgreen;
  position: absolute;
  <!--position: fixed; -->
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding-top:5px;
  padding-bottom:5px;
  padding-right:5px;
  padding-left:5px;
  text-decoration: none;
  background-color: white;
}
 
.sidebar a.active {
  background-color: grey;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: orange;
  color: white;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

@media screen and (max-width: 250px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}
</style>
Je me réponds à moi-même
Je viens de trouver une solution en jouant avec les margin tout en haut du script:

.sidebar {
  margin-top:20px;
  margin-left: 5px;
  padding: 0;
  width: 160px;
  background-color: lightgreen;
  position: absolute;
  height: auto;
  overflow: auto;
}


C'est mieux comme ça Smiley smile
Bonne journée