Une base de test cependant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
body {
width: 500px;
margin: 0 auto;
padding: 50px 0;
}
p {
text-align: justify;
}
#test {
float: left;
width: 140px;
height: 200px;
margin: 10px 15px 5px 5px;
background: burlywood;
}
</style>
</head>
<body>
<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue.
<span id="test"></span>
Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
<p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
</body>
</html>
On obtient quelque chose du genre:
Le problème, c'est que le bloc en encart est placé à l'intérieur du premier paragraphe (c'est un span). Si on lui donne un contenu, notamment de type bloc, ça donne des problèmes de validité (éléments de type bloc à l'intérieur d'un élément p), mais surtout d'accessibilité: l'ordre de lecture sans mise en forme CSS est incohérent.
De fait, ce genre d'encart journalistique s'accorde mal avec la lecture linéaire. En général, on aura intérêt à les placer en introduction d'article, en fin d'article, ou entre deux parties suffisamment distinctes.
Une solution intéressante (à voir si c'est jouable techniquement) serait d'avoir dans le paragraphe voulu un simple «marqueur» (un span avec un identifiant précis), de placer l'encart à un endroit logique (début, fin, entre deux parties), puis... d'utiliser Javascript pour:
- donner un style au marqueur (largeur fixe en pixels, hauteur fixe en EM, flottant à gauche ou à droite);
- récupérer l'emplacement du marqueur;
- positionner l'encart en absolu à l'emplacement du marqueur, en stylant l'encart comme il faut (largeur fixe en pixels et hauteur fixe en EM correspondant à la largeur et à la hauteur du marqueur, overflow: auto pour avoir une barre de défilement si ça dépasse, ou au pire overflow: hidden).
Bref, il s'agit de faire sensiblement la même chose que dans la correction de l'exercice sur l'AJblog, mais avec la nuance suivante: on ne sait pas à l'avance où le marqueur sera placé.
Il y a quelque chose à travailler, là.
