Balise <aside> HTML5 et CSS

Résolu/Fermé
Mongeau18 Messages postés 198 Date d'inscription mardi 7 août 2012 Statut Membre Dernière intervention 9 mars 2013 - 4 sept. 2012 à 23:52
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 30 déc. 2015 à 14:36
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>
0
Mongeau18 Messages postés 198 Date d'inscription mardi 7 août 2012 Statut Membre Dernière intervention 9 mars 2013 44
5 sept. 2012 à 13:48
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.
0
Mongeau18 Messages postés 198 Date d'inscription mardi 7 août 2012 Statut Membre Dernière intervention 9 mars 2013 44
6 sept. 2012 à 04:09
Y a til d'autre suggetion ou aide possible svp
0
Mongeau18 Messages postés 198 Date d'inscription mardi 7 août 2012 Statut Membre Dernière intervention 9 mars 2013 44
7 sept. 2012 à 00:59
SVP J'aimerais avoir de l'aide pour continuer mon projet !
0
Mongeau18 Messages postés 198 Date d'inscription mardi 7 août 2012 Statut Membre Dernière intervention 9 mars 2013 44
7 sept. 2012 à 19:05
Svp j'ai besoin d'aide
0

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

Posez votre question
Mongeau18 Messages postés 198 Date d'inscription mardi 7 août 2012 Statut Membre Dernière intervention 9 mars 2013 44
9 sept. 2012 à 03:17
Quelqun aider moi
0
mandolorien Messages postés 109 Date d'inscription dimanche 9 septembre 2012 Statut Membre Dernière intervention 9 mars 2018 3
9 sept. 2012 à 11:04
As tu essayé le margin-left:30%; ???

<aside style="margin-left:30%;">
0
Mongeau18 Messages postés 198 Date d'inscription mardi 7 août 2012 Statut Membre Dernière intervention 9 mars 2013 44
9 sept. 2012 à 16:36
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
0
mandolorien Messages postés 109 Date d'inscription dimanche 9 septembre 2012 Statut Membre Dernière intervention 9 mars 2018 3
9 sept. 2012 à 19:58
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 ;)
0
Mongeau18 Messages postés 198 Date d'inscription mardi 7 août 2012 Statut Membre Dernière intervention 9 mars 2013 44
9 sept. 2012 à 22:40
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 !
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
30 déc. 2015 à 14:36
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
0
float: right;
0