Tableau 6

Tableau 6

Je reviens sur un code du petit randonneur, qui tente de modifier la présentation de son blog: je ne publie pas le résultat de ce code car les positionnements ne vont pas.

<div id="moncadre" style="text-align: justify;"><span style="font-family: 'times new roman', times; font-size: 12pt; color: #000000;"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/FQdu1KYdtMigP7evRPUK7jxpDow@150x113.jpg" alt="" /><span style="font-family: 'arial black', 'avant garde'; color: #800000;">Présentation du blog</span><br />Exemple d'un cadre créé en utilisant le Css.et divers sources. Modele de page pour présentation de blog sur le site du Petit Randonneur. Continuité du texte pour passer à la ligne.<br /><img style="float: right; padding-left: 5px;" src="http://ekladata.com/XA-nUBPzInLzmrr1K9t1TP902nk@80x23.png" alt="" /><span style="color: #333333;"><em><span style="font-family: 'andale mono', times; font-size: 10pt;">Mis en ligne le 16/01/2017 à 12:23</span></em></span><br /> </span>
<div id="moncadre1"><span style="font-family: 'times new roman', times; font-size: 12pt; color: #000000;"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/nT4IL89jhJ7F6UczktmRoDjYioc@150x100.jpg" alt="" />D'après la légende, ce village fortifié du xiiie siècle tirerait son nom de l'époque gallo-romaine. Une légion romaine trouvant résistance face à la population locale aurait eu pour ordre de leur lieutenant «RETRO SINGULI» en arrière un par un. Une autre étymologie puiserait ses racines du latin « Cingulum », enceinte de donjon féodal et de la syllabe « re », réfection, reconstruction pour devenir aujourd'hui Larressingle1.<em><span style="font-family: 'andale mono', times; font-size: 10pt;"><br />Mis en ligne le 19/01/2017 à 10:15</span></em><img style="float: right; padding-left: 5px;" src="http://ekladata.com/XA-nUBPzInLzmrr1K9t1TP902nk@80x23.png" alt="" /></span></div>
</div>
<style type="text/css"></style>

<div id="moncadre" style="text-align: justify;"><span style="font-family: 'times new roman', times; font-size: 12pt; color: #000000;"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/FQdu1KYdtMigP7evRPUK7jxpDow@150x113.jpg" alt="" /><span style="font-family: 'arial black', 'avant garde'; color: #800000;">Présentation du blog</span><br />Exemple d'un cadre créé en utilisant le Css.et divers sources. Modele de page pour présentation de blog sur le site du Petit Randonneur. Continuité du texte pour passer à la ligne.<br /><img style="float: right; padding-left: 5px;" src="http://ekladata.com/XA-nUBPzInLzmrr1K9t1TP902nk@80x23.png" alt="" /><span style="color: #333333;"><em><span style="font-family: 'andale mono', times; font-size: 10pt;">Mis en ligne le 16/01/2017 à 12:23</span></em></span>???<br /> </span>

Un cadre, en div ou en p commence par <div ou <p et doit se terminer par </div> ou </p> pour indiquer au programme où il commence et où il se termine; ici, le </div> de fin est manquant et l'éditeur html (code-source) l'a ajouté à la fin </div> où il ne sert à rien !

<style type="text/css"></style>

On peut simplifier cette ligne en <style><!--

Position:absolute: signifie que l'élément se positionne en fonction du cadre qui le contient (page, zone article), sans tenir compte de ce qui est autour.

Or, dans ce cas, nous voulons que les différents modules se placent les uns à côtés des autres donc, en position relative.

Etant en position absolute, il faut les positionner par rapport au bords haut et gauche, ce qui justifie les lignes top et left.

Plus besoin de préfixe pour box-shadow et pour border-radius

Une remarque qui n'est pas une correction de ce code mais une possibilité de simplification.

Nous remarquons que chaque module a des des éléments communs, surlignés en vert; nous pouvons les regrouper dans une class et ainsi ne pas avoir à le recopier à chaque fois.

En html, nous allons écrire:
<div id="moncadre" class="rand" ...<br> et en CSS, nous allons écrire les attributs communs.
.rand{width:395px; margin:0 auto; padding:10px; background:#f2f2f2; border:1px solid #ddd; border-radius:5px; box-shadow:...;

Ceci étant pour le principe car, dans notre cas, je ne suis pas sûr de la nécessité de ces attributs.