Sujet Précédent Sujet Suivant

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

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 219
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"..
1
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
1
Réponse 3 / 5
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 219
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 !
0
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 :)
0
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 ;)
0

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 !
0

Discussions similaires

Retour à la ligne tchat.
sartorius1108 -
momolapince -

5 réponses
Retour ligne dans une concaténation EXCEL ?
bidouille74 -
FFF -

5 réponses
balise de retour à la ligne en php
2I++ -
Naguez Abderraouf -

5 réponses
Faire un retour à la ligne sur Google Sheet
29vitruve -
eric -

7 réponses
Retour de ligne dans le SHELL
kyloo49 -
@Y0UB -

9 réponses