CSS / 3 colonnes / en-tête / pied de page
pas de javascript, pas de tableau, pas d'image
Cette page utilise des feuilles de style en cascade. Si vous arrivez à lire ce message, c'est que CSS n'est pas activé dans les options de votre navigateur.
Les menus ne seront sans doute pas affichés.
L'affichage de la page sera donc différent de ce qui est prévu.
pas de javascript, pas de tableau, pas d'image
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 , 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".
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 :
border: .2em solid #0A00B0;
border-left: .5em solid #0A00B0; padding: 0 .5em 0 0;
Dans ce contexte width n'est appliqué que par MSIE.
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 :
Lienavec 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>
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;}
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.
Colonne à droite
visites : 491385
à 10:19:53 utc+ le 19/03/2024