problème : Layout flexbox par LinkoLabs - page 1

Salut la compagnie,

Je demande une petite aide, pour la réalisation d'un layout en html5 et css3 avec flex box.

Je m'initie au développement web principalement sur les flexbox pour le moment.
je tente depuis quelques heures a chercher une solution a mon problème mais c'est sans réussite, j'ai du mal a comprendre le principe.
Voici un layout que j'aimerais terminer.

Voici mon code html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Layout Formation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <div class="site_Title_left">Site title</div>
      <nav>
        <div class="nav_1_right">Nav 1</div>
        <div class="nav_2_right">Nav 2</div>
        <div class="nav_3_right">Nav 3</div>
      </nav>
    </header>

    <div class="encadrement">
      <div class="post_Title_center">Poste Title</div>
      <section class="Left_pan">
        <div class="col_l">
          <div class="side_bar_left">Post Meta</div>
        </div>

        <div class="col_c">
          <div class="main_content">Main Content</div>
          <div class="main_content_image">Main Content Image</div>
        </div>

        <div class="col_r">
          <div class="sideBar">Side bar</div>
          <div class="ads">Ads</div>
          <div class="other">Other</div>
        </div>
      </section>
    </div>
    <footer>2024 © Created by Kersteens Colin</footer>
  </body>
</html>

Voici mon code CSS :

* {
  margin: 2px;

  box-sizing: border-box;
}
header {
  display: flex; /* activation de flexbox*/
  justify-content: space-between;
  align-items: center;
  height: 66px;
  /* border: 1px solid black; */
  width: 100%;
}
.site_Title_left {
  flex: 50%;
  background-color: #fda543;
  height: 100%;
  width: 50%;
  text-align: left;
}

nav {
  display: flex;
  width: 50%;
  justify-content: space-between;
  text-align: left;
  height: 100%;
}

nav div {
  /* margine entre les elements */
  background-color: grey;
  width: 32.9%;
}
/* ---------------------------------------------------------------------------------------------- */

.Left_pan {
  width: 100%;
  display: flex;
  height: 600px;
}

.col_l {
  flex-basis: 20%;
  display: flex;
  flex-direction: column;
}

.post_Title_center {
  display: flex;
  height: 66px;
  width: 100%;
  background-color: coral;
}
article .article_left {
  display: flex;
}
.side_bar_left {
  flex-grow: 1;
  background-color: darkgray;
  display: flex;
}
/* Colonne central */
.col_c {
  flex-basis: 75%;
  display: flex;
  flex-direction: column;

  flex-grow: 1;
}
.main_content {
  flex-grow: 1;
  background-color: darkorange;
}
.main_content_image {
  flex-grow: 2;

  background-color: cornflowerblue;
}
/* partie de droit */
.col_r {
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
}

.sideBar {
  width: 100%;

  background-color: green;
  flex-grow: 1;
}

.ads {
  flex-grow: 1;
  background-color: orangered;
}

.other {
  flex-grow: 1;
  background-color: blue;
}

/* Footer */
footer {
  height: 66px;
  width: 100%;

  text-align: center;
  background-color: lightcoral;
}

Voici mon résultat :

Je bloque littéralement sur le faite que mon Post Title doit arriver devant ma Side Bar ...

je vais revoir mon code de zero car je pense que je vais devoir faire deux colonne enfaite , c'est en écrivant ici que je viens de trouver l'idée , cependant si vous avez des conseils et une solutions je suis preneur !

-
Edité par LinkoLabs 1 septembre 2024 à 23:03:40

Bonjour LinkoLabs,

Ne voulez-vous pas embellir votre page web ? Je pense qu'il faut ajouter un peu de style, car des cubes multicolores superposés les uns sur les autres n'a rien de super-spécial. Il y a tant de choses incroyables que vous pouvez ajouter, comme ce bout de code :

.main-content /*vous pouvez mettre ici n'importe quelle classe*/ {
 background: green;
 animation: depl 4s ease-out infinite alternate;
}
@keyframes depl {
  20% {
  background-color: green;
  box-shadow: 0px -400px 60px yellow inset;
      }
  40% {
  background-color: yellow;
  box-shadow: 0px -400px 60px green inset;
 }
   60%{
     background-color: blue;
  box-shadow: 0px -400px 60px red inset;
   }
 80% {
 background-color: red;
 box-shadow: 0px -400px 60px blue inset;
   }
 }

Ajoutez ce bout de code à votre code CSS et admirez l'effet !

-
Edité par DragenSanguinar 11 novembre 2024 à 14:09:32

problème : Layout flexbox

problème : Layout flexbox

Supprimer

Modérer

Signaler le message aux modérateurs