Sujet Précédent Sujet Suivant

Alignement texte et image horizontal

Résolu/Fermé
Cléclé66 Messages postés 181 Date d'inscription dimanche 23 septembre 2012 Statut Membre Dernière intervention 9 août 2016 - Modifié par Cléclé66 le 6/07/2015 à 21:47
Cléclé66 Messages postés 181 Date d'inscription dimanche 23 septembre 2012 Statut Membre Dernière intervention 9 août 2016 - 6 juil. 2015 à 22:04
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
Modifié par ZeNairolf le 6/07/2015 à 22:03
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 181 Date d'inscription dimanche 23 septembre 2012 Statut Membre Dernière intervention 9 août 2016 77
6 juil. 2015 à 22:04
Merci beaucoup ça fonctionne ! Je t'en suis reconnaissant ;)
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Trouver le mot réellement écrit en lettres capitales PIX
ETHAN -
kirikou -

4 réponses
Alignement du texte à gauche et à droite
Owrell -
Anonyma16_42 -

8 réponses
retrouver un texte caché dans une image jpg
iamborg8of9 -
Haldas -

13 réponses