un mâle

Ces 4 tutoriels sont les bases pour la création de mes articles. Je les ai groupé dans le module Tutoriels HTML et CSS.
Pour accéder aux détails des procédures, un clic sur   ou sur le titre du tuto dans le module.
A vos marques  prêts ?  PARTEZ..........faites-en l'essais

Un tableau permet d'insérer une ou plusieurs images côte-à-côte dans un article. Ces images seront ordonnées de façon précise avec ou sans cadres. La mise en forme se fait au goût de l'auteur. Voici une procédure de base qui ne demande pas d'être un ingénieur en informatique.
Avec un peu de pratique chacun pourra en faire un outil de grande utilité.
Si vous rencontrez une difficulté n'hésitez pas à "Me contacter"

Pour commencer je recommande d'abord de télécharger les images, prévues à êtres insérées, dans l'hébergeur EKLABLOG.
Pour ce faire il faut employer "Gérer les fichiers" dans la liste déroulante de   

Pour insérer une couleur de fond du tableau et de cellule + bordure.

- En tout premier il faut choisir et copier un code-couleur à trouver sur internet.
- Sélectionner le tableau puis cliquer sur l'icône puis "Propriétés du tableau" ensuite sur "Avancé" et là coller le code-couleur (ici rouge #DF0101) dans l'onglet correspondant  puis OK.
- Pour la bordure sélectionner le tableau puis cliquer sur l'icône puis "Propriétés du tableau" ensuite "Avancé" et là coller le code-couleur (ici bleu  #5882FA) dans l'onglet correspondant puis OK.
- Pour une cellule, mettre le curseur dans la cellule puis cliquer sur l'icône puis "Cellule" ensuite "Propriétés de la cellule" et "Avancé". Là coller le code-couleur (ici 1^er cellule jaune #FFFF00) dans l'onglet correspondant puis OK. Répéter avec une autre couleur pour les autres cellules.

Il s'agit d'introduire un code Javascript avec l'icône Code source  de l'interface d'Edition d'un article. Pour ce faire il est nécessaire de demander à EKLABLOG d'activer le Javascript sur votre blog. Une fois avoir reçu la confirmation vous suivez la procédure.

Pour information la procédure qui suit peut se faire avant ou après avoir inséré les photos de l'article.

En tout premier télécharger l'image désirée dans et le menu déroulant "Gérer les fichiers". Une autre solution est d'employer une galerie EKLABLOG → "Nouvelle galerie" Selon la largeur de votre blog il pourrait être nécessaire de modifier la résolution de ces images.

Puis vous devez l'article concerné.

Mettre l'interface en mode "Expert" ce qui fait apparaitre l'icone "Code source"


Voici le code que vous devez copier en entier. Si pas possible de copier ici je vous l'envoie par message.

<div id="madiv1">&nbsp;</div>
<script type="text/javascript">// <![CDATA[
var x=document.getElementById('madiv1').parentNode.parentNode;
x.style.backgroundImage='url(image)';
x.style.backgroundSize="100%";
x.style.backgroundPosition="0px 100px";
x.style.backgroundRepeat="no-repeat";
// ]]></script>

Maintenant activez l'icône "Code source" et collez le code à la place du curseur clignotant ou à la suite des codes existants..                     

Ce code étant utilisable qu'une fois, vous devez alors modifier les deux "madiv" (5 nouvelles lettres entre les guillemets) chaque fois que vous l'introduisez dans un article. Le chiffre 1 peut rester. Et entre les guillemets (image) vous coller l'adresse URL de votre image de fond, cliquez sur OK et  Enregistrer sans publier   Puis aller à la prochaine étape

                       Le fond apparait sous forme d'un bandeau. Il se déploiera chaque fois que vous insérez une image.
A ce stade vous pouvez modifier les valeurs bleu vert brun selon vos besoins, explications ci-dessous :

Bleu = dimension de l'image de fond en %.  100% est la largeur de la page
Vert = valeur variable de déplacement du fond vers le bas
Brun = "no-repeat" signifie que le fond sera inséré une fois,
        si on enlève no- le fond se répétera en mosaïque l'un en dessous de l'autre
(ne pas oublier de cliquer OK puis Enregistrer sans publier)
n
b

Le bandeau de l'image de fond est actuellement inséré (ci-dessous). Vous n'avez plus qu'à introduire vos photos, la page va s'adapter à l'espace employé. Pour ce faire on peut utiliser HTML- placer une image ou  - insérer un tableau