Forum Programmation.web Alignement CSS

Posté par  .
Étiquettes : aucune
0
30
août
2004
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 :





    < div class="page">


      < div class="listing">


        < h1>Musique :< /h1>


        < ul class="occurence">


          < li>


              < dl>


                < dt>


                  < a href="accordeon_diatonique.html">


                    < img src="accordeon_diatoniquel.gif" border="0" alt="[Logo : Accordéon diatonique]"/>


                  < /a>


                < /dt>


                < dt>


                  < a href="accordeon_diatonique.html">Accordéon diatonique< /a>


                < /dt>


              < /dl>


          < /li>


          < li>


              < dl>


                < dt>


                  < a href="bodhran.html">


                    < img src="bodhranl.gif" border="0" alt="[Logo : Bodhran]"/>


                  < /a>


                < /dt>


                < dt>


                  < a href="bodhran.html">Bodhran< /a>


                < /dt>


              < /dl>


          < /li>


        < /ul>


      < /div>


    < /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(...) )





Comment faire pour que l'alignement soit parfait comme ici :


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

  • # une idée

    Posté par  . Évalué à 3.

    peut-être en fixant la hauteur de tes cases :

    dt{
    min-height: 6em;
    height:6em;
    }

    • [^] # Re: une [très bonne] idée

      Posté par  . Évalué à 2. 

      C'est effectivement une très bonne idée comme tu peux le voir sur la nouvelle capture :
http://www.plestinlesgreves.com/capture_mieux.png(...)

Merci beaucoup.

Il reste néanmoins un dernier petit soucis dans la zone où le titre est affiché
(colorié en saumon pour mieux la voir).

Je n'arrive pas à centrer verticalement le texte. J'ai utilisé la propriété :
vertical-align: middle;  mais rien n'y fait.

Code source html :
< li>
  < dl>
    < dt>
      < a href="accordeon_diatonique.html">Accordéon diatonique< /a>
    < /dt>
    < dd>
      < a href="accordeon_diatonique.html">
        < img src="accordeon_diatoniquel.gif" border="0" alt="[Logo : Accordéon diatonique]"/>
      < /a>
    < /dd>
  < /dl>
< /li>

Merci encore.

      • [^] # Re: une [très bonne] idée

        Posté par  . Évalué à 2.

        Content d'avoir pu t'aider ;) Pour ton dernier souci, je pense que la hauteur de l'élément A n'est pas spécifiée elle non plus (dépendante du nombres de lignes de texte que l'élément contient).

        Si c'est le cas, même genre de solution donc :

        dt A{
        display:block; /* pour qu'il prenne en compte une taille fixée */
        height:2.5em;
        min-height:2.5em;
        vertical-align:top;
        }

  • # les tableaux spa si mal finalement

    Posté par  . Évalué à 4.

    on dit généralement que les tableaux c'est super ultra méga pabien ©, mais faut relativiser les choses...

    c'est tres mal pour faire la présentation d'un site, style alignement des images, tableau pour un menu, etc.

    mais je pense que dans ton cas, un tableau t'aiderais grandement, sans pour autant te casser la tete, ou rendre ton code pourrir...

    les tableaux, c'est a utiliser avec modération, certes, mais ya des usages ou un tableau est bien plus rapide que le reste ;)

    vala :)

    • [^] # Re: les tableaux spa si mal finalement

      Posté par  . Évalué à 2.

      les tableaux, c'est a utiliser avec modération, certes, mais ya des usages ou un tableau est bien plus rapide que le reste ;)

      Je ne suis pas d'accord avec toi pour plusieurs raisons :

      1/ Son balisage est accessible tel quel. Rechercher le même niveau d'accessibilité avec des tableaux revient à cradifier le code de tout un tas de balises que la plupart des gens ignorent (pour plus d'infos, voir http://www.w3.org/TR/WAI-WEBCONTENT/#gl-abbreviated-and-foreign(...) )

      2/ Il a fait l'effort de ne pas les utiliser dans un contexte ou effectivement, la présentation en lignes/colonnes n'est qu'un plus esthétique et n'apporte en rien une information utile. C'est donc un excellent choix du point de vue qualitatif (même si, effectivement, ce n'est pas le plus facile). Et ce n'est pas très gentil de ta part de dénigrer ces beaux efforts, il faudrait plutot l'encourager...

      3/ Les tableaux utilisés dans ce contexte rendraient imbouffable la navigation sur les périphériques portables et les PDA, à moins de créer une version spécifique du marquage pour ces agents utilisateurs (= boulot en double, pas bien).

      on dit généralement que les tableaux c'est super ultra méga pabien ©

      Je te l'accorde, y'a en ce moment beaucoup de gens qui répètent ca parcequ'ils l'ont vu sur les weblogs sans trop avoir compris pourquoi... Mais il suffit de surfer ne serait-ce qu'une seule fois sur un site en tableaux avec un PDA pour comprendre que c'est pas du rabâchage.

  • # Commentaire supprimé

    Posté par  . Évalué à 1.

    Ce commentaire a été supprimé par l’équipe de modération.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.