Aller au contenu

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

patricklachance

Par patricklachance
dans (X)HTML et CSS

 Partager

Sujets conseillés

patricklachance

patricklachance

Posté
Posté (modifié)

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">
<!--
.top1, .top2, .top3, .top4 {display : block; overflow : hidden; height : 1px;}
.top1 {background : black; margin : 0px 5px; }
.top2 {border-right : black 2px solid; border-left : black 2px solid; margin : 0px 3px;}
.top3 {border-right : black 1px solid; border-left : black 1px solid; margin : 0px 2px;}
.top4 {height : 2px; border-right : black 1px solid; border-left : black 1px solid; margin : 0px 1px;}
.tabbar {display : block; height : 25px; padding : 2px 0 2px 5px; list-style-type : none;}
.tabtop {display:inline; background : transparent;}
.tabbottom {padding: 0px 5px 5px 5px; border-right : black 1px solid; 
            border-bottom : black 1px solid; border-left : black 1px solid;}
.tabcontent {padding: 0px 5px 5px 5px; border-top : black 1px solid; border-right : black 1px solid;
             border-bottom : black 1px solid; border-left : black 1px solid;}
.tabbar li { display : block; float : left; margin: 0 3px 3px 3px;}
-->
</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>

Modifié par Vincent
patricklachance

patricklachance

Posté
  • Auteur
Posté

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...

patricklachance

patricklachance

Posté
  • Auteur
Posté

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">
<!--
.sid1, .sid2, .sid3, .sid4 {float : left; display : block; overflow : hidden;}
.sid1 {margin : 5px 0 0 0 ; width : 1px ; background : black; height : 25px;}
.sid2 {margin : 3px 0 0 0 ; width : 1px ; border-top : black 2px solid ; }
.sid3 {margin : 2px 0 0 0 ; width : 1px ; border-top : black 1px solid ; }
.sid4 {margin : 1px 0 0 0 ; width : 2px ; border-top : black 1px solid ; }
.mid  {border-top : black 1px solid; float : left; display : block; padding : 3px 0 0 0 ; font-size: 16px}
.tabbar li { display : block; float: left; height : 30px; border-bottom : black 1px solid; margin : 0 5px 0 5px}
-->
</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>

Dudu

Dudu

Posté
Posté

Salut 

  <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>
<div style="clear: both"></div>
  </ul>

	 <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>

  <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>
  </ul>

:blink: :blink:

Ton code fait peur à voir :!:

Il n'est pas étonnant que tu butes sur des problèmes d'affichage, souviens-toi de la règle n°1 en CSS: toujours avoir un code propre avant d'attaquer le CSS ;)

Sinon tu n'es pas sorti de l'auberge..

PS: un <div> ne peut pas être dans un <ul>, et encore moins dans un <li>. D'autant qu'une balise vide n'a aucun sens, même si le validateur ne dit rien.

patricklachance

patricklachance

Posté
  • Auteur
Posté (modifié)

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...

Modifié par patricklachance
Dudu

Dudu

Posté
Posté

Je suis résistant: je n'ai fait aucune attaque cardiaque je te rassure ;)

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".
Pourquoi ? parce que ces messieurs du w3c ont dit non. Et pourquoi ils ont dit non ? Parce que si justement, une information contenue dans un élément <li> est obligatoirement inline, alors qu'un <div> est block.

Je sais bien que c'est paradoxal car on peut forcer un <li> à devenir un élément block grâce aux feuilles de style.. Mais en attendant, ce n'est pas conforme, et si ce n'est pas conforme on ne peut attendre des navigateurs respectant les normes qu'ils aient un comportement normal devant ce type de code.

C'est ce que je voulais dire.

Je ne défends pas l'attitude du w3c sur ce coup-là car moi aussi parfois j'aimerais bien mettre un élément de type block dans un <li> dont j'ai forcé l'affichage en block.. mais le fait est que ce n'est pas conforme: donc risque d'affichage dégradé.

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é.

Ça ne dépend pas du point de vue, à mon avis. L'HTML, et par extension l'XHTML, est un langage qui utilise des balises dans le seul but de présenter une information en l'encadrant avec des balises qui informent sur le contenu.

Par exemple: un <li> (obligatoirement enfant de <ul>) nous informe que le contenu est un item de liste.

Par exemple: un <p> nous informe que le contenu est un paragraphe

Par exemple: un <var> nous informe que le contenu est un morceau de code de langage de programmation très concis

etc..

Un <div> informe que le contenu est un élément de type block indeterminé (ça commence déjà mal), alors si en plus le contenu est inexistant.. ça voudrait dire qu'on informe de l'arrivée d'un OVNI sans qu'il y ait d'OVNI.

Bref, c'est vraiment à déconseiller AMHA :wacko:

P.S. À part le tag <nobr> qui n'avait rien à faire dans mon code... c'est du HTML 4.01 valid...
Strict ou Transitional ? En Transitional, ce n'est pas dur d'être valide avec un code non valide. Le but des normes Transitional est de faciliter la transition (comme son nom l'indique) entre l'HTML façon MS/NS des années 90 avec du véritable (X)HTML: à mon humble avis, ça n'a plus guère de raison d'être de nos jours ;)

En espérant ne pas t'avoir trop fait peur à mon tour avec ma prose :)

captain_torche

captain_torche

Posté
Posté

Tiens, Dudu, par rapport à l'imbrication de balises block dans des LI :

Quand on fait un menu avec des sous-menus (par exemple), on est bien obligés d'avoir une structure du type :

<ul>
	<li>Element 1
		<ul>
			<li>Sous-élément 1.1</li>
			<li>Sous-élément 1.2</li>
		</ul>
	</li>
</ul>

C'est sémantiquement correct (et le validateur ne bronche pas), mais quid des risques d'affichage dégradé ?

Dudu

Dudu

Posté
Posté

captain_torche: Aucun risque puisque tout à fait correct.

<ul> et <li> sont inline par définition, donc un <li> peut parfaitement contenir un <ul>.

C'est ce qu'on appelle tout bonnement une liste imbriquée, et on s'ennuierait beaucoup si on ne pouvait pas le faire: c'est à la base de l'HTML ;)

captain_torche

captain_torche

Posté
Posté

Tu me rassures ;)

Mais, il me semble bien qu'un élément ul est de type block par défaut, non ?

Edit : selon openweb, il semble même que l'élément li soit lui-même de type block. Ca semble d'ailleurs logique, au vu de leur affichage : les éléments li sont par défaut situés les uns en-dessous des autres, et il faut forcer leur affichage en 'inline', pour faire une liste horizontale.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...