27219 sujets

CSS et mise en forme, CSS3

Modérateur
Hello,
Très bon exemple, ce header est justement construit avec Flexbox. Prends exemple dessus et fais nous un petit update avec du code si tu bloques sur quelque chose Smiley smile
ok voici le code.


<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
</ul>

<div id="headerImage">
  <div id="box">
      <h2>INC</h2>
    <h3>Développeur Front End Junior</h3>
  </div>
</div>



.navigation {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  
  list-style: none;
  margin: 0; 
  background: #fff;
  border-top: 4px solid green;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: #333;
}

ul.navigation {
  padding-right: 200px;
}

#headerImage {
  background-image: url("/assets/img/header.jpg");
  height: 450px;
  justify-content: stretch;
}

#box {
  color: white;
  text-align: center;
  margin-left: 700px;
  border: 2px solid white;
  width: 200px;
}

@media all and (max-width: 800px) {
  .navigation {
    justify-content: space-around;
  }
}

@media all and (max-width: 600px) {
  .navigation {
    flex-flow: column wrap;
    padding: 0;
  }
  .navigation a { 
    text-align: center; 
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255,0.3); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
}
Modérateur
Hello,
Le mieux serait d'emballer ton html actuel dans un autre élément qui lui même serait un flexbox. Si tu lui donnes la class wrapper (<div class="wrapper">…</div>) et que tu lui appliques ceci, cela devrait le faire Smiley smile
.wrapper{
  display: flex;
  justify-content: space-between;
}