Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Astuces diverses : formulaires, div, recommander, pied de page, ligne de (...)

Astuces diverses : formulaires, div, recommander, pied de page, ligne de séparation

Base MySQL
Diaporama powerpoint
Diaporama javascript
Album photos
Vidéo
FTP : installation et usage

– 

 Formulaire de courrier

Voici un formulaire :

Votre Nom : 
Message : 



Le code à insérer est le suivant :

<form action="mailto:journal.la.mee@wanadoo.fr" method="post" enctype="text/plain">
Votre Nom:&nbsp;<input type="textname" value="" name="De la part de " /> <br />
Message:&nbsp;&nbsp;<textarea name="Mon message" rows="8" cols="65"></textarea><br />
<br />
<input type="submit" value="Envoyer le message" text-align: left" /> <input type="reset" value="Annuler" name="annuler" />
</form>

L’indication : cols=65 indique le nombre de colonnes et règle ainsi la largeur du cadre où l’on peut écrire le message.

Voici un autre formulaire, avec obligation de remplir certaines cases :

<form method=post enctype="text/plain" action="mailto:journal.la.mee@wanadoo.fr">
   <div>
          <label for="nom">Votre nom ici : </label>
         <input type="text" id="nom" name="nom" autofocus required />
   </div>
   <div>
       <label for="courriel">Votre adresse courriel :</label>
       <input type="email" id="courriel" autofocus required />
   </div>
   <div>
       <label for="message">Votre message :</label>
       <textarea id="message"></textarea>
   </div>
   
   <div class="button">
       <button type="submit">MERCI. Vous pouvez envoyer votre message</button>
   </div>
</form>

 Faire des boites div

<div> ...</div> permet de faire des boites
Exemple :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Voici le code de cette boite :

<div style="width:80% ; background: #FFF4c9 ; font-style:italic">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

 Mettre des boites dans les boites

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

En voici le code :

<div style="width:80% ; background: #FFF4c9 ; font-style:italic">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

<div style="width:35%; background-color: #0000FF; color: #FFF; text-align:right;">

  Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.

</div>

Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

Pour avoir une boite vide :

<div>&nbsp;</div>

En mettant ces boites vides les unes sous les autres, on crée des espaces

Après ... faut apprendre !
Voici un bon site pour ça :
http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_62/page2.html

ou celui-ci : http://www.grappa.univ-lille3.fr/polys/htmlcss-2004/index.php?page=css_positionnement


 Faire un encadré

Pour encadrer un texte, on peut écrire ceci :
<div class="spip_cadre">Le texte</div>

comme ceci :

Le texte le texte le texte le texte

Ici j’ai défini spip_cadre, dans le fichier spip_style.css de la façon suivante :
.spip_cadre { font-family: Arial, Times ; width: 94%; border: 2px dotted; padding-left: 10px; padding-right: 10px; padding-top: 10px; vertical-align: middle; background-color: #FFFFCC; }

On aurait pu inventer autre chose du genre :
<div class="montruc">.............................</div>
et dans la feuille de style :

.montruc {
border:.......
color:.......
padding:.....
etc.....
}

 L’usage de input

1) la case où l’on doit écrire quelque chose :

est donnée par le code : <input type="text" value=""  />

 

2) Le bouton-texte qui sert en renvoi :

est donné par le code :  <input type="envoi" value="envoi" />

 

3) Pour une cache à cocher :

voici le code : <input type="checkbox" />

 

4) Pour des boutons à choix unique :

Sexe :
     Femme
Homme

Le code à utiliser est celui-ci :

<form> Sexe :
<pre>
    Femme<input type="radio" checked="bouton" value="B1" /><br />
    Homme<input type="radio" name="bouton" value="B2" /> <br />
</pre>
</form>

 

(noter ici le <pre> ... </pre> qui permet de présenter correctement)

On trouve d’autres types de « boutons input » ici

Et si on veut des boutons en couleur :

comme ceci : style="font-weight:bold; background-color: #FFCC00;"/>

le code à utiliser est :

<input type="reset" value="Bouton coloré"
style="font-weight:bold; background-color: #FFCC00;" />

Et si on veut que tous les boutons « Précédente » « Suivante » soient colorés, il faut pour cela ouvrir le fichier spip_style.css et ajouter :

