CSS / 3 colonnes / en-tête / pied de page

pas de javascript, pas de tableau, pas d'image

Appliquer un style à une balise <span>.

Les menus de cette page utilisent une balise <span> vide à laquelle un style a été appliqué. On aurait pu utiliser une autre balise.
La compatibilité avec plusieurs navigateurs est comme toujours difficile à réaliser. Hors d'un lien hypertexte, Konqueror, Safari, IE Mac ou Opera jusqu'à la version 7.23 ne donnent pas un résultat satisfaisant.
HTML tidy affiche un avertissement comme pour toute balise sans contenu. On peut insérer &nbsp;, mais MSIE pose alors problème.
Une fois le DOCTYPE choisi, les margins et paddings fixés, Mozilla et Opera donnent sensiblement le même résultat à l'écran.
Il faudra donc pour MSIE quelques filtres ou "hacks".

Le style de base

Nous allons utiliser un style commun :

#maincol .content span{background-color: #D2E1FB;padding: 0 .5em;}

et le rendre compatible avec MSIE :

* html #maincol .content span{display: block;position: absolute;}

Dans ce contexte, la balise n'a pas de hauteur, il faut donc fixer la hauteur du conteneur pour MSIE.

div.entoure{height: 1.5em;}

Le résultat :

 
avec margin:0 .5em;
 

Egalement utile

border: .2em solid #0A00B0;

 

border-left: .5em solid #0A00B0; padding: 0 .5em 0 0;

 

Les styles incompatibles

Dans ce contexte width n'est appliqué que par MSIE.

Un <span> vide dans un lien

Comme dans les menus, <span> est bien plus utile une fois placé dans un lien hypertexte.

<a href="#"><span></span> Lien<span></span></a>

Appliqué tel quel à droite et à gauche :

Lien

avec MSIE dans ce contexte, il y a un problème de marge :

Lien

<a style="padding-left: 1em;" href="#"><span style="margin-left: -1em;"></span> Lien<span></span></a>

Arriver au style du menu de droite

Le code n'est pas compatible avec MSIE 5

Notre code HTML :

<div class="menu_droite">
<a href="#">
<span class="gauche"></span>
Lien
<span class="droite"></span>
</a>
</div>

La valeur affectée globalement à <span> doit être réinitialisée pour notre menu

#maincol .menu_droite span{padding: 0;}

On s'occupe du style pour le lien contenant nos deux balises

div.menu_droite a{
position: relative;
text-align: center;
text-decoration: none;
background-color: #D2E1FB;
color: #0A00B0;
font-family: "courier new", "sans serif";
display: block;
width: 9em;
height: 1em;
font-size: .9em;
padding: 5px;
border-bottom: 1px solid #0A00B0;
}

Puis du style commun à pour le lien contenant nos deux balises

div.menu_droite a span.gauche, div.menu_droite a span.droite{
position: absolute;
top: 0;
width: 0;
height: 0;
overflow: hidden;
border-top: 10px solid #E9F5FE;
}

A gauche

div.menu_droite a span.droite{left: 9em;border-left: 10px solid #D2E1FB;}

Puis à droite

div.menu_droite a span.gauche{left: 0;border-right: 10px solid #D2E1FB;}

MSIE 5.5

Comme d'habitude MSIE 5.5 a besoin de filtres pour la largeur (hacks pour width) :

/* caché pour IE_Mac début\*/
* html div.menu_droite a{
width:9.9em;/*valeur pour MSIE 5.x*/
}
* html div.menu_droite a/**/{
width:/**/9em;/*valeur pour MSIE 6*/
}
* html div.menu_droite a span.gauche, div.menu_droite a span.droite{
width:1em;/*valeur pour MSIE 5.x*/
}
* html div.menu_droite a span.gauche, div.menu_droite a span.droite/**/{
width:/**/0;/*valeur pour MSIE 6*/
}
/* fin - IE_Mac reprend sa lecture*/


Les pages suivantes traiteront des autres méthodes pour affecter un style et pour animer le lien.

visites : 367546
à 12:27:19 utc+2 le 24/06/2017