Sakatruc

[lançons nous !]

Cowblogeurs, cowblogeuses,
Voici un article qui risque de vous interesser, à savoir:
dont voici l'exemple [pour les utilisateurs d'Internet Explorer, je suis désolé mais je ne l'ai pas encore configuré sur mon blog, je l'avais fais et ça fonctionne]

Avoir concience que:
-Cet article est réservé aux Premiums.
-Nous allons utiliser le HTML, par concéquent il sera visible sur tout les habillages de votre blogs. Donc, il faudra modifier toutes les feuilles CSS de vos habillages, et y ajouter les codes de mise en forme du menu, en l'adaptant à chaques fois.
-Je ne suis en aucun cas spécialiste en HTML et en CSS.
Et enfin, cette manipulation est longue et difficile à mettre en place !

Le code HTML est divisé en deux parties, une pour que le menu fonctione sous Internet Explorer [IE] et une pour qu'il fonctione sous Fire Fox [FF]
Le CSS est également divisé en deux parties, pour les même raisons.
Je suis capable d'expliquer le code HTML, et en partie le CSS, je suis arrivé a un bon résultat aprés plusieurs éxperimentations, ne paniquez pas si votre menu ne fonctione pas tout de suite, veillez à bien recopier les codes et n'hesitez pas éffacer et recommencer plusieurs fois [pour vous donner une idée, il m'a fallut deux jours pour comprendre parfaitement le code HTML et l'utilité des differentes sections du CSS]

N'hésitez pas à demander de l'aide, à Sakatruc ou à moi même, mais gardez en tête que nous vous aiderons au cas par cas, ce sera donc long, assurez vous de vous y conaitre un minimum en CSS et HTML avant de vous lancer !

Afin de vous expliquer le fonctionnement des portions de code, je mettrais mes remarques entre ** **, n'oubliez pas de les éffacer lorsque vous entrerez les codes !

C'était une introduction longue, mais nécessaire.

Voilà tout d'abord le code HTML pour IE

<div class="menuIE">     **ouverture du menu IE**
 <a class="boutonIE" href="">Nom_de_l'onglet_1     **ouverture de l'onglet 1**
  <table><tr><td>     **ouverture du sous menu**
   <a class="SousMenu" href="url_de_votre_lien_1">Lien_1</a>
   <a class="SousMenu" href="url_de_votre_lien_2">Lien_2</a>
   <a class="SousMenu" href="url_de_votre_lien_3">Lien_3</a>
  </td></tr></table>     **fermeture du sous menu**
 </a>     **fermeture de l'onglet 1**
</div>     **fermeture du menu IE**

La création d'un lien dans le sous menu s'effectue ainsi :
<a class="SousMenu" href="url_de_votre_lien_1">Lien_1</a>
avec url_de_votre_lien_1 à placer entre les "" sous la forme http://cowblog.fr/
et Lien_1 qui détérmine le non du lien. Par exemple, pour un sous lien vers un blog, il faut mettre :
<a class="SousMenu" href="http://un_blog.cowblog.fr/">Un blog</a>

Important :
Les onglets se placent les un aprés les autres.
Ne placez le </div> de fin qu'aprés avoir fermer le dernier onglet de votre menu IE à la fin de votre menu IE.

Voici maintenant la deuxieme section du code HTML qui permet de fair fonctioner le menu sous FF

<div id="container"><div id="contabs">     **ouverture du menu FF**
 <div class="boutonFF">Non_de_l'onglet_1<br />     **ouverture de l'onglet 1**
  <a class="SousMenu" href="url_de_votre_lien_1">Lien_1</a>
  <a class="SousMenu" href="url_de_votre_lien_2">Lien_2</a>
  <a class="SousMenu" href="url_de_votre_lien_3">Lien_3</a>
 </div>     **fermeture de l'onglet 1**
</div></div>     **fermeture du menu FF**

La création d'un lien dans le sous menu s'effectue comme précedement.
Les onglets sont également a placer les uns aprés les autres.
Les deux </div></div> de fin sont également a placer à la fin de votre menu FF, aprés avoir fermer le dernier onglet de votre menu FF.

Maintenant, voici le code CSS qui met en forme votre menu, il est composé d'une partie commune, de deux parties, une pour IE et une pour FF, et d'une troisieme partie qui met en forme les sous menus.

Le code CSS qui suit est une copie de ma feuille de CSS, il est à placer à la fin de votre feuille CSS. Les valeurs de couleur et de taille donnée sont à titre d'exemple, il sagit des valeurs utilisées pous mon propre habillage, et doivent donc être modifiées pour s'adapter à votre design, je rappel que si vous pocedez plusieurs habillages, il vous faut placer tout le code dans toutes vos feuille CSS et le modifer pour qu'il  s'accorde avec chaques habillages.
Il y'a des valeurs que je vous deconceille de modifier si vous n'êtes pas trés à l'aise avec le CSS, mieux vaut modifier seulement les valeurs de couleur et de taille width et height. Rappellez vous que certaines lignes son propres à mon habillages, par exemple j'ai des bordures vertes sur mes onglets, vous n'aurez probablement pas besoin de bordures vertes sur votre blog, pensez a supprimer ces lignes ! Souvenez vous aussi que la partie IE de mon blog n'est pas a jour, alors veillez a mettre les meme valeurs pour les lignes communes aux section IE/FF.
Ici je ne vais pas rajouter d'explications, en effet cela rendrait le code difficile à lire, a vous de faire des experiementations et de voir par vous meme l'action de chaques valeurs.
Je n'indiquerais que les parties du code pour une meilleure comprehension.

**Partie commune**
#container {
position: relative
}

#contabs {
position:absolute;
top: -20px !important;
top: -20px;
z-index:500;
}

