Purger mon code CSS par ArmandDuchatel - page 1

Bonjour à tous,

J'ai souhaité effectuer un effet pour placer du texte aux côtés d'une image. J'ai réussi mon effet mais j'ai dû recourir à la propriété absolute de l'élément position. J'aurais aimé y parvenir sans cet artifice, j'échoue à trouver comment m'y prendre : je vous présente mon code, si vous avez des idées, je suis dispo' ,

ici mon effet de design :

mon html :

<div class="terroirBox">
  <div class="kiini"> Les parfums de votre enfance 
  </div>
  <div id="slideBox">
    <ul class="terroirSlideShow">
      <li>  
        <img  class="slide showing" src="../../legacy/fields1.jpg" alt=""> 
      </li>
      <li >  
        <img class="slide" src="../../legacy/Futuroscope1.jpg" alt=""> 
      </li>
      <li >    
        <img class="slide" src="../../legacy/mountain1.jpg" alt=""> 
      </li>
      <li >  
        <img class="slide" src="../../legacy/poitierTown1.jpg" alt=""> 
      </li>
      <li >  
        <img class="slide" src="../../legacy/wineCheese1.jpg" alt=""> 
      </li>
    </ul>
  </div>
  <div class="terroirText">
    <p id="terroirTextTitle">  Un terroir généreux  
    </p>
    <p>  Tauri montis verticibus qui ad solis ortum sublimius attolluntur, Cilicia spatiis porrigitur
    </p>
    <p>  late distentis dives bonis omnibus terra, eiusque lateri dextro adnexa Isauria, pari sorte uberi 
    </p>
    <div  id="lienTerroir" class="linkPages">
      <a  href="../../blog/terroir.html"> Découvrez notre terroir > 
      </a>
    </div>
  </div>
</div>

CSS :

.terroirBox {
display : grid ;
grid :
width : 100% ;
height : 75% ;
text-align :center;
margin : auto ;
margin-top: 35% ;
color : #0B1517 ;
background-color: rgb(254,236,200);
font-size : 185% ;
}

.terroirSlideShow {
position: relative;
height: 20em;
padding: 0px;
margin: 0px;
list-style-type: none;
}

.slide   {
position: absolute;
left: 0px;
top: 0px;
width: 50%;
height: 100%;
margin-right : 15% ;
opacity: 0;
z-index: 1;
border-radius: 13%;
-webkit-transition: opacity 3.62s;
-moz-transition: opacity 3.62s;
-o-transition: opacity 3.62s;
transition: opacity 3.62s;
}

.showing {
opacity: 1;
z-index: 2;
}

.slide {
font-size: 40px;
padding: 40px;
box-sizing: border-box;
}

.terroirText {
position : absolute ;
margin-top : 10%;
text-align: justify;
right : 10% ;
width : 25%;
font-size : 75%;
}

#terroirTextTitle {
text-align: center ;
font-style: italic;
font-weight: 400 ;
font-size : 165%;
width : 105% ;
border-radius : 5%;
}

#lienTerroir  {
text-align: center ;
font-style: italic;
font-weight: 800 ;
font-size : 105%;
width : 105% ;
border-radius : 5%;
margin-top : 25%;
border-style: groove;
border-color: #0C1319 ;
}

Merci d'avoir pris de votre temps pour lire mon poste,

à bientôt,

Armand

Bonjour,

C'est très simple ne t'inquiète pas, pour cela il te suffit d'englober ta div qui contient tes images ainsi que ta div qui contient le texte d'une seule div à laquelle tu donneras en css display: flex (penses à enlever toutes les positions déjà présentes).

Voici un exemple très simple :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="test3.css">
</head>
<body>
    <div id="img_text">
        <div id="img">
            <img src="https://www.w3schools.com/howto/img_fjords.jpg" alt="">
        </div>
        <div id="txt">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum atque doloribus eveniet, quia illo qui reiciendis saepe non voluptate veniam vitae doloremque cumque ratione libero.</p>
        </div>
    </div>
</body>
</html>

#img_text {
    display: flex;
}

Clément

-
Edité par Clément_ 21 mars 2018 à 8:48:41

Purger mon code CSS

Purger mon code CSS

Supprimer

Modérer

Signaler le message aux modérateurs