Alignement texte et image horizontal [Résolu/Fermé]

Signaler
Messages postés
185
Date d'inscription
dimanche 23 septembre 2012
Statut
Membre
Dernière intervention
9 août 2016
-
Cléclé66
Messages postés
185
Date d'inscription
dimanche 23 septembre 2012
Statut
Membre
Dernière intervention
9 août 2016
-
Bonjour, voila mon petit soucis :
http://prntscr.com/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

Messages postés
1709
Date d'inscription
vendredi 6 mars 2009
Statut
Membre
Dernière intervention
24 septembre 2018
513
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
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 87184 internautes nous ont dit merci ce mois-ci

Cléclé66
Messages postés
185
Date d'inscription
dimanche 23 septembre 2012
Statut
Membre
Dernière intervention
9 août 2016
62
Merci beaucoup ça fonctionne ! Je t'en suis reconnaissant ;)