Créer votre bannière avec menu cliquable en CSS "in line"

Publié le par PêUR

Mise à jour le 24/04/2006 22:01

Cette article à pour but de vous faire créer une banière sans la moindre image, avec uniquement du CSS "in line". L'intérêt principal étant un allègement conséquent de votre blog

 

1 / Code source commenté

Ci dessous le code source commenté (commentaire en vert) pour votre bannière. Ne copier/coller pas ce code, à cause de son formatage il ne fonctionnera pas... Pour faire un copié/collé prenez le code du 2ème paragraphe.

HTML commenté

<!-- 1er  bloc (supérieur) -->
<DIV
style="BACKGROUND: #544745;    <!-- Background pavé supérieur -->
       WIDTH: 100%;                          <!-- Largeur du pavé supérieur -->
       PADDING-TOP: 3px; 
       PADDING-BOTTOM: 5px; 
       LINE-HEIGHT: 1em;
       FONT-WEIGHT: bold;                    <!-- Titre en gras -->
       FONT-SIZE: 54px;                      <!-- Taile du titre -->
       FONT-FAMILY: Georgia,Times;           <!-- Police du titre -->
       COLOR: #98c5dc"                       <!-- Couleur du titre -->
onclick="top.location.href='http://url...';"><!-- URL au clique -->
<!-- *** Titre blog ***-->
<SPAN 
title="Aller à l'accueil"               <!-- Infobulle au survole du titre --> 
onmouseover="this.style.color='white';" <!-- Couleur onmouseover-->
onmouseout="this.style.color='#98c5dc';"<!-- Couleur onmouseout -->
style="COLOR: #98c5dc;                  <!-- Couleur du titre --> 
       CURSOR: hand">                   <!-- pointeur lien -->
Titre du Blog                           <!-- Texte du titre-->
</SPAN>
<!--*** 1ère accroche ***-->
<SPAN
style="PADDING-LEFT: 5px; 
       FONT-WEIGHT: bold;          <!-- "1ère accroche" en gras -->
       FONT-SIZE: 12px;            <!-- Taille "1ère accroche" --> 
       COLOR: #98c5dc;             <!-- Couleur "1ère accroche" --> 
       FONT-FAMILY: geneva,arial"> <!-- Police "1ère accroche" --> 
Texte de 1ère accroche             <!-- Texte "1ère accroche" --> 
</SPAN>
</DIV>

<!-- 2ème bloc (inférieur) -->
<!--*** 2ème accroche ***-->

<DIV
style="FONT-WEIGHT: bold;          <!-- "2ème accroche" en gras -->
       FONT-SIZE: small;            <!-- Taille "2ème accroche" -->
       COLOR: #544745;             <!-- Couleur "2ème accroche" -->
       BACKGROUND: #98c5dc; <!-- Couleur de fond bloc inférieur --> 
       WIDTH: 100%;                 <!-- Largeur bloc inférieur -->
       FONT-FAMILY: system,geneva;  <!-- Police "2ème accroche" -->
       TEXT-ALIGN: center"> <!-- Alignement txt "2ème accroche" -->
Texte de deuxième accroche...        <!-- Texte "2ème accroche" -->
</DIV>

2 / Code de base à utiliser en copier/coller

Ce code est à insérer en mode HTML de préférence dans l'entête de votre blog, mais cela peut aussi être fait dans un article, un module de texte libre ou bien le pied de page de votre blog.

HTML à copier/coller

<DIV style="BACKGROUND: #544745; WIDTH: 100%; PADDING-TOP: 3px; PADDING-BOTTOM: 5px; LINE-HEIGHT: 1em; FONT-WEIGHT: bold; FONT-SIZE: 54px; FONT-FAMILY: Georgia,Times; COLOR: #98c5dc" onclick="top.location.href='http://url...';">
<SPAN title="Aller à l'accueil" onmouseover="this.style.color='white';"
onmouseout="this.style.color='#98c5dc';" style="COLOR: #98c5dc; CURSOR: hand"> Titre du Blog
</SPAN>
<SPAN style="PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #98c5dc; FONT-FAMILY: geneva,arial; VERTICAL-ALIGN: center"> Texte de 1ère accroche
</SPAN>
</DIV>
<DIV style="FONT-WEIGHT: bold; FONT-SIZE: small; COLOR: #544745; BACKGROUND: #98c5dc; WIDTH: 100%; FONT-FAMILY: system,geneva; TEXT-ALIGN: center"> Texte de deuxième accroche...
</DIV>

Avec ce code, on obtient: 

Mon Blog1ère accroche
Texte de deuxième accroche...

 

