HTML - Boîte Information (1)

 Boîte Information 
 Boîte Information 

Utilisation du CSS pour faire afficher une note d'information en survolant une image "FLASH" en haut à gauche de l'écran.



CSS - Les règles de style.


Copier le CSS ci-dessous et le coller en fin du fichier de la feuille de style dans l'espace de gestion  >>>  Votre Blog  >>>  Modèle graphique, en dessous des vignettes  "Modifier le fichier CSS (feuille de style).

/* =================================================
************ Boîtes d'informations ***************
------------------------------------------------- */
#box {
position:absolute; top:50px; left:50px;
z-index:10;
}
#box a {
color:#FF9900;
background:#333399;
font:bold Italic 16px "Comic Sans MS", sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:2px inside black;
}
#box a:hover {
color:black;
background: #FFCC00;
width:450px;
}
#box a span {
display:none;
}
#box a:hover span {
color:#333399;
background:#ffffff;
font:normal 14px "Comic Sans MS", sans-serif;
border:1px solid black;
display:block;
padding:10px;
}



HTML - Le code source.


Le code suivant est un exemple pour se rendre compte du placement et de l'affichage de cette boîte d'information. Il est à insérer dans le HTML d'un article ou de la page d'accueil, en principe au début, le CSS positionne l'image selon les valeurs  attribuées à "top" et "left". Suivant la valeur de "position" l'image défilera avec la page  "absolute" ou restera fixe à l'écran "fixed".

<div id="box"><a style="cursor:help"><img border="0" src="https://bricabrac.blog4ever.com/blog/url_artimage-490-818940-3154.html">
<span><big><b>Informations</b></big><br>
<b>Cette page contient le code pour afficher une boite d'information.</b><br><br>
Sélectionner tout le code CSS, pour le coller dans la feuille de style de ton
modèle graphique.<br><br>
Sélectionner tout le code HTML après avoir modifier ce texte exemple, pour le
coller dans le code source de la page d'un de des articles ou dans la page d'accueil.
<div align="right"><big><b>PapyClic</b></big> ...</div>
</span></a>
</div>



InformationsPour les plus curieux je communique mes sources car il y a beaucoup de possibilités d'application avec des adaptations de ces codes, selon les besoins de chacun. Personnellement je vais bientôt présenter d'autres codes. En attendant ce  [lien] est  à suivre pour plus d'explications.


à suivre...




21/01/2008
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 133 autres membres