CSS comment fait-on des tabs ?

Une Bévue a écrit le 15/11/2015 06:33 :

Je viens d'essayer RiotJS à partir de cet article :
<http://robertwpearce.com/blog/riotjs-example/>

et j'aimerais connaitre l'astuce css pour parvenir aux tabs :
<http://www.cjoint.com/doc/15_11/EKpfy6HOl6X_15-11-15-06-23-54-riot-tabs-on-mbp.png>

Ma difficulté est que je ne vois pas comment supprimer le border sous
l'onglet tout en gardant le border de la div.
J'imagine un truc du genre : border blanc (comme le fond) + décalage
idoine ?

Autrement dit obtenir :


|--------|
| |
| |-----------------|
| |
| |
| |
|--------------------------|

Au lieu de :

|--------|
| |
|--------|-----------------|
| |
| |
| |
|--------------------------|

<http://robertwpearce.com/riotjs-examples/build/app.css>

firebug dit :
.tab.is-active {
border-bottom: medium none;
}


Après je n'ai pas testé, si c'était suffisant ; j'ai juste regardé le code.

--
Stéphane

Le 15/11/2015 18:46, yamo' a écrit :

firebug dit :
.tab.is-active {
border-bottom: medium none;
}


Après je n'ai pas testé, si c'était suffisant ; j'ai juste regardé le code.

OK, merci, dans le css de la page en question, il y a juste :
border-bottom: none;

je suppose que c'est firebug qui ajoute le "medium" (épaisseur du trait).

ce que je comprends :

|------------------|
| .tab |
|------------------|

|------------------|
| .tab.is-active |
| |

ça, c'est facile à comprendre (au départ je n'avais pas mis de
"border-bottom: none;" à ".tab.is-active".

mais en dessous du tab il y a "<div class="tabContent"></div>" les tabs
étant produits par "<ul><li /></ul>".

la "<div class="tabContent"></div>" est avec un border tout autour ("
border: 1px solid;")

donc ça signifie que, en quelque sorte, mettre à "none" le border-bottom
du tab suffit à supprimer la "partie tab" du border-top de la "<div
class="tabContent"></div>".

parce que les margins sont à 0 j'imagine ?

Une Bévue :

Le 15/11/2015 18:46, yamo' a écrit :

firebug dit :
.tab.is-active {
border-bottom: medium none;
}


Après je n'ai pas testé, si c'était suffisant ; j'ai juste regardé le code.

OK, merci, dans le css de la page en question, il y a juste :
border-bottom: none;

je suppose que c'est firebug qui ajoute le "medium" (épaisseur du trait).

ce que je comprends :

|------------------|
| .tab |
|------------------|

|------------------|
| .tab.is-active |
| |

ça, c'est facile à comprendre (au départ je n'avais pas mis de
"border-bottom: none;" à ".tab.is-active".

mais en dessous du tab il y a "<div class="tabContent"></div>" les tabs étant
produits par "<ul><li /></ul>".

la "<div class="tabContent"></div>" est avec un border tout autour ("
border: 1px solid;")

donc ça signifie que, en quelque sorte, mettre à "none" le border-bottom du
tab suffit à supprimer la "partie tab" du border-top de la "<div
class="tabContent"></div>".

parce que les margins sont à 0 j'imagine ?

Il doit y avoir sur les .tab un margin-bottom à -1px (enfin, de la
valeur de la border).

--
Pierre Maurette

Le 16/11/2015 12:43, Pierre Maurette a écrit :

Il doit y avoir sur les .tab un margin-bottom à -1px (enfin, de la
valeur de la border).

ouais, merci, j'avais aussi suspecté une astuce de ce genre...