CSS comment fait-on des tabs ?

Le
Une Bévue
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 :

|--|
| |
|--|--|
| |
| |
| |
|--|
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
yamo'
Le #26378198
Une Bévue a écrit le 15/11/2015 06:33 :
Je viens d'essayer RiotJS à partir de cet article :

et j'aimerais connaitre l'astuce css pour parvenir aux tabs :

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 :

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





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
Une Bévue
Le #26378273
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 ?
Pierre Maurette
Le #26378330
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
Une Bévue
Le #26378377
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...
Publicité
Poster une réponse
Anonyme