URL: https://linuxfr.org/forums/programmationweb/posts/alignement-css
Title: Alignement CSS
Authors: spongurex
Date: 2004年08月30日T14:05:48+02:00
Tags: 
Score: 0
 Bonjour à tous,
 
 je réalise actuellement un site avec xHTML + CSS.
 
 Je dois afficher plusieurs fois le couple {image + titre}
 Chaque couple doit avoir un lien sur une page.
 (Concrètement, image = logo, titre = nom de l'association)
 
 Pour avoir un code sémantiquement correcte, j'ai fait une liste (< ul> < /ul>)
 de définition (< dl> < /dl>)
 
 Ce qui donne :
 
 £spaces£ £/spaces£< div class="page">
 £spaces£ £/spaces£< div class="listing">
 £spaces£ £/spaces£< h1>Musique :< /h1>
 £spaces£ £/spaces£< ul class="occurence">
 £spaces£ £/spaces£< li>
 £spaces£ £/spaces£< dl>
 £spaces£ £/spaces£< dt>
 £spaces£ £/spaces£< a href="accordeon_diatonique.html">
 £spaces£ £/spaces£< img src="accordeon_diatoniquel.gif" border="0" alt="[Logo : Accordéon diatonique]"/>
 £spaces£ £/spaces£< /a>
 £spaces£ £/spaces£< /dt>
 £spaces£ £/spaces£< dt>
 £spaces£ £/spaces£< a href="accordeon_diatonique.html">Accordéon diatonique< /a>
 £spaces£ £/spaces£< /dt>
 £spaces£ £/spaces£< /dl>
 £spaces£ £/spaces£< /li>
 £spaces£ £/spaces£< li>
 £spaces£ £/spaces£< dl>
 £spaces£ £/spaces£< dt>
 £spaces£ £/spaces£< a href="bodhran.html">
 £spaces£ £/spaces£< img src="bodhranl.gif" border="0" alt="[Logo : Bodhran]"/>
 £spaces£ £/spaces£< /a>
 £spaces£ £/spaces£< /dt>
 £spaces£ £/spaces£< dt>
 £spaces£ £/spaces£< a href="bodhran.html">Bodhran< /a>
 £spaces£ £/spaces£< /dt>
 £spaces£ £/spaces£< /dl>
 £spaces£ £/spaces£< /li>
 £spaces£ £/spaces£< /ul>
 £spaces£ £/spaces£< /div>
 £spaces£ £/spaces£< /div>
 
 
 J'aimerais que le tous soit afficher comme un tableau.
 Le problème étant que la longueur du titre est variable.
 Parfois une ligne suffit, parfois il en faut trois. Cela casse la totalité de la mise en page.
 (cf [http://www.plestinlesgreves.com/capture_mauvais.png(...)](http://www.plestinlesgreves.com/capture_mauvais.png) )
 
 Comment faire pour que l'alignement soit parfait comme ici :
 [http://www.paranoidfish.org/boxes/2003/09/24/(...)](http://www.paranoidfish.org/boxes/2003/09/24/)
 malgré le texte variable ?
 
 Merci.
 
 PS : J'espère que le code passera bien, la visualisation n'est pas terrible
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/forums/programmationweb/posts/alignement-css.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/forums/programmationweb/posts/alignement-css.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>