_ .spip_in input{background:#FFCC00;}
_ .spip_out input {background:#FFCC00;}

sans oublier le point au départ et en mettant la couleur qu’on veut. Avec FFCC00 cela donne ceci :

 

Attention : fin d’étiquette pour input

Il faut toujours terminer par : espace/>

Exemple :

Ceci est bien :
<input type="reset" value="Annuler" name="annuler" />

et ceci n'est pas bien :
<input type="reset" value="Annuler" name="annuler">

  Input et centré

Si l’on veut que le texte soit centré, il faut écrire ceci :

<input type="text" name="heur" style="text-align:center" value="" />

  Taille et size

L’indication de la taille est donnée quelquefois par font-size : 120% ou font-size : 25px

Mais il arrive qu’on trouve font-size=« 3 ».

Cette dernière notation m’a fait des ennuis ! Il vaut mieux transformer en font-size : 15px (ou un autre nombre de pixels) (attention à bien écrire 15pt et pas 15 pt)


 Un pied de page avec des icônes

1) j’ai fabriqué trois images a,r,e, que j’ai envoyées dans le site distant. Cela me fait donc les images suivantes :

http://www.journal-la-mee.fr/IMG/jpg/a.jpg

http://www.journal-la-mee.fr/IMG/jpg/r.jpg

http://www.journal-la-mee.fr/IMG/jpg/e.jpg

2) j’ai ouvert une boite div, que j’ai centrée  :

<p align="center"><div style="width:auto" ;>... </div></p>

3) J’ai mis les trois images, l’une à la suite de l’autre, avec ceci :

<a href="adresse de la page"  title="Sommaire"><img src='http://www.journal-la-mee.fr/IMG/jpg/a.jpg' alt='Accueil' style='border-width: 0px;' />

4) pour séparer les images j’ai mis une collection d’espaces : &nbsp;

Cela donne ceci :

Voici le code utilisé :

<div style="width:auto" >           <p align="center">                                              <a href="http://www.journal-la-mee.fr/"  title="Sommaire">                                                   <img src='http://www.journal-la-mee.fr/IMG/jpg/a.jpg'

alt='Accueil' style='border-width: 0px;'/></a>                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <a href="http://www.journal-la-mee.fr/spip.php?article216"  title="Ecrire à La M&eacute;e">                                                                                         <img src='http://www.journal-la-mee.fr/IMG/jpg/e.jpg'
style='border-width: 0px;'/></a>                               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.journal-la-mee.fr/spip.php?article1000/"  title="Qui sommes-nous">
<img src='http://www.journal-la-mee.fr/IMG/jpg/r.jpg'
alt='Presentation' style='border-width: 0px;' /></a>
</p>
</div>

Il suffit de placer ce code, dans la page article.html, là où on veut que cela soit (par tâtonnement). Expédier ensuite article.html vers le site distant, actualiser et c’est bon.


 Compteur, combien de pages lues ?

Dans article.html, mettre le script suivant :

<!-- Nombre d'articles lus-->

<div style="text-align:center"><span style="color:#000;"><?php
$visites = 0;
?>
<BOUCLE_visites (ARTICLES) {tout}  >
<?php
$visites = $visites + #VISITES;
?>
</BOUCLE_visites>
Il y a eu <?php
echo $visites;
?> articles lus sur ce site depuis sa création le 1er janvier 2004.</span></div>

On peut supprimer le centrage
et modifier la couleur avec : span style=« color :#... ; »

Cela donne ceci (voir sur la partie droite de l’écran) :

Il y a eu ..... articles lus
sur ce site
depuis sa création le
1er janvier 2004

  Des liens qui bougent

C’est très simple :

Ouvrir article.html avec le logiciel PSPad (ou un bloc-notes)

Insérer ceci, entre <head> .. et .. </head>

