18041 sujets

Questions générales et questions de débutants

Paragraphes avec images

Bonjour.
Depuis plusieurs années que je m'amuse à faire mon site web avec des logiciels. Dernièrement, j'ai décidé de le faire entièrement par moi-même. J'ai suivi une formation '' débutant '' sur le web et je me suis inspiré de la base de cette formation pour créé mon site. Ce n'est surement pas un gros problème, mais je n'y arrive pas.
Donc, voici.
Je veux afficher un titre et mettre des photos en-dessous. Pour le premier bloc, cela fonctionne très bien.
C'est pour le deuxième que ça se complique... Je n'arrive pas à mettre le titre en-dessous, il s'affiche toujours à la suite.
Voici mon HTML pour cette partie :
<article>
<h1>La section des oiseaux.</h1>
<hr>

<br/>



<h5><i><u>Le Balbuzard pecheur</u></i></h5><br/>

<a href="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (36)pour EOS.jpg" data-lightbox= "illustration" title="Balbuzard pecheur">
<img src="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (36)pour EOS.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (39)pour EOS.jpg" data-lightbox= "illustration" title="Balbuzard pecheur">
<img src="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (39)pour EOS.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (43)eos.jpg" data-lightbox= "illustration" title="Balbuzard pecheur">
<img src="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (43)eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (44)eos.jpg" data-lightbox= "illustration" title="Balbuzard pecheur">
<img src="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (44)eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (50)eos.jpg" data-lightbox= "illustration" title="Balbuzard pecheur">
<img src="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (50)eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>


<a href="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (65)eos.jpg" data-lightbox= "illustration" title="Balbuzard pecheur">
<img src="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (65)eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (69)pour EOS.jpg" data-lightbox= "illustration" title="Balbuzard pecheur">
<img src="images/photos/OISEAUX/BALBUZARD PECHEUR/182A4867b (69)pour EOS.jpg" width="100" height="67" alt=""class="opacite-image" /></a>





<br/><h5><i><u>Le Bruand hudsonien</u></i></h5><br/><br/>



<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>


<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>


<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>



<h5><i><u>Le Bruand hudsonien</u></i></h5><br/>



<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>


<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>


<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

<a href="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" data-lightbox= "illustration" title="Bruand hudsonien">
<img src="images/photos/OISEAUX/BRUANT HUDSONIEN/182A3314-eos.jpg" width="100" height="67" alt=""class="opacite-image" /></a>

</article>

Voici mon CSS qui va avec :

/* contenu */

#contenu
section hr { margin-right:290px; color:black; background-color:black; height:1px; border:0;}
article {width:580px; margin-bottom:40px;}
article h1 { color:#000; margin-top:15px; padding:0; font-weight:lighter;}
article h2 { color:#f75553; margin:0; padding:0; font-size:15px;}
article h3 { color:#000 ; margin-left:40px; padding:0; font-size:12px;}
article h4 { color:#000 ; margin-left:470px; padding:0; font-size:12px;}
article h5 { color:#3B5997; margin-top:0 ; padding:0; font-size:15px;}
article p { text-align:justify; font-size:14px;}
article img {float:left; margin-right:10px; margin-bottom:10px;}

Bon, je sais, c'est un peu brouillon, mais je débute. Smiley cligne

Je mets le site en ligne si quelqu'un veut voir ce que je veux dire. Aucun problème avec ma page Accueil, seulement sur la page oiseaux. Smiley lol

Merci d'avance

Alain
Bonjour.

Par où commencer...

Les titres (h1, h2, h3...) sont destinés par défaut à prendre la largeur de leur conteneur. De ce fait, ils vont 'naturellement' à la ligne et les éléments qui les suivent, aussi.

Mais ce comportement 'naturel' est perturbé par les images qui sont en 'float : left'...

Les images et les liens sont des éléments 'en-ligne' : ils se mettent les uns à la suite des autres sur une ligne. Dès lors, il n'y a pas besoin de 'float : left'.

Ensuite, il y a une ligne sur la zone d'édition de cette page, 'colorisation syntaxique' qui permet de rendre votre code plus attrayant et plus lisible.

Enfin, la syntaxe de votre code est un peu désuète...

Smiley smile
Merci d'avoir pris de votre temps pour mon problème.
Je vais regardé plus attentivement votre réponse ce soir en arrivant du boulot. Je sais bien que la mise en forme est un peu le bordel, mais j'en suis à ma première expérience et le but n'est pas de devenir codeur, mais de faire mon site par moi même.

J'ai pensé à une solution, voir dans la section " contenu ", je pourrais y insérer des sections que j'appellerais " xxxxx " pour chaque titre. Pas certain.....

Si vous avez une solution plus simple, n'hésitez pas à me la proposée.

Amicalement

Alain
Je ne crois pas qu'il y ait de solution plus simple que d'enlever 'float : left' aux images ('img').

Smiley smile
Modifié par Zelena (03 Apr 2017 - 13:44)
Zelena a écrit :
Je ne crois pas qu'il y ait de solution plus simple que d'enlever 'float : left' aux images ('img').

Smiley smile


Merci Zelena.

Je m'empresse d'essayer cette solution ce soir.
Bonsoir Zelena.

Si simple et pourtant si compliqué quand on a pas les connaissances....

Merci. Smiley smile

Je vais surement avoir d'autres questions, mais j'essaye toujours de trouvé avant de déranger.
Pas toujours facile à comprendre le HTML / CSS, mais souvent logique. Smiley cligne

Alain
Sujet clos
Aller à