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

Question

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

Signaler

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%;
}

A voir également:

Alignement texte et image horizontal
Alignement texte et image horizontal ✓ - Forum - CSS
Wordpress aligner texte et image ✓ - Forum - Wordpress
Aligner texte et image ✓ - Forum - Créer un site
Aligner texte et image dans un article wordpress ✓ - Forum - Wordpress
Aligner texte et image sur site web ✓ - Forum - Programmation

1 réponse

Posez votre question

ZeNairolf · Accepted Answer · 2015-07-06T22:01:41+0200

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.

Merci beaucoup ça fonctionne ! Je t'en suis reconnaissant ;)

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

1 réponse

Votre réponse

Newsletter