<!-- DEBUT DU SCRIPT  LIENS QUI BOUGENT-->
<style fprolloverstyle>A:hover {color: #FF00FF; font-style: italic; font-weight: bold}
</style>
<!-- FIN DU SCRIPT LIENS QUI BOUGENT-->

Expédier ensuite article.html sur le site distant, avec FTP. Voilà ce que ça donne :

Un lien qui bouge


 Envoyer un lien vers la page ....

A partir d’un site, quand on veut envoyer un lien vers une page précise, il suffit de faire « fichier/envoyer un lien vers la page ... ».

Le problème, pour moi, c’est que « Outlook express » s’ouvrait tout seul, ce que je ne souhaitais pas, car je voulais utiliser Thunderbird. Pour résoudre le problème il faut faire ceci :
– aller dans Thunderbird
– outils/options
– cliquer sur « général »
– puis cocher : « toujours vérifier si Thunderbird est le client de messagerie par défaut au démarrage » - Cliquer ensuite sur « vérifier maintenant » puis, en bas sur OK


 Ligne de séparation et Haut de page

Avertissement : tout ceci a bien fonctionné tant que j’étais en php3.
Maintenant que j’ai changé de version de spip, et que je suis en php, il faut adapter !
.

La question :
Quand on trace quatre tirets
SPIP trace une ligne horizontale qui correspond à
<hr class="spip" />

Je voudrais que, au bout de cette ligne horizontale, se trouve un renvoi « haut de page »

fl1 Voilà un procédé (avec mes_fonctions.php) :

Comment faire ?
– 1-a - dans « squelettes », trouver le fichier mes_fonctions.php . S’il n’y en a pas, en créer un

– 1-b - Télécharger ce fichier vers votre ordinateur et l’ouvrir avec un bloc-notes (par exemple PSPad)

– 1-c - Copier, dans ce fichier :

$GLOBALS['ligne_horizontale']="\n<div
style=\"text-align:right;font-weight:bold\"><a href='#contenu'
style=\"color:#FF00FF;\"> Retourner en haut de la page</a></div>"
."\n<hr class='spip' />\n";

– 1-d - Renvoyer le fichier complété dans le dossier squelettes du site distant

Cela donne une mention « Retourner en haut de la page », de couleur violette (#FF00FF) placée à droite de la page.

 

fl1 Et voici encore plus simple

Depuis la dernière mise à jour du « couteau suisse » , activer l’outil « Spip et ses raccourcis »
qui pemet de remplacer la ligne horizontale par ceci :

<div style="text-align:right;font-weight:bold"><a href="#contenu" style="color:#FF00FF;"> Retourner en haut de la page</a></div><hr class="spip" />

 Aérer un texte, espacer les paragraphes

Certaines personnes vont à la ligne avec <br /> mais sans sauter une ligne, ce qui fait des textes compacts du genre « étouffe chrétien ».

Pour résoudre le problème j’ai utilisé :
– le plugin « Retour simple » : http://www.spip-contrib.net/Retour-simple,3823
– deux lames du couteau suisse : « Paragrapher » et « Retour de ligne automatique »
– et j’ai modifié « habillage.css » en ajoutant ceci :

/*Aérer*/
br {margin-bottom:25px;}

Autre façon

1.- Activer la lame « Retour de ligne automatique » du couteau suisse
2.- Ecrire ceci dans mes_options.php :

<?php
   define('_CS_AUTOBR_BR', "\n\n");
?>

et placer mes_options.php dans le dossier config du site distant
3. Modifier habillage.css en ajoutant, par exemple à la fin :
p {margin-bottom:10px;}

et tout va bien ! On peut styler les paragraphes p au pixel près !


 Cache

J’ai eu un ennui avec mon hébergeur qui a suspendu mon site en me disant :
« votre site consomme trop de ressources serveur. Essayez d’optimiser vos scripts et bases svp ». Je ne savais évidemment pas comment faire ! C’est capintranet.com qui m’a donné la solution :

  1. vérifier l’espace disque sur le cpanel, il faut au moins deux-tiers disponibles.
  2. dans l’espace privé de SPIP, regarder la taille du cache allouée,
    si elle fait moins de 100 Mo, ajouter cette ligne dans le fichier mes_options.php : $GLOBALS['quota_cache'] = 100;

Remarque : le fichier mes_options.php de trouve dans le dossier config du site distant.

Comment calibrer le cache de SPIP ?
En standard le cache est à 10Mo et ça couine !

  • on augmente la variable $GLOBAL du cache à 100 Mo
  • on observe le comportement dans l’espace privé de la taille du cache allouée et celle réelle. Si pour 100 Mo le cache flirte entre 90 Mo et + de 100 Mo, on ajuste à 150 Mo par exemple,
  • ceci jusqu’à avoir une stabilité entre taille allouée et taille réelle. Par exemple un cache alloué à 200 Mo et si au bout de 24, 48, une semaine la taille du cache est stable à 150 Mo, le réglage est bon.

 Autres

Arobase, dièse, euro, copier, coller, rechercher