CSS les bordures

Bordures décalage et différences d'affichage

Firefox et Internet Explorer

Il y a d'une part les autres navigateurs, et d'autre part Internet Explorer.
IE est situé volontairement en deuxième position dans ma phrase puisque pour le coup, IE est - à proprement parler - une classe à part... si toutefois classe il y a... mais bon... Avançons un peu, allons allons...

Internet Explorer interpretera par exemple, une "boîte" large de 200 px (zone de contenu), avec des marges intérieures de 20px (padding) et une bordure (border) de 5px vous obtenez une boîte d'une largeur totale de 200px. C'est un modèle de boîte ancien et spécifique à Microsoft.

Pour les autres navigateurs la largeur totale est de 250px (200+20+20+5+5). Les paddings et les borders, s'ajoutent normalement à la zone de contenu de 200px.


Créer une bordure entre les éléments d'une liste

Challenge : ne pas mettre de bordure ni pour le premier ni pour le dernier élément.
Nous aurions tout à fait pu attribuer une classe spécifique au premier / dernier élément en jouant sur border-top ou sur border-bottom. De cette façon, les bordures aux extrémités auraient également été masquées. Voir ci-contre.



Masquer une bordure

Mais comme on s'ennuie quand tout va bien, on complique les données en attribuant la même class à tous les <li> et on utilise la pseudo classe first-child.
Donc, il faudra simplement imposer une marge négative à la class de <li> et indiquer une bordure à zero pour l'élément first-child.Quelle famille j'vous jure...

HTML :
   <div class="test">
<ul class="borderul">
<li class="borderli"><a href="link" title="">description1</a></li>
<li class="borderli"><a href="link" title="">description2</a></li>
<li class="borderli"><a href="link" title="">description3</a></li>
<li class="borderli"><a href="link" title="">description4</a></li>
</ul>
</div>



CSS :
   .test{
width: 15%;
height: auto;
}

.borderul{
list-style-type: none;
}

.borderli{
border-top: 1px solid #FF0000;
margin: -1px 0 0 0;
text-align: center;
line-height: 25px;
font-size: 80%;
}

/*correspond au premier élément*/
.borderli:first-child{
border: 0;
}

Ainsi, la marge supérieure des éléments de liste étant à -1px, ça tombe bien puisque c'est justement la taille de notre bordure haute. La marge suffira donc à masquer la bordure au lieu de la supprimer. Eh toc !
NDR : ils ne jettent rien...


© latarteauchips 2017
Volet automatique | Les amis des loisirs : Sorties spectacles paris| Chalet Vosges | Bioénergétique | Visites Paris |
artisan web
achat cash de votre mobile et recyclage telephone
Revendez vos mobiles chez Mister Reprise
Astuces & trucs
Css
Divertissement
Html
Javascript
Linux
Outils
Php
Scripts
Sécurité failles
setia industrie logo
Setia Industries
Valid XHTML 1.0 Strict