web-dev-qa-db-fra.com

Débarrassez-vous des espaces entre les travées

J'essaie d'émuler une barre d'onglets avec HTML.

J'aimerais que la largeur de chaque onglet soit définie en fonction de la longueur du texte (c'est-à-dire, pas de largeur fixe) et du retour à la ligne au cas où elle dépasserait la largeur de l'écran.

Je l'ai presque atteint:

<html>
<head>

<style type="text/css">
    #myTabs .tab {
    float: left;
    }

    #myTabs .tab_middle {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_middle.png');
    }

    #myTabs .tab_left {
        margin: 0;
        padding: 0;
        border: none;
        background-image:url('images/tabs/tab_left.png');
    }

    #myTabs .tab_right {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_right.png');
    }

</style>

</head>

<body>

<div id="myTabs">
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab'>
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>

Mais, il y a un espace très ennuyeux entre l'image de l'onglet d'ouverture et celle de fermeture.

Comme vous pouvez le voir, j'ai essayé le rembourrage, l'espacement et la bordure, sans succès.

MODIFIER:
J'ai essayé de remplacer les travées par une petite table (une rangée, trois <td>s), mais c'est la même chose, seul l'espace entre les deux est plus petit.

htmlcsspadding
38
opensas

Débarrassez-vous des nouvelles lignes entre les travées. Exemple:

<div class='tab'>
  <span class='tab_left'>&nbsp;</span><span class='tab_middle'>very very looong</span><span class='tab_right'>&nbsp;</span>
</div>

Les retours à la ligne sont comptés comme un espace en HTML.

50
njbair

En plus --- njbair est une autre façon d'ajouter font-size: 0 à l'élément parent. Je préfère celui-ci car il est esthétiquement meilleur pour la conception d'onglets.

Au lieu de cela:

<div id="tabs">
    <span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>

... nous pouvons utiliser ceci:

<div id="tabs" style="font-size: 0;">
    <span id="mytab1">Tab 1</span>
    <span id="mytab2">Tab 2</span>
    <span id="mytab3">Tab 3</span>
</div>

... qui a l'air mieux :)

Bien sûr, n'oubliez pas de définir votre taille de police réelle pour les onglets.

MODIFIER :
Il existe un autre moyen de se débarrasser des espaces: en ajoutant des commentaires.

Exemple:

<div id="tabs">
    <span id="mytab1">Tab 1</span><!--
    --><span id="mytab2">Tab 2</span><!--
    --><span id="mytab3">Tab 3</span>
</div>
58
Nikola K.

Une autre option consiste à utiliser nagative letter-spacing:-10px - qui a un impact plus léger sur le formatage.

<div id="tabs" style="letter-spacing:-10px;">
    <span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
    <span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
    <span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>

Vous avez cette idée grâce à cette réponse

1
CodeGust

difficile à tester sans les images mais j'ai ajouté la couleur d'arrière-plan et l'affichage: en ligne aux onglets racine. Veuillez essayer ceci:

<html>
<head>

<style type="text/css">
    #myTabs .tab {
        float: left;
        display:inline;
    }

    #myTabs .tab_middle {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_middle.png');
    }

    #myTabs .tab_left {
        margin: 0;
        padding: 0;
        border: none;
        background-image:url('images/tabs/tab_left.png');
    }

    #myTabs .tab_right {
        margin: 0;
        padding: 0;
        border: none;
    background-image:url('images/tabs/tab_right.png');
    }

</style>

</head>

<body>

<div id="myTabs">
  <div class='tab' style="background-color:Red;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>very very looong</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
  <div class='tab' style="background-color:Green;">
        <span class='tab_left'>&nbsp;</span>
        <span class='tab_middle'>another loooong tab</span>
        <span class='tab_right'>&nbsp;</span>
    </div>
    <div style='clear:both'></div>
</div>

</body>
</html>
0
Cheddar

Les onglets du milieu, à gauche et à droite doivent également flotter à gauche.

0
BigChrisDiD

la réponse de njbair est correcte.

Une autre option était d'utiliser une table, avec le border-collapse: collapse; propriété.

Autre problème: dans Internet Explorer 6.0, la première approche (étendues) ne fonctionne pas comme prévu. Lors du redimensionnement de la fenêtre, IE wordwraps l'envergure, brisant l'onglet, tandis qu'avec l'approche de table même IE envoie vers le bas l'onglet entier).

0
opensas