L'article du jour (11/11/2011) : Maman travaille et EST ORGANISEE

Ça n'est un secret pour personne, je suis un peu concernée par la question. Tout comme Pascal, d'ailleurs. En effet, embrasser ses enfants en rentrant de ses folles journées profesionnelles, ça n'a pas de prix. Un note, et un blog, à découvrir donc.

Bonne soirée à tous !

L'article du jour (10/11/2011) : J'en dors plus, sur Pensées de ronde

Loin de moi l'idée de lancer un tel débat sur ce blog, ça n'est vraiment pas le lieu pour ça. Mais si le coeur vous en dit, vous pouvez aller participer aux commentaires directement là-bas. Et allez lire surtout, allez-y.

L'internet avec un fil

Parfois, il m'arrive de me déplacer partout en France pour prêcher la bonne parole de l'Internet. Dans ce cas, je reste souvent plusieurs jours (l'Internet est vaste, vous êtes bien placés pour le savoir, essayez donc de parcourir l'ensemble des articles publiés sur Hautetfort rien qu'aujoud'hui pour voir). En ce cas, ma recherche d'hébergément se limite le plus souvent à un seul critère que nous résumerons à cette question :

"Y a-t-il du Wifi ?"

De deux choses l'une : soit il y en a, et je dis d'accord, sans poser d'autre question ce qui entraîne parfois des surprises du genre toilettes sur le palier, pas de douche, oreiller en plastique, ou autre réjouissances. Soit il n'y en a pas, et je suis obligée de décliner. Car c'est très triste mais c'est ainsi : je ne sais tout simplement plus vivre sans wifi. Mais je le répète et vous le confirme : c'est bien triste.

Tout ça pour dire qu'en ce lundi, quand je suis arrivée dans ma chambre normande, je fus décontenancée quand je vis la propriétaire tirer un grand fil de chez elle, le fit traverser les 10 mètres de jardin, le cala sous la porte et me le tendit :

"Tenez, voici l'Internet".

Je lui fis remarquer que mon collaborateur aussi aurait besoin d'Internet, qu'à cela ne tienne : elle prit un second grand fil, lui aussi traversa les 10 mètres de jardin, et consorts.

Finalement l'Internet fonctionne, regardez, je vous écris. Néanmoins je me rends compte que parfois nous sommes connectés sans fil, sans même nous en rendre compte. Et que la deconnection qui parfois nous ferait du bien, ça n'est pas demain que je vais y arriver.

Et vous : fil ou pas fil ?

Tutorial : Insérer un menu horizontal sur votre blog Hautetfort.

Vous êtes nombreux à nous demander comment insérer un menu horizontal sur votre blog. Cette opération nécessite de modifier les modèles de page HTML et est donc, aujourd'hui, réservée aux utilisateurs avancés. Pour autant elle n'est pas difficile et les plus débrouillards d'entre vous y arriveront sans problème.

Attention cependant, afin d'éviter de perdre des données, nous vous invitons à utiliser un blog de test, ou d'enregistrer préalablement l'ensemble de vos modèles de page. Nous ne pourrons pas rétablir une situation antérieure suite à une mauvaise manipulation.

Dans un premier temps vous devez vous identifier sur votre blog, et vous rendre au niveau de la section PRESENTATION rubrique Configuration avancée.

Il y a deux types de page à distinguer : 

• Feuille de style : il s'agit de la mise en forme des éléments de votre blog. Tailles de polices, couleurs, tout est définit ici. On parle aussi de CSS.
• Modèle de la page ... : il s'agit de la structure de votre page. On parle aussi de HTML. 

Pour commencer vous pouvez ajouter les lignes suivantes dans votre CSS au niveau de la colonne de droite. Pour la colonne de gauche, sauf si vous avez personnalisé toute votre CSS, laissez coché "Charger cette CSS".

#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center; }

#menu li {
float:left;
margin:auto;
padding:0;
background-color:black; } /* Fond du menu */

#menu li a {
display:block;
width:100px; /* Taille de la cellule */
color:white; /* Couleur de la police sur les liens */
text-decoration:none;
padding:5px; }

#menu li a:hover {
color:#FFD700; } /* Couleur de la police lors du déplacement du curseur sur le lien */

#menu ul li ul {
display:none; }

#menu ul li:hover ul {
display:block; }

#menu li:hover ul li {
float:none; }

#menu li ul {
position:absolute; }

Je vous ai mis des commentaires sur les zones clés vous permettant de modifier l'apparence générale du menu. Pour aller plus loin dans la modification CSS nous vous conseillons ce tutorial.

Il faut ensuite placer le menu au sein de la structure HTML de votre blog.

Avant de l'appliquer sur chaque modèle de page, commençons par une page test. Cliquez sur "Modifier le template" en vis à vis du modèle de page désiré. 

<div id="menu">

<ul>

  <li><a href="#">Item 1</a></li> <!-- Remplacer le # par l'adresse de la cible et Item par le texte. -->

  <li><a href="#">Item 2</a>

    <ul>

      <li><a href="#">Sous-item 1</a></li> <!-- Exemple de sous menu -->

      <li><a href="#">Sous-item 2</a></li>

      <li><a href="#">Sous-item 3</a></li>

    </ul>

  </li>

  <li><a href="#">Item 3</a></li>

</ul>

</div>

La seule difficulté est de le placer où vous le souhaitez dans la structure de la page. Généralement soit au dessus de la bannière (au dessus de la ligne <div id="banner-img">) ou en dessous (au dessus de </div></div><div id="left"> qui correspond à la colonne de gauche).

Vous pouvez ensuite faire vos propres tests pour voir les effets sur votre blog, le résultat peut être sensiblement différent en fonction de votre habillage de départ. 

Si vous constatez un problème d'affichage sur Internet Explorer 7 et 8, vous pouvez ajouter le code HTML suivant au sein des balises <head> </head>.

<!--[if !IE]> <-->

<style type="text/CSS">

#menu li ul {

position:absolute;

}

</style>

<!—><![endif]—>

 

<!--[if IE 8]>

<style type="text/CSS">

#menu li ul {

position:absolute;

}

</style>

<![endif]-->

Si votre modification sur les modèles de page n'est pas prise en compte, n'hésitez pas à valider vos modifications une seconde fois, et à raffraichir la page de votre blog. Au besoin il sera peut être nécessaire de vider le cache de votre navigateur. 

Si vous avez des questions n'hésitez pas à les laisser en commentaire et à échanger avec d'autres blogueurs plus expérimentés. 

Gif! C'est dimanche #24

Parfois, Pascale tarde à m'envoyer son GIF du dimanche. Alors il arrive un lundi. Mais si nous fermons les yeux très fort, voilà comme ça, c'est un peu comme si nous étions dimanche, non ?

Voilà.

Et bonne semaine à tous ;).

 

“One down, a couple billion to go.”

Contact (1997)

Késaco le Gif! C'est dimanche ? La réponse par là.