Page 1 sur 2

A partir d'un fichier XML contenant une base de données, j'ai du créer une page HTML, dont voici un extrait de code :

Code: Tout sélectionner: <html encoding='utf-8'> <head> <title>Base prosopographique relative au corpus de la Maison de Béthune.</title> <style type='text/css'> .global {width:750px; margin-left:auto; margin-right:auto;} .perso {width:600px; margin-left:auto; margin-right:auto; font-family:arial; font-size:90%; margin-top:10px; margin-bottom:10px; margin-left:100px; border-style:solid; border-width:1px; border-color:#808080;} #acte {font-family:arial; font-size:90%; color:#808080; margin-left:3px; margin-right:3px;} </style> </head> <body> <div class='global'> <div class='perso'><a name='1'/>abbas Molomensis (1100-1105)<span id='acte'>26</span></div> <div class='perso'><a name='2'/>abbé d'Anchin ( 1243/04)<span id='acte'>423</span><span id='acte'>424</span></div> <div class='perso'><a name='3'/>abbé d'Annezin (1151-1157)<span id='acte'>81</span></div> <div class='perso'><a name='4'/>Abbé d'Eekout, doyen et chantre de Saint-Donat à Bruges ( 1231/05)<span id='acte'>369</span></div> <div class='perso'><a name='5'/>Abbé de Aiguecourt (1151-1157)<span id='acte'>81</span></div> <div class='perso'><a name='6'/>abbé de Bergues (1190)<span id='acte'>123</span></div> <div class='perso'><a name='7'/>abbé de Charroux (1200-1300)<span id='acte'>497</span></div> <div class='perso'><a name='8'/>abbé de Corbie (1212)<span id='acte'>196</span></div> <div class='perso'><a name='9'/>Abbé de Ham-en-Artois (1151-1157)<span id='acte'>81</span></div> <div class='perso'><a name='1731'/>Béthune (de) Robert VI, avoué d'Arras, seigneur de Béthune (1166-1192)<span id='acte'>94</span><span id='acte'>98</span><span id='acte'>101</span><span id='acte'>102</span><span id='acte'>108</span><span id='acte'>109</span><span id='acte'>115</span><span id='acte'>116</span><span id='acte'>121</span><span id='acte'>127</span><span id='acte'>128</span><span id='acte'>129</span><span id='acte'>131</span><span id='acte'>133</span><span id='acte'>134</span><span id='acte'>136</span><span id='acte'>137</span><span id='acte'>138</span><span id='acte'>139</span><span id='acte'>140</span><span id='acte'>142</span><span id='acte'>143</span><span id='acte'>145</span><span id='acte'>147</span><span id='acte'>149</span><span id='acte'>150</span><span id='acte'>152</span><span id='acte'>158</span><span id='acte'>161</span><span id='acte'>181</span><span id='acte'>211</span><span id='acte'>231</span><span id='acte'>324</span></div> </div> </body> </html>

Je sais que l'on aurait pu simplifier le code, mais ce n'est pas moi qui décide. C'est cette forme qui a été choisie. Mon gros souci est que malgré de nombreux essais je ne capte rien au positionnement des blocs. Comme vous pourrez le constater si vous recopiez ce code dans votre navigateur, les blocs "acte" dépassent le cadre du bloc "perso". Quand on dote l'élément "acte" des propriétés "display:block" et "position:relative", le probléme est à moitié résolu, car ils se positionnent alors de manière verticale.
Je voudrais juste que ces blocs restent à l'intérieur de mon cadre "perso" et qu'ils aillent à la ligne si besoin. HELP !!!
Merci d'avance...

Le problème vient des <span> manifestement.
ou plutôt que le code produit par l'application de transformation xml/htm-css est pas terrible (dans le sens, difficile à utiliser)
les "span" forment-ils des boîtes ??
C'est peut-être pour ça que ça foire
Moi je ferais comme ça, mais ça ne correspond peut-être pas à ce que tu veux et ça risque de te prendre du temps si tu as mille pages à faire..

Code: Tout sélectionner: <html encoding='utf-8'> <head> <title>Base prosopographique relative au corpus de la Maison de Béthune.</title> <style type='text/css'> .global {width:750px; margin-left:auto; margin-right:auto;} .perso { width:400px; margin-left:auto; margin-right:auto; font-family:arial; font-size:90%; margin-top:10px; margin-bottom:10px; margin-left:100px; border-style:solid; border-width:1px; border-color:#808080;} .acte { font-family:arial; font-size:90%; color:#808080; margin-left:3px; margin-right:3px;} </style> </head> <body> <div class='global'> <div class='perso'><a name='1'/>abbas Molomensis (1100-1105)<p class='acte'>26</p></div> <div class='perso'><a name='2'/>abbé d'Anchin ( 1243/04)<p class='acte'>42, 34, 24</p></div> <div class='perso'><a name='3'/>abbé d'Annezin (1151-1157)81</div> <div class='perso'><a name='4'/>Abbé d'Eekout, doyen et chantre de Saint-Donat à Bruges ( 1231/05) <p class='acte'>369</p></div> <div class='perso'><a name='5'/>Abbé de Aiguecourt (1151-1157)<p class='acte'>81</p></div> <div class='perso'><a name='6'/>abbé de Bergues (1190)<p class='acte'>123</p></div> <div class='perso'><a name='7'/>abbé de Charroux (1200-1300)<p class='acte'>497</p></div> <div class='perso'><a name='8'/>abbé de Corbie (1212)<p class='acte'>196</p></div> <div class='perso'><a name='9'/>Abbé de Ham-en-Artois (1151-1157)<p class='acte'>81</p></div> <div class='perso'><a name='1731'/>Béthune (de) Robert VI, avoué d'Arras, seigneur de Béthune (1166-1192) <p class='acte'>94, 98, 101, 102, 108, 109, 115, 116, 121, 127, 128, 129, 131, 133, 134, 136, 137, 138, 139, 140, 142, 143, 145, 147, 149, 150, 152, 158, 161, 181, 211, 231, 324</p> </div> </div> </body> </html>

ha non finalement je ferais ça (parce que les span n'ont de sens qu'au sein d'un paragraphe .. enfin.. je suppose..

Code: Tout sélectionner: <html encoding='utf-8'> <head> <title>Base prosopographique relative au corpus de la Maison de Béthune.</title> <style type='text/css'> .global {width:750px; margin-left:auto; margin-right:auto;} .perso { width:400px; margin-left:auto; margin-right:auto; font-family:arial; font-size:90%; margin-top:10px; margin-bottom:10px; margin-left:100px; border-style:solid; border-width:1px; border-color:#808080;} .acte { font-family:arial; font-size:90%; color:#808080; margin-left:3px; margin-right:3px;} </style> </head> <body> <div class='global'> <div class='perso'><a name='1'/><p>abbas Molomensis (1100-1105)<span class='acte'>26</span></p></div> <div class='perso'><a name='2'/><p>abbé d'Anchin ( 1243/04)<span class='acte'>42, 34, 24</span></p></div> <div class='perso'><a name='3'/><p>abbé d'Annezin (1151-1157)<span class='acte'>81</span></div> <div class='perso'><a name='4'/><p>Abbé d'Eekout, doyen et chantre de Saint-Donat à Bruges ( 1231/05) <span class='acte'>369</span></p></div> <div class='perso'><a name='5'/><p>Abbé de Aiguecourt (1151-1157)<span class='acte'>81</span></p></div> <div class='perso'><a name='6'/><p>abbé de Bergues (1190)<span class='acte'>123</span></p></div> <div class='perso'><a name='7'/><p>abbé de Charroux (1200-1300)<span class='acte'>497</span></p></div> <div class='perso'><a name='8'/><p>abbé de Corbie (1212)<span class='acte'>196</span></p></div> <div class='perso'><a name='9'/><p>Abbé de Ham-en-Artois (1151-1157)<span class='acte'>81</span></p></div> <div class='perso'><a name='1731'/><p>Béthune (de) Robert VI, avoué d'Arras, seigneur de Béthune (1166-1192) <span class='acte'>94, 98, 101, 102, 108, 109, 115, 116, 121, 127, 128, 129, 131, 133, 134, 136, 137, 138, 139, 140, 142, 143, 145, 147, 149, 150, 152, 158, 161, 181, 211, 231, 324</span></p> </div> </div> </body> </html>

Deux choses :
- mettre les styles dans la page HTML est contre productif. Si tu veux changer le style, il faudra revoir toutes tes pages. Mieux vaux le mettre dans un fichier CSS distinct.
- pour apprendre le positionneemnt CS, rien ne vaut les tutos de SDZ : http://www.siteduzero.com/tuto-3-44-1-m ... e-2-2.html.

Je vais jeter un coup d'oeil à ton code.

//EDIT : a première vue avec un display:block tu auras un alignement vertical, c'est déjà mieux.

//EDIT2 : Par contre au vu du code HTML vraiment mal formé (balise a lachée seul, texte non inclus dans un <p>), tu vas avoir des porblèmes de positionnement CSS a coup sûr.

//EDIT3 : je vois que la balise <a> n'est pas destinée à s'afficher. Peut elle entourer le nom de la personne ou ne peut on pas du tout modifier le HTML ?

isatis39871 je crois que kaneda ne demandait pas une leçon de css
mais une manière de modifier son code simplement à partir du code assez moyen qu'a produit l'application de transformation xml/css
(sinon, on pourrait dire aussi que stricto sensu, les id et les class sont inversées, du moins dans leur usage habituel, qu'un succession de span n'a aucun sens etc..)
tu ne répond pas à la question qu'il a posée en tous cas (qui à mon sens renvoie à la nature de la balise span)

quand à la balise <a/> isolée, elle est tout à fait valable (dans le cas d'une ancre par exemple)

Okay, au temps pour moi.

J'ai beau triturer ce code dans tous les sens, je ne reouve pas mieux que displa:block et un peu de décoration pour faire un tableau vertical avec les #acte×

Merci pour vos réponses. Effectivement je cherche simplement une solution ultra-simple, parce que je n'ai pas le fichier sous la main. Ce n'est pas moi qui l'ai généré, donc pas trop moyen de le retoucher hormis au niveau de la feuille de style et j'espérais que cela suffirait. En fait, il y a plus de 3000 personnages dans ce fichier. Cela va donc être assez costaud.
La balise A est isolée car c'est simplement une ancre. Concernant la feuille de style, je l'intégre toujours dans le fichier quand je n'en ai qu'un seul. Ca m'évite d'avoir à jongler avec trop de fichiers.
Le display:block est malheureusement impossible car au niveau affichage cela ne correspond à rien. Il me faudrait en fait un alignement de type justifié. Je crois que je vais leur demander de mettre tout ça dans un DIV, plutôt que d'utiliser des SPAN à foison.
Avec une feuille de style XSLT, cela aurait été plus simple, à condition de pouvoir récupérer le code HTML aprés. Simple curiosté : quelle application utilisez-vous pour passer du XML à un autre format ?
Ce que je ne comprends pas et pourtant j'essaye... c'est cette théorie des blocs. En toute logique, les SPAN se trouvant dans un bloc DIV ne devraient pas en sortir et pourtant si. Si quelqu'un peut m'expliquer clairement cela, je lui en serais éternellement reconnaissant. :wink:

mais heu
que penses-tu de ma solution ?

Code: Tout sélectionner: <html encoding='utf-8'> <head> <title>Base prosopographique relative au corpus de la Maison de Béthune.</title> <style type='text/css'> .global {width:750px; margin-left:auto; margin-right:auto;} .perso { width:400px; margin-left:auto; margin-right:auto; font-family:arial; font-size:90%; margin-top:10px; margin-bottom:10px; margin-left:100px; border-style:solid; border-width:1px; border-color:#808080;} .acte { font-family:arial; font-size:90%; color:#808080; margin-left:3px; margin-right:3px;} </style> </head> <body> <div class='global'> <div class='perso'><a name='1'/><p>abbas Molomensis (1100-1105)<span class='acte'>26</span></p></div> <div class='perso'><a name='2'/><p>abbé d'Anchin ( 1243/04)<span class='acte'>42, 34, 24</span></p></div> <div class='perso'><a name='3'/><p>abbé d'Annezin (1151-1157)<span class='acte'>81</span></div> <div class='perso'><a name='4'/><p>Abbé d'Eekout, doyen et chantre de Saint-Donat à Bruges ( 1231/05) <span class='acte'>369</span></p></div> <div class='perso'><a name='5'/><p>Abbé de Aiguecourt (1151-1157)<span class='acte'>81</span></p></div> <div class='perso'><a name='6'/><p>abbé de Bergues (1190)<span class='acte'>123</span></p></div> <div class='perso'><a name='7'/><p>abbé de Charroux (1200-1300)<span class='acte'>497</span></p></div> <div class='perso'><a name='8'/><p>abbé de Corbie (1212)<span class='acte'>196</span></p></div> <div class='perso'><a name='9'/><p>Abbé de Ham-en-Artois (1151-1157)<span class='acte'>81</span></p></div> <div class='perso'><a name='1731'/><p>Béthune (de) Robert VI, avoué d'Arras, seigneur de Béthune (1166-1192) <span class='acte'>94, 98, 101, 102, 108, 109, 115, 116, 121, 127, 128, 129, 131, 133, 134, 136, 137, 138, 139, 140, 142, 143, 145, 147, 149, 150, 152, 158, 161, 181, 211, 231, 324</span></p> </div> </div> </body> </html>

là, en faisant deux trois remplacements bien sentis (qu'on peut automatiser)
ça le fait non ?

sinon c'est quoi ton appli xml ?
est-ce que tu, as accès au code de la transformation ?

pour la balise span voici la réponse
c'est bien ce que je pensais, la balise span est considérée au même titre que la div comme un bloc de structure
mais un bloc à la valeur : inline
d'où le fait que si tu places des spans les unes après les autres, ça ne fonctionne absolument pas comme du texte.

http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

voilà voilà
donc ma solution semble la plus correcte
intégrer les span là où elles doivent être, dans un paragraphe
et n'en faire qu'une seule là où ton code en fait se succéder une quarantaine

Salut,

Est-ce que ceci irait mieux ?

Code: Tout sélectionner: <html encoding='utf-8'> <head> <title>Base prosopographique relative au corpus de la Maison de Béthune.</title> <style type='text/css'> .global {width:750px; margin-left:auto; margin-right:auto;} .perso {width:600px; margin-left:auto; margin-right:auto; font-family:arial; font-size:90%; margin-top:10px; margin-bottom:10px; margin-left:100px; border-style:solid; border-width:1px; border-color:#808080; } #acte {font-family:arial; font-size:90%; color:#808080; margin-left:3px; margin-right:3px; display: inline; } .nom { margin-left:3px; margin-right:3px; display: inline; } </style> </head> <body> <div class='global'> <div class='perso'><div class=nom name='1'>abbas Molomensis (1100-1105)</div><div id='acte'>26</div></div> <div class='perso'><div class=nom name='2'>abbé d'Anchin ( 1243/04)</div><div id='acte'>423</div><div id='acte'>424</div></div> <div class='perso'><div class=nom name='3'>abbé d'Annezin (1151-1157)</div><div id='acte'>81</div></div> <div class='perso'><div class=nom name='4'>Abbé d'Eekout, doyen et chantre de Saint-Donat à Bruges ( 1231/05)</div><div id='acte'>369</div></div> <div class='perso'><div class=nom name='5'>Abbé de Aiguecourt (1151-1157)</div><div id='acte'>81</div></div> <div class='perso'><div class=nom name='6'>abbé de Bergues (1190)</div><div id='acte'>123</div></div> <div class='perso'><div class=nom name='7'>abbé de Charroux (1200-1300)</div><div id='acte'>497</div></div> <div class='perso'><div class=nom name='8'>abbé de Corbie (1212)</div><div id='acte'>196</div></div> <div class='perso'><div class=nom name='9'>Abbé de Ham-en-Artois (1151-1157)</div><div id='acte'>81</div></div> <div class='perso'><div class=nom name='1731'>Béthune (de) Robert VI, avoué d'Arras, seigneur de Béthune (1166-1192)</div><div id='acte'>94, 98, 101, 102, 108, 109, 115, 116, 121, 127, 128, 129, 131, 133, 134, 136, 137, 138, 139, 140, 142, 143, 145, 147, 149, 150, 152, 158, 161, 181, 211, 231, 324</div></div> </div> </body> </html>

Merci pour tout. Je vais condenser tout ça et ça devrait fonctionner sûrement mieux.
En fait, dana, pour répondre à ta question, je code en XML à destination du web donc l'application reste à chaque fois le navigateur (Firefox bien sûr !).

Page 1 sur 21, 2 SuivantCSS : problème de positionnement de blocs

Qui est en ligne ?

Se connecter

Page 1 sur 21, 2 SuivantCSS : problème de positionnement de blocs

Qui est en ligne ?