Balise <aside> HTML5 et CSS
Résolu
Mongeau18
Messages postés
198
Date d'inscription
Statut
Membre
Dernière intervention
-
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je veux programmé une page en HTML5 et CSS. Ma page contien le titre d'un film ainsi que son résumé. Je veux rajouté à cela une image qui sera dans le coté. Donc, J'ai une <section> qui doit contenir un <article> et une image en <aside> qui est sur le coté droit du résumé. Je ne comprend pas comment placer mon image à droite avec la fonction <aside>.
Voici le code que j'ai :
Je veux programmé une page en HTML5 et CSS. Ma page contien le titre d'un film ainsi que son résumé. Je veux rajouté à cela une image qui sera dans le coté. Donc, J'ai une <section> qui doit contenir un <article> et une image en <aside> qui est sur le coté droit du résumé. Je ne comprend pas comment placer mon image à droite avec la fonction <aside>.
Voici le code que j'ai :
<section> <article> <h3 id="8_mile">8 Mile</h3> <p> Résumé du film. <br/><br/> Pour lire la vidéo, cliquez <a href="file:///G:/Films/8 mile.avi" >ici</a>. </p> <aside> <img src="file://C:/HTML/8_mile_cover.jpg" /> </aside> </article> </section>
A voir également:
- Aside html5
- Html5 video player - Télécharger - Divers Web & Internet
- Html5 mac - Télécharger - Diffusion
- Html5 - Forum HTML
- Probleme HTML5 ✓ - Forum Programmation
- Video html5 ✓ - Forum HTML
8 réponses
Salut, essai ça :
<aside>
<div style="float:right;">
<img src="file://C:/HTML/8_mile_cover.jpg" />
</div>
</aside>
<aside>
<div style="float:right;">
<img src="file://C:/HTML/8_mile_cover.jpg" />
</div>
</aside>
Mongeau18
Messages postés
198
Date d'inscription
Statut
Membre
Dernière intervention
44
Non ca ne fonctionne pas. La fonction FLOAT fait flotter mon image et n'est pas cadrer dans la section que je désire. Puisque j'ai plusieur article et section dans pour chaque film dans ma page, l'image flote par dessu le tout.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
voila le seul moyen de résoudre ton probleme :
bien sur j'ai mis des couleur css pour que tu différencies les sections ;)
<section style="border:1px solid black;"> <article> <table width="100%"> <tr> <th style="background:#ccc;" colspan="2"> <h3 id="8_mile">8 Mile</h3> </th> </tr> <tr> <td style="background:#000;color:#fff;"> <p> Résumé du film. <br/><br/> Pour lire la vidéo, cliquez <a href="file:///G:/Films/8 mile.avi">ici</a>. </p> </td> <td style="background:#23425A;color:#fff;"> <aside> <img src="file://C:/HTML/8_mile_cover.jpg" /> </aside> </td> </tr> </table> </article> </section>
bien sur j'ai mis des couleur css pour que tu différencies les sections ;)
Bonjour,
En pleine journée de travail, je prends deux minutes pour participer à cette discussion déjà ancienne mais dont cette réponse a failli me faire perdre définitivement la vue.
Non Mandolorien, la solution que tu proposes n'est pas la seule mais surtout elle est techniquement totalement fausse.
pour rappel, les tableaux (<table>) ne doivent plus être utilisées à des fins de mise en page depuis noël... 1999 !!!
source :
https://www.la-grange.net/w3c/html4.01/struct/tables.html#h-11.1
Et au cas où le message ne soit pas bien passé en 16 années... HTML5 en ajoute une nouvelle couche :
source : https://html.spec.whatwg.org/multipage/tables.html#tabular-data
Pour ceux qui chercheraient une solution à un problème similaire des liens qui datent un peu mais dont les techniques sont techniquement correctes et éprouvées :
+ https://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
+ https://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
+ http://css.mammouthland.net/mise-en-page-sans-tableau.php
Pour d'autres, peut être plus férus de technique, vous pouvez également vous tourner vers CSS3 et le modèle de boîte flexible :
+ https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
En pleine journée de travail, je prends deux minutes pour participer à cette discussion déjà ancienne mais dont cette réponse a failli me faire perdre définitivement la vue.
Non Mandolorien, la solution que tu proposes n'est pas la seule mais surtout elle est techniquement totalement fausse.
pour rappel, les tableaux (<table>) ne doivent plus être utilisées à des fins de mise en page depuis noël... 1999 !!!
Les tables ne devraient pas représenter simplement un moyen de disposer le contenu d'un document car cela peut entraîner des problèmes de restitution sur les médias non-visuels. En outre, quand on les utilise avec des graphiques, ces tables peuvent forcer l'utilisateur à effectuer un défilement horizontal pour voir une table qui aura été conçue sur un système avec une surface d'affichage plus grande. Afin de minimiser ces problèmes, les auteurs devraient employer des feuilles de style pour le contrôle de la disposition plutôt que des tables.
source :
https://www.la-grange.net/w3c/html4.01/struct/tables.html#h-11.1
Et au cas où le message ne soit pas bien passé en 16 années... HTML5 en ajoute une nouvelle couche :
Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.
source : https://html.spec.whatwg.org/multipage/tables.html#tabular-data
Pour ceux qui chercheraient une solution à un problème similaire des liens qui datent un peu mais dont les techniques sont techniquement correctes et éprouvées :
+ https://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
+ https://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css.html
+ http://css.mammouthland.net/mise-en-page-sans-tableau.php
Pour d'autres, peut être plus férus de technique, vous pouvez également vous tourner vers CSS3 et le modèle de boîte flexible :
+ https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html