3 / Faites travailler votre imagination, quelques exemples

 Variation de couleur:

Mon Blog1ère accroche
Texte de deuxième accroche...

 

Texte défilant:

>Mon BlogPar moi
Texte d'accroche défilant...

 

Multicolor:

PêUR?
L'urgent est déjà parti, l'impossible est en train de se faire, pour les miracles nous demandons 24 heures de plus

 

4 / Aller plus loin: Bannière avec menu cliquable

#Mon Blog !!Par moi
Vous touverez sur ce #blog!! tout ce que j'aime...
  Zoélie     SuperSouris     Francisek  

 

A vous de jouer, ci-dessous le code de l'exemple avec menu cliquable, (Utilisable en copié/collé):

HTML à copier/coller

<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: 54px; BACKGROUND: #39002c; PADDING-BOTTOM: 5px; WIDTH: 100%; COLOR: #decbbd; LINE-HEIGHT: 1em; PADDING-TOP: 3px; FONT-FAMILY: Georgia,Times" onclick="top.location.href='http://url...';">
<SPAN
onmouseover="this.style.color='white';" title="Aller à l'accueil" style="CURSOR: hand; COLOR: #decbbd" onmouseout="this.style.color='#decbbd';">#Mon Blog !!
</SPAN>
<SPAN
style="PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #decbbd; FONT-FAMILY: geneva,arial">Par Guillaume
</SPAN>
</DIV>
<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: small; BACKGROUND: #61110a; WIDTH: 100%; COLOR: #decbbd; FONT-FAMILY: system,geneva; TEXT-ALIGN: center">
<MARQUEE>Vous touverez sur ce #blog!! tout ce que j'aime...</MARQUEE>
</DIV>
<!-- menu cliquable -->
<DIV
style="FONT-WEIGHT: bold; FONT-SIZE: small; BACKGROUND: #decbbd; WIDTH: 100%; COLOR: #39002c; FONT-FAMILY: system,geneva; TEXT-ALIGN: left">
<!-- Bouton 1 -->
<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="vie palpitante" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://zoelie.over-blog.com';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">&nbsp;&nbsp;Zoélie&nbsp;&nbsp;
</SPAN>
<!-- Bouton 2 -->
<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="Vous avez aimé les aventures loufoques de SuperSouris ?" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://www.supersouris.net/';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">&nbsp;&nbsp;SuperSouris&nbsp;&nbsp;
</SPAN>
<!-- Bouton 3 -->
<SPAN
onmouseover="this.style.background='#61110a'; this.style.color='white'" title="Génie pour lui même... et pour les autres" style="BACKGROUND: #decbbd; CURSOR: hand; COLOR: #39002c" onclick="top.location.href='http://www.francisek.com/';" onmouseout="this.style.background='#decbbd'; this.style.color='#39002c'">&nbsp;&nbsp;Francisek&nbsp;&nbsp;
</SPAN>
</DIV>

Ils, elles utilisent cette méthode

 

Publié dans CSS

Commenter cet article

Dom 23/11/2015 11:54

Après de longues recherches, de nombreux tests, voici enfin ce que je recherchais, merci beaucoup pour cette page !
Voici le code siple que je voulais, juste une bannière avec un texte qui amène à un lien :

texte lié au lien

frederic 16/09/2007 11:15

bonjour , merci pour les infos que vous partagez :) je trouve le modèle 4/ super , sauf que j'aimerai en changer les couleurs afin qu'elles soit " assorties " a mon blog . ou trouvé les codes d'une palette de couleurs ? merci Amitiés fd

Elleiram :0036: 17/06/2007 13:09

Juste pour dire que mon problème est résolu...

A bientôt et encore merci pour tes précieux conseils

;O)

PêUR 18/06/2007 09:20

:)

Elleiram :0036: 03/06/2007 14:38

Bonjour PêUR!

Il y a quelques temps, je m'étais inspirée de ton article pour créer ma bannière dans mon blog. Depuis que je suis passée en V2, je l'ai adaptée au nouveau design de mon blog, notamment au niveau de la couleur.

Par contre celle-ci n'apparait pas lorsque je clique sur une photo seule dans un des albums photos. J'ai posé cette question dans le forum à l'adresse suivante: http://forum.over-blog.com/thread-2587351.html.

Auras-tu une idée pour résoudre se léger problème?

Par avance merci.

;O)

PêUR 03/06/2007 22:20

? bug v2?

Association 123 Santé 20/05/2007 16:55

Merci pour les infos concernant la bannière. En voici le résultat :

http://asso123sante.over-blog.com/

A bientot pour de nouvelles aventures

PêUR 20/05/2007 22:18

:)