Balise <aside> HTML5 et CSS [Résolu/Fermé]

Signaler
Messages postés
196
Date d'inscription
mardi 7 août 2012
Statut
Membre
Dernière intervention
9 mars 2013
-
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
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 :

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




8 réponses

Salut, essai ça :

<aside>
<div style="float:right;">
<img src="file://C:/HTML/8_mile_cover.jpg" />
</div>
</aside>
Messages postés
196
Date d'inscription
mardi 7 août 2012
Statut
Membre
Dernière intervention
9 mars 2013
41
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.
Messages postés
196
Date d'inscription
mardi 7 août 2012
Statut
Membre
Dernière intervention
9 mars 2013
41
Y a til d'autre suggetion ou aide possible svp
Messages postés
196
Date d'inscription
mardi 7 août 2012
Statut
Membre
Dernière intervention
9 mars 2013
41
SVP J'aimerais avoir de l'aide pour continuer mon projet !
Messages postés
196
Date d'inscription
mardi 7 août 2012
Statut
Membre
Dernière intervention
9 mars 2013
41
Svp j'ai besoin d'aide
Messages postés
196
Date d'inscription
mardi 7 août 2012
Statut
Membre
Dernière intervention
9 mars 2013
41
Quelqun aider moi
Messages postés
110
Date d'inscription
dimanche 9 septembre 2012
Statut
Membre
Dernière intervention
9 mars 2018
3
As tu essayé le margin-left:30%; ???

<aside style="margin-left:30%;">
Messages postés
196
Date d'inscription
mardi 7 août 2012
Statut
Membre
Dernière intervention
9 mars 2013
41
Non désolé ca ne fonctionne pas. L'image reste en dessou du texte et moi je désire qu'elle soit à droite du texte
Messages postés
110
Date d'inscription
dimanche 9 septembre 2012
Statut
Membre
Dernière intervention
9 mars 2018
3
voila le seul moyen de résoudre ton probleme :

<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 ;)
Messages postés
196
Date d'inscription
mardi 7 août 2012
Statut
Membre
Dernière intervention
9 mars 2013
41
Merci beaucoup sa répond a ma question et sa fait comme je l'espérais ! Je le modifierais p-e un peu pour les couleur et largeur et tout !
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
904
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 !!!

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
float: right;