#container {
position:relative !important;
}

#couche {
position:absolute !important;z-index:1000 !important
}

**Partie IE**

.menuIE {
display:none !important;
display:block;
}

a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
color:#0097a0;
width:94px;
height:16px;
display:inline;
background:#000000;
margin-right:1px;
text-align:left;
float:left;
text-decoration:none;
font-family: impact;
font-size:20px;
line-height:16px;
overflow:hidden;
}

a.boutonIE:hover {
color:#000000;
background:#0097a0;
overflow:visible;
}

a.boutonIE:hover table {
display:block;
background:#0097a0;
border-collapse:collapse;
}

**Partie FF**

.boutonFF {
color:#e4007b;
width:111px;
height:35px;
display:inline!important;
display:none;
background:#ffffff;
margin-right:10px;
text-align:center;
float:left;
text-decoration:none;
font-family: impact;
font-size:15px;
line-height:35px;
overflow:hidden;
margin-top:10px;
border: 2px solid #00ff01;

}

.boutonFF:hover {
height:auto;
cursor:pointer;
color:#e4497b;
background:#ffffff;
border: 2px solid #00ff01;
}

**Partie sous menu**

a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display:block;
width:auto !important;
width:auto;
height:16px;
line-height:13px;
text-decoration:none;
color:#00A7EB;
font-family: verdana;
font-size:10px;
text-align:left;
background:#ffffff;
padding-left:1px;
border-top:1px dashed #00ff01;
}

a.SousMenu:hover {
background:#ffffff;
color:#50A7EB;
border-top:1px dashed #00ff01
}
Les codes donnés si dessus sont pour la fabrication d'un menu déroulant horizontal, il fonctionne sur les blogs avec le menu en haut du blog [Cf cet article], afin de le faire fonctionner en vertical, il est nécessaire d'ajouter des balises <BR> à la fin des onglets des deux menu [il me semble...]
J'espere avoir été clair.

Afin que ma tagboard ne se transforme pas en bureau des réclamations je vous prierais de m'ecire en passant par ICI, ou de vous adresser aux admins de Sakatruc qui en savent surement plus que moi. Je jetterais regulierement un coup d'oeil aux commentaires de cet article et essayerais de venir voir ceux qui ont des soucis [premiers arrivés, premiers servis].

Alors je vais poster ici plusieurs petites astuces concernant le css :

1° -  Pour que les titres ou toute autre partie de écrite de votre blog soir en petites majuscules comme ceci, vous devez ajouter le code : font-variant: small-caps; dans les paragraphes que vous souhaitez, pour les titres, dates, commentaires, catégories, liens des menus, titres de menus, etc. ( Si vous ne savez pas à quels sont les parties correspondantes de la fueille css, reportez vous à cet article )

Exemple : Pour que les titres des articles soient en petites majuscules, ajoutez le code à la partie .title :

.title {
            color: #a9a9a9;
            font-family: Tahoma;
            font-size: 8pt;
            font-weight: bold;
            font-style: normal;
            font-variant: small-caps;
            text-decoration: none;
            text-align: left;
            padding-top: 4px;
            margin-left: 4px;
}


2° - Pour que la première lettre des mots soit en majuscule, si par exemple vous voulez que tous les pseudos de ceux qui postent dans votre tagboard aient une majuscule, même ceux qui n'en n'ont pas normalement, ( comme ici ) il faut ajouter le code text-transform: capitalize; Vous pouvez également mettre une majuscule à votre pseudo si vous ne l'avez pas fait lors de votre inscription.

Exemple : En mettant ce code dans la partie qui concerne les pseudos de la tagboard, tous les pseudos ont une majuscule.

#tagframe a {
            color: #ecdb6f;
            font-family: Tahoma;
            font-size: 8pt;
            font-weight: bold;
            font-style: normal;
            text-transform: capitalize;
            text-decoration: none;
}


3° - Pour que le texte soit barré, comme ceci, il faut remplacer le none, ou underline, dans la ligne text-decoration, par line-through ( comme ici lorsque l'on passe sur les liens ), ainsi, selon le paragraphe que vous choisissez dans votre feuille css, le texte sera barré.

Exemple : Avec ce code placé dans ce paragraphe, lorsque l'on passe le curseur sur les pseudos de la tagboard, ils sont barrés.

#tagframe a:hover {
            color: #aeaacd;
            font-size: 8pt;
            font-weight: bold;
            font-style: normal;
            text-decoration: line-through;
}

D'abord, insérez à la fin de votre feuille de CSS le code suivant :

a.info {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none;
  font-weight: bold;
}
a:hover.info {
  text-decoration: none;
  background: none;
}
a.info span {display: none;}
a:hover.info span {
  display: inline;
  position: absolute;
  top:1.5em;
  left:0.5em;
  z-index: 20;
  background: #couleur de fond de l'info bulle;
  color: #couleur du texte de l'info bulle;
  border:1px solid #couleur de la bordure de l'info bulle;
  width:150px;
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}

Evidemment remplacez le texte en orange par le code de votre couleur ..

Ensuite, quand vous voulez mettre une info bulle dans votre article, placez ce code dans l'"affichage HTML de l'article" :

<a href="#" class="info">votre texte<span>texte dans l'info bulle</span></a>

Et normalement (si ça ne marche pas chez vous, je n'y peux rien ..), quand on passe la souris sur le texte, l'infobulle s'affiche ..
Je peux pas vous mettre un exemple sur cet article parce que le mode invité ne permet pas l'accès au CSS mais voyez sur cet article.

Voila, j'espère que vous m'avez comprise, sinon posez vos questions ;)

Mathilde, pour vous servir.

(bon, c'est à la fois du CSS et de l'HTML, mais j'le met dans la catégorie CSS.)