Balise sans retour a la ligne

Résolu/Fermé

legoff21 Messages postés 44 Date d'inscription samedi 4 juin 2011 Statut Membre Dernière intervention 13 septembre 2014 - 27 juin 2013 à 18:38
legoff21 Messages postés 44 Date d'inscription samedi 4 juin 2011 Statut Membre Dernière intervention 13 septembre 2014 - 27 juin 2013 à 20:35

Bonjour,
Je suis un débutant du HTML 5 et du CSS 3 qui vient de se lancer dans la confection d'un site.
Voila, j'aimerais faire un une page sommaire sur les types de vidéos présentes sur le site ( ex: drôle, musique etc...) pour sa j'ai fait des liens avec une images représentative et le titre de la catégorie. J'aimerai donc que les images soit positionner sous forme de grille et que chaque titre soit sous son image.
Seulement soit le titre et à gauche de l'image, soit les images sont les unes sous les autres.
Voila le code actuellement:

<img src="Categories/Drole.jpg" />
<figcaption>
<style="margin-left: 50px";><a href="drole.html">Vidéos Drole</a>
</figcaption>
<img src="Categories/Musique.jpg" />
<figcaption>
<style="margin-left: 50px";><a href="musique.html">Vidéos de Clip musicaux</a>
</figcaption>

ce qui fait que les images sont les unes en dessous des autres, alors serait t-il possible que la balise figcaption ne provoque pas de retour a la ligne ( ou bien n'importe qu'elle autre méthode ) ?

Cordialement legoff21

A voir également:

Balise sans retour a la ligne
Aller à la ligne excel - Guide
Ligne occupée - Forum SFR
Retour à la ligne google sheet - Forum Google Docs
Partager photos en ligne - Guide
Echo retour à la ligne ✓ - Forum Shell

5 réponses

Réponse 1 / 5

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
27 juin 2013 à 19:18

A tester, sans certitude :

figure{
float:left;
display:inline;
width:900px:
height:90px;
}

Théoriquement l'élément "figcaption" devrait être contenu dans "figure"..

Réponse 2 / 5

inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
27 juin 2013 à 19:49

ou inline-block, ça devrait avoir le meme resultat

Réponse 3 / 5

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
27 juin 2013 à 19:01

Salut,

Il est ou l'élément figure ?

<figure>
  <img src="image.jpg" alt="" />
  <figcaption>Légende associée</figcaption>
</figure>

D'après ce que j'ai lu, "figcaption" utilise un "display:block;" par défaut donc si vous utilisez un style "inline" avec un "float:left;" sur cet élément, ça devrait théoriquement aligner les images.

Non testé, pure supposition !

legoff21 Messages postés 44 Date d'inscription samedi 4 juin 2011 Statut Membre Dernière intervention 13 septembre 2014 2
27 juin 2013 à 19:07

En effet je n'ai pas mis la balise figure ( honte a moi :p) par contre comment utilisez un style "inline" avec un "float:left;" a la pace d'un "display:block;" ?
Je suis vraiment débutant :)

Réponse 4 / 5

legoff21 Messages postés 44 Date d'inscription samedi 4 juin 2011 Statut Membre Dernière intervention 13 septembre 2014 2
27 juin 2013 à 20:29

Merci je test tout ça ;)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

legoff21 Messages postés 44 Date d'inscription samedi 4 juin 2011 Statut Membre Dernière intervention 13 septembre 2014 2
27 juin 2013 à 20:35

Ca marche !!!! Merci beaucoup !

Discussions similaires

Faire un retour à la ligne sur Google Sheet

balise de retour à la ligne en php

Google Sheet : Retour à la ligne à l'intérieur d'une formule

Saut de ligne dans cellule excel...

Remplacer espace par retour ligne sur txt ???