Pb de CSS avec float
Résolu
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
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 :
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.
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.
3 réponses
-
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%; -
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 ;-) -
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-
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... ;-)
-
