patricklachance

Difficultés à générer des onglets seulement en CSS

patricklachance a répondu à patricklachance - Forum : (X)HTML et CSS

J'espère ne pas t'avoir fait trop peur :-) tout de même. Je ferai attention dans mes prochains messages ;-). Toutefois je dois dire que je suis étonné par l'une de tes affirmations... Pourquoi un <div> ne pourrait-il pas être sous un tag <li> ? Par définition les tags <ol> <ul> et <li> servent à énumérer de l'information. Rien ne force cette information à être "inline". Aussi, le fait qu'une balise vide n'ait aucun sens... ça dépend du point de vu. Du point de vue de l'accessibilité ça n'a pas plus de sens qu'un image sans attribut "alt", je dois l'admettre. Mais il existe plusieurs alternatives. De mon point de vu on appelle ca exploiter un language. En fait, c'est comme lorsqu'on lit une phrase dans un poème. La phrase seule peut ne pas avoir beaucoup de sens, c'est l'ensemble du poème qu'il faut apprécié. P.S. À part le tag <nobr> qui n'avait rien à faire dans mon code... c'est du HTML 4.01 valid...

8 Août 2006
11 réponses

Difficultés à générer des onglets seulement en CSS

patricklachance a répondu à patricklachance - Forum : (X)HTML et CSS

Eureka ! Au lieu d'utiliser des <div> horizontaux afin de produire l'effet de rondeur, j'utilise des <div> verticaux: Petite particularité: - La hauteur du <li> doit être spécifiée. - La hauteur de la classe .sid1 doit être inférieure de 5px. Merci à ceux qui m'ont aidé ! Voilà à quoi ça ressemble: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style type="text/css">  </style> </head> <body> <ul class="tabbar"> <li> <div class="sid1"> </div> <div class="sid2"></div> <div class="sid3"></div> <div class="sid4"></div> <div class="mid"> <a href="#" onclick="java script:alert('This is Tab A');"><nobr>Tab A</nobr></a> </div> <div class="sid4"></div> <div class="sid3"></div> <div class="sid2"></div> <div class="sid1"> </div> </li> <li> <div class="sid1"> </div> <div class="sid2"></div> <div class="sid3"></div> <div class="sid4"></div> <div class="mid"> <a href="#" onclick="java script:alert('This is Tab B');"><nobr>Tab B</nobr></a> </div> <div class="sid4"></div> <div class="sid3"></div> <div class="sid2"></div> <div class="sid1"> </div> </li> </ul> </body> </html>

7 Août 2006
11 réponses

Difficultés à générer des onglets seulement en CSS

patricklachance a répondu à patricklachance - Forum : (X)HTML et CSS

Merci ! Ces sites sont intéressant mais malheureusement pour moi ils utillisent des images. L'aspect configurabilité est importante pour mon projet. L'option d'attribuer n'importequelle couleurs à l'onglet nécessiterait la création d'une multitudes d'images, ce que je veux éviter. J'espère toujours trouver une solution...

4 Août 2006
11 réponses

Difficultés à générer des onglets seulement en CSS

patricklachance a ajouté un sujet dans (X)HTML et CSS

J'essais de créer des onglets avec les tags <ul><li> &<div>. J'utilise la propriété float:left sur mes tags <li> afin d'afficher mes onglets horizontallement. Jusque là tout va bien. Pour avoir des coins ronds sur le haut de mes onglets, j'utilise 4 petits <div> ayant des propriétés border/margin spécifiques. L'effet est excellent et en plus je peux facilement contrôler les couleurs de fond et des bordures. Avec Firefox (mozilla, netscape etc.) ca fonctionne, mais avec IE, l'onglet prends tout l'espace dispopible pour sa largeur (la fenêtre) au lieu de s'adapter au contenu textuel. Je ne comprends pas. Je sais qu'il est possible de corriger la situation en appliquant une largeur fixe mais le contenu de l'onglet peut changer. J'aimerais plutot que la largeur s'ajuste automatiquement. Je sais aussi que l'utilisation d'images pourrait régler cette situation mais je perdrais la souplesse de configuration pour les couleurs. Voici l'exemple: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> <style type="text/css">  </style> </head> <body> <title1>Without round corners</title1> <ul class="tabbar"> <div style="clear: both"></div> <li> <div class="tabcontent"> <a href="#" onclick="java script:alert('This is Tab A');">Tab A</a> </div> </li> <li> <div class="tabcontent"> <a href="#" onclick="java script:alert('This is Tab B');">Tab B</a> </div> </li> <div style="clear: both"></div> </ul> <title1>With round corners</title1> <ul class="tabbar"> <div style="clear: both"></div> <li> <div class="tabtop"> <div class="top1"></div> <div class="top2"></div> <div class="top3"></div> <div class="top4"></div> </div> <div class="tabbottom"> <a href="#" onclick="java script:alert('This is Tab A');">Tab A</a> </div> </li> <li> <div class="tabtop"> <div class="top1"></div> <div class="top2"></div> <div class="top3"></div> <div class="top4"></div> </div> <div class="tabbottom"> <a href="#" onclick="java script:alert('This is Tab B');">Tab B</a> </div> </li> <div style="clear: both"></div> </ul> </body> </html>

4 Août 2006
11 réponses

Connexion

Compteur de contenus

Inscrit(e) le

Dernière visite

Réputation sur la communauté

Information du profil

Difficultés à générer des onglets seulement en CSS

Difficultés à générer des onglets seulement en CSS

Difficultés à générer des onglets seulement en CSS

Difficultés à générer des onglets seulement en CSS

Parcourir

Activité