Sujet Précédent Sujet Suivant

Pb de CSS avec float

Résolu/Fermé
isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 - Modifié par isold le 15/12/2014 à 21:16
isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 - 29 déc. 2014 à 12:49
Bonsoir

je galère un peu avec les "float" des css :-(

J'ai une page dans laquelle il y a plusieurs balises H2 et dans chacun de ces paragraphes, je souhaiterais, mettre une photo et à gauche un texte de quelques lignes 
...
.imgdist { float:left; margin-right:8px }
</style>
</head>

<body>
...
<h2>Paragraphe 1</h2>
<div>
  <div class="imgdist"><img src="img/image1.jpg"></div>
  <p>Bla bla bla...</p>
</div>

<h2>Paragraphe 2</h2>
<div>
  <div class="imgdist"><img src="img/image2.jpg"></div>
  <p>Bli bli bli...</p>
</div>

etc...


Il n'y a pas de retour à la ligne pour chaque nouveau paragraphe H2 et toutes les images se suivent en décalé comme ça : 

Paragraphe 1
+----+
|    | bla bla bla
|    | Paragraphe 2
+----+ +----+
       |    | Bli bli bli
       |    | Paragraphe 3
       +----+ +----+
              |    | ... etc...


j'ai essayé de mettre une balise div puis une balise p ayant un style contenant clear:both à la fin de chaque paragraphe H2 mais ça me fait un grand blanc comme un saut de page

Quelqu'un a une idée ?

Merci pour votre aide.

A voir également:

3 réponses

Réponse 1 / 3
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
16 déc. 2014 à 09:36
Salut,

Une solution possible :
// CSS 
.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}


// HTML 
<h2>Paragraphe 1</h2>
<div class="clearfix">
  <div class="imgdist"><img src="img/image1.jpg"></div>
  <p>Bla bla bla...</p>
</div>

<h2>Paragraphe 2</h2>
<div class="clearfix">
  <div class="imgdist"><img src="img/image2.jpg"></div>
  <p>Bli bli bli...</p>
</div>


D'autres solutions : https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing

Bonne journée
0
isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 5
16 déc. 2014 à 19:25
Merci beaucoup pour ta réponse. Il y a déjà un gros progrès : il y a retour au bord gauche de la page à chaque balise H2 et les paragraphes ne sont pas écrits en décalé. Mais après chaque paragraphe H2 il y a un grand espace blanc comme si on sautait d'une page.

Je continue à chercher et si je trouve, je viendrai mettre la solution ici. Cela dit, ça n'empêche que s'il y a des solutions, je suis preneuse... ;-)
0
Réponse 2 / 3
isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 5
19 déc. 2014 à 14:46
En fait, c'est beaucoup plus compliqué que je ne le pensais car mon contenu était déjà dans une div.

J'ai un menu dans une div 'float:left' à droite de laquelle il y a une autre div représentant le contenu de la page et dans ce contenu, je mettais les images dans une div 'float:left' (pour pouvoir mettre mon bla bla bla à côté mais les deux 'float:left' cohabitaient mal ensemble et tout était décalé.

Je résous mon problème par un tableau : td1 = image et td2 = bla bla bla mais je voulais absolument éviter un tableau, j'espérais faire ça en CSS. Ce que je voulais est comme ci-dessous. 

+------++-----------------------------------------------+
| menu ||<H2>...</H2>                contenu page       |
|  ds  ||+----+                      dans une div       |
|  une |||img |Bla bla bla                              |
| div  |||    |la la la...                              |
| float||+----+                                         |
| left ||                                               |
|      ||<H2>...</H2>                                   |
|      ||+----+                                         |
|      |||img |Bla bla bla                              |
|      |||    |la la la...                              |
|      ||+----+                                         |
|      ||                                               |
|      ||<H2>...</H2>                                   |
|      ||+----+                                         |
|      |||img |Bla bla bla                              |
|      |||    |la la la...                              |
|      ||+----+                                         |
|      ||                                               |
|      ||                                               |
+------++-----------------------------------------------+

Si quelqu'un a une idée : tant mieux, je la prendrai volontiers pour apprendre, dans le cas contraire, je me contenterai des tableaux. En tout cas, merci @Pitet ;-)
0
Réponse 3 / 3
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
19 déc. 2014 à 21:21
Salut
voici comment utiliser ce que tu veux 

<h2>ton titre</h2>
<div class="bloc">
<div class="leftimg"><img src="tonimage.jpg"></div>
<p>ton paragraphe</p>
 </div>


css 

.bloc {
width:100%;
min-width: hauteur de image en px; /*évite le chevauchement si le texte occupe moins de place que la hauteur d'image*/
}
.leftimg {
 float:left;
width:200px;
margin:0 10px 10px 0;
}
.leftimg img {
width:100%;
}
0
isold Messages postés 54 Date d'inscription samedi 8 mars 2014 Statut Membre Dernière intervention 30 août 2016 5
29 déc. 2014 à 12:49
Je te remercie vraiment beaucoup @animostab. Mon problème est résolu. je marque donc ce fil de discussion comme tel. :-) Bonne fêtes de fin d'année...
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse