HTML - Boîte Information (2)

 Boîtes Aide 
 Boîtes Aide 

Dans le précédent article sur les boîtes d'informations, j'indiquais d'autres possibilités d'applications du  système ou un peu différent. Dans l'article "QUOI de NEUF", je présente une boîte s'affichant directement dans l'article.



CSS - Les règles de style.


Pour ces boîtes, j'ai créé une autre règle de style, pour me donner la possibilité d'afficher plusieurs boîtes dans le même article. Donc il faut remplacer le ID représenté par "#", par une CLASS représentée par ".", puis un nom différent  boxaide.

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).

/* =================================================
************ Boites d'aide CLASS boxaide **********
------------------------------------------------- */
.boxaide { /* taille boîte visible */
width:350px;
height:80P=px;
}

.boxaide a { /* paramètres boîte contenant lien */
color:#FF9900;
background: #333399;
font:bold Italic 16px "Comic Sans MS", sans-serif;
text-decoration:none;
display:block;
padding:5px;
margin-bottom:20px;
border:3px inset yellow;
}

.boxaide a span { /* texte dans span invisible */
display:none;
}

.boxaide a:hover span { /* texte dans span affiché */
color:#333399;
background: #FFFF99;
font:bold Italic 14px "Comic Sans MS", sans-serif;
border: 3px outset #FF3300;
width:350px;
height:200px;
padding:10px;
display:block;
position:relative;
top:10px;
left:10px;
z-index: 1;
overflow:auto;
}



HTML - Le code source.


Le code suivant  place et  affiche cette boîte d'information ou d'aide. Il est à insérer dans le HTML d'un article ou de la page d'accueil, à l'emplacement que vous souhaitez. 

Le CSS positionne le texte à afficher selon les valeurs  attribuées à "top" et "left" avec la valeur de "position" qui est  "relative" par rapport à la boîte visible, avec l'image  et ou  le texte,  "#boxaide".

Cette boîte est également placée dans une division  "div", de façon à pouvoir régler son positionnement dans le texte.

<Div style="width: 360px; margin: 10px auto 30px auto;">
<DIV class=boxaide><A style="cursor:help">
<IMG src="https://static.blog4ever.com/2006/01/490/artimage_490_753326_201004154530864.gif" border="0" vspace="0" hspace="5" />"Survol... informations à lire ..." <SPAN><BIG><B>Informations</B></BIG><BR>
<P>Voilà cette deuxième boîte a pu être créée grâce au changement de règle par rapport à celle "FLASH" que je fait flotter sur ma page d'accueil.</P>
<P>Je peux maintenant sur une même page me servir de ces 2 règles, soit avec une image différente ou du texte.</P>
<P>Vous trouverez sur mon Bric à Brac quand vous reviendrez certainement d'autres utilisations de ces codes. </P>
<DIV align=right><BIG><B>PapyClic</B></BIG> ...</DIV>
</SPAN></A>
</DIV>
</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...




28/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 142 autres membres