Alignement texte et image horizontal

Résolu
Cléclé66 Messages postés 182 Date d'inscription   Statut Membre Dernière intervention   -  
Cléclé66 Messages postés 182 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour, voila mon petit soucis :
https://prnt.sc/7pk9s3

J'aimerais que l'image soit en float à droite du texte.
Mon code HTML est : 

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="lib/style.css">
    <meta charset="utf-8">
    <title>Tech-comm</title>
</head>

<body>
 <div class="header">
  <h1 class="title">Tech-comm</h1>
    <div class="nav">
      <ul id="menu">
          <li id="active">
                 <a href="#">Titre 1</a>
                </li>
                <li>
                 <a href="#">Titre 2</a>
                </li>
                <li>
                 <a href="#">Titre 3</a>
                </li>
                <li>
                 <a href="#">Titre 4</a>
                </li>
                <li>
                 <a href="#">Titre 5</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="page">
 <div class="space"></div>
        <div class="article1">
            <div class="box1">
                <h3>Boîte de dialogue</h3>
                <p>SOUS-TITRE</p>
            </div>
          <div class="box2">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu rutrum felis. Etiam mi nunc, lacinia eget sodales quis, dictum vel nisi. Integer condimentum porta ligula non rhoncus. Morbi luctus, eros vitae tempus malesuada, risus metus elementum risus, ornare efficitur justo ante et tortor. In hac habitasse platea dictumst. Donec quis sagittis quam, sed facilisis nunc. Nulla ornare pellentesque quam vitae lacinia. Nam nisi erat, pretium sed erat at, elementum feugiat enim. Duis ultrices lacinia justo, id ullamcorper nisl pretium nec. Pellentesque feugiat, velit ac pulvinar efficitur, ipsum odio ullamcorper elit, in interdum urna risus ac nisl. Praesent ornare volutpat ex et sagittis.</p>
                <p><img src="lib/img/img.jpg" alt=""/></p>
            </div>
        </div>
    </div>
</body>
</html>


Et mon CSS : 


html {
 height:100%;
}

body {
 background-color:#E6E7E7;
 min-height:100%;
   margin:0;
   padding:0;
}

.header {
 background-color:#EE4F42;
 height:20%;
}

.header > .title {
 text-align:center;
 color:white;
 margin:0;
 padding:2%;
}

.header > .nav {
 margin:0 0 0 20%;
}


ul#menu {
 list-style-type: none;
 margin-top: -1px;
 margin-right: -1px;
 margin-left: -1px;
 padding: 0;
 margin-bottom: -1px;
}

ul#menu > li {
 display: inline;
 padding-top: 1em;
 padding-bottom: 0;
 margin: 0 2px 0 0;
 background-color: #ED1D24;
 padding-left: 1.5em;
 padding-right: 1.5em;
 cursor: pointer;
}

ul#menu > li#active {
 display: inline;
 padding-top: 1em;
 padding-bottom: 0;
 margin-top: 0;
 margin-right: 2px;
 margin-left: 0;
 background-color: white;
 padding-left: 1.5em;
 padding-right: 1.5em;
}

ul#menu > li:hover {
 background-color: #D71117;
}

ul#menu > li#active:hover {
 background-color: #E7E7E7;
}

ul#menu > li > a {
 color:white;
 font-weight:bold;
 text-decoration:none;
 bottom:7px;
 left:2px;
 position:relative;
}

ul#menu > li#active > a {
 color:black;
 font-weight:bold;
 text-decoration:none;
}

.page {
 width:60%;
 height:100%;
 background-color:white;
 margin:0 0 0 20%;
}

.space {
 padding:10px; 
}

h3 {
 margin:0;
}

.article1 {
 margin: 0 20px 20px 20px; 
}

.article1 > .box1 {
 margin-bottom:20px;
 display: block;
 width: 40%;
}

.article1 > .box1 > h3 {
 background-color:#ED1D24;
 margin:0;
 text-align:center;
 color:white;
 font-weight:100;
 font-size:24px;
 padding: 4px;
}

.article1 > .box1 > p {
 background-color:#EE4F42;
 margin:0;
 text-align:center;
 color:white;
 font-size:14px;
}

.article1 > .box2 {
 display: block;
 overflow: auto
}

.article1 > .box2 > p {
 display: inline-block;
}

.article1 > .box2 > p > img {
 display: inline-block;
 float: right;
 width:20%;
}

1 réponse

Réponse 1 / 1
Utilisateur anonyme
 
Change ça dans ton HTML 

<div class="box2">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu rutrum felis. Etiam mi nunc, lacinia eget sodales quis, dictum vel nisi. Integer condimentum porta ligula non rhoncus. Morbi luctus, eros vitae tempus malesuada, risus metus elementum risus, ornare efficitur justo ante et tortor. In hac habitasse platea dictumst. Donec quis sagittis quam, sed facilisis nunc. Nulla ornare pellentesque quam vitae lacinia. Nam nisi erat, pretium sed erat at, elementum feugiat enim. Duis ultrices lacinia justo, id ullamcorper nisl pretium nec. Pellentesque feugiat, velit ac pulvinar efficitur, ipsum odio ullamcorper elit, in interdum urna risus ac nisl. Praesent ornare volutpat ex et sagittis.</p>
 <img src="lib/img/img.jpg" alt=""/>
</div>


Et ceci dans ton CSS: 
.article1 > .box2 {
 display: block;
 overflow: hidden;
 padding-bottom: 10px;
}

.article1 > .box2 > p {
 float: left;
 width: 80%;
}

.article1 > .box2  > img {
 float: right;
 width:20%;
}

Il fallait laisser de l'espace pour l'image, donc le réduire à 80% vu que ton image fait 20%, ensuite le passer en float: left; pour laisser l'image "monter".

Le overflow: hidden sur .box2 est obligatoire, sinon tous les éléments ajoutés par la suite vont fusionner avec le contenu. Et le padding-bottom c'est juste pour laisser un peu d'espace en dessous. Tu peux le supprimer.
1
Cléclé66 Messages postés 182 Date d'inscription   Statut Membre Dernière intervention   77
 
Merci beaucoup ça fonctionne ! Je t'en suis reconnaissant ;)
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse