[Abonnement Twitter] [Abonnement flux RSS] [Infos] [Nous contacter] [Quoi de neuf] [Recherche] [Accueil]

Eskualdun Arranoak

Quoi de neuf sur le site ?

  Le club des "Aigles Basques"

Modèles de styles

Les titres

Apparence Balise Exemple de code

Titres h1

 <h1> 
  <h1>Titre h1</h1>

Titres h2

 <h2> 
  <h2>Titre h2</h2>

Titres h3

 <h3> 
  <h3>Titre h3</h3>

Titres h4

 <h4> 
  <h4>Titre h4</h4>

Les paragraphes de texte (avec gras, italique ou fond de couleur)

<p> <strong> <em> <q> <blockquote> <span>

Texte renforcé en gras (avec <strong>), en "emphase" donc en italique (avec <em>) ou bien en citation courte (avec <q>, balise de type en ligne) ou encore avec un fond de couleur ou une police en couleur. Il est possible de conjuguer les effets comme ceci ou comme cela ou encore de cette manière...

Le texte peut également être écrit en style "citation longue" (avec <blockquote>, balise de type bloc).
Attention, il faut placer le texte dans un <p> à l'intérieur du <blockquote>.

<p>
  Texte <strong>renforcé en gras</strong> (avec <strong>),
  en <em>"emphase" donc en italique</em> (avec <em>)
  ou bien en <q>citation courte</q> (avec <q>, balise de type en ligne)
  ou encore avec un <span class="fond_couleur01">fond de couleur</span>
  ou une <span class="encre_couleur01">police en couleur</span>.
  Il est possible de conjuguer les effets <strong class="fond_couleur01">comme ceci</strong>
  ou <strong class="encre_couleur01">comme cela</strong>
    ou encore <span class="fond_couleur01"><strong class="encre_couleur01">de cette manière</strong></span>...
</p>
<blockquote>
  <p>Le texte peut également être écrit en style "citation longue"
  (avec <blockquote> balise de type bloc).<br />
  Attention, il faut placer le texte dans un <p>
  à l'intérieur du <blockquote>.</p>
</blockquote>

Les listes

<ul> <li>

<ul>
  <li>Elément de liste par défaut #1</li>
  <li>Elément de liste par défaut #2</li>
  <li>Elément de liste par défaut #3</li>
</ul>

<ul> class="rond" <li>

<ul class="rond">
  <li>Elément de liste avec des ronds #1</li>
  <li>Elément de liste avec des ronds #2</li>
  <li>Elément de liste avec des ronds #3</li>
</ul>

<ul class="liste1"> <li>

<ul class="liste1">
  <li>Elément de liste avec flèche #1</li>
  <li>Elément de liste avec flèche #2</li>
  <li>Elément de liste avec flèche #3</li>
</ul>

<ul class="liste2"> <li>

<ul class="liste2">
  <li>Elément de liste avec point #1</li>
  <li>Elément de liste avec point #2</li>
  <li>Elément de liste avec point #3</li>
</ul>

Série (liste) de dossiers empilés horizontalement suivi d'un retour à la ligne

Faites varier la largeur de la fenêtre pour vérifier le fonctionnement.

Faible nombre d'élements

La largeur totale correspondant à l'empilement horizontal est inférieure à la largeur mini du div "contenu" de la page. Le retour à la ligne se fait après le dernier div.

Grand nombre d'élements

La largeur totale correspondant à l'empilement horizontal est supérieure à la largeur mini du div "contenu" de la page.

Astuce : si la liste <ul class="dossiers_empil_horizontal"> est suivie d'un titre <h3> avec fond de couleur, il y a un bug avec ce fond de couleur qui s'applique sur toute la liste... Il faut alors faire suivre la liste d'un div de classe "blocs_empil_horizontal"...

<ul class="dossiers_empil_horizontal">
  <li>
    Elément #1
  </li>
  <li>
    Elément #2
  </li>
  ...
</ul>

Empilement horizontal de blocs suivi d'un retour à la ligne

Même chose que pour les listes, mais avec des "div". On n'a alors pas d'image d'un dossier en fond et cela permet d'y mettre ce que l'on veut. La taille et d'autres styles peuvent être rajoutés pour obtenir l'effet voulu... Explication sur le CSS : les blocs sont tous "float: left" et sont tous placés dans un div lui-même "float: left".

Blocs avec contenus et styles différents :

[recherche] Bloc #1 200px
[infos] Bloc #2
[mail] Bloc #3 160px
Bloc #4 [rss]
[twitter] Bloc #5 150px 
<div class="blocs_empil_horizontal">
  <h4>Blocs avec contenus et styles différents  :</h4>
  <div class="bloc_empil_horizontal" style="width: 200px;">
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_recherche.png"
         style="float: left; width: 48px; height:48px; margin: 0px;"
         alt="[recherche]"
         title="Moteur de recherche" />
    Bloc #1 200px
  </div>
  <div class="bloc_empil_horizontal" style="width: 80px;">
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_infos.png"
         style="width: 48px; height:48px; margin: 0px;"
         alt="[infos]"
         title="Informations" />
    Bloc #2
  </div>
  <div class="bloc_empil_horizontal" style="width: 160px;">
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_mail-2.png"
         style="float: left; width: 48px; height:48px; margin: 0px;"
         alt="[mail]"
         title="Contactez-nous" />
    Bloc #3 160px
  </div>
  <div class="bloc_empil_horizontal" style="width: 80px;">
    Bloc #4
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_rss.png"
         style="width: 48px; height:48px; margin: 0px;"
         alt="[rss]"
         title="Suivez-nous sur le Flux RSS" />
  </div>
  <div class="bloc_empil_horizontal" style="width: 150px;">
		<img src="<?php echo $chemin;?>images/webmaster/akhtar_sheikha_2experts_twitter-3.png"
         style="float: left; width: 48px; height:48px; margin: 0px;"
         alt="[twitter]"
         title="Suivez-nous sur Twitter" />
    Bloc #5 150px
  </div>
</div>

Les zones particulières

<div class="infos_flash_normal">

ATTENTION ! info normale... 
<div class="infos_flash_normal">
  <strong>ATTENTION !</strong> infos importante >em<normale>/em<...
</div>

<div class="infos_flash_fluo">

ATTENTION ! info importante en fluo... 
<div class="infos_flash_fluo">
  <strong>ATTENTION !</strong> infos >em<importante en fluo>/em<...
</div>

Les tableaux

<table> : tableau par défaut

Titres en gras. Titres centrés
horizontalement
et verticalement.		 Titres
sur fond de couleur
Données calées
en haut et à gauche 		Bordure 1 pixel noir. Largeur du tableau
dans
les
cellules. 		Bordures collabées
(pas d'espace entre les bordures). 		qui s'adapte en fonction
Police normale. Fond transparent partout. des données.
<p> </p> permet
de mettre en retrait
le texte :

Texte en retrait
avec marge à gauche et à droite...

 
<table>
  <tr>
    <th> Titres en gras. </th>
    <th> Titres centrés<br />horizontalement<br /> et verticalement.</th>
    <th> Titres<br />sur fond de couleur </th>
  </tr>
  <tr>
    <td> Données calées<br />en haut et à gauche </td>
    <td> Bordure 1 pixel noir. </td>
    <td> Largeur du tableau </td>
  </tr>
  <tr>
    <td> dans<br />les<br />cellules. </td>
    <td> Bordures collabées<br />(pas d'espace entre les bordures). </td>
    <td> qui s'adapte en fonction </td>
  </tr>
  <tr>
    <td> Police normale. </td>
    <td> Fond transparent partout. </td>
    <td> des données.<br />&lt;p&gt; &lt;/p&gt; permet<br />de mettre en retrait<br />
    le texte :<p>Texte en retrait<br />avec marge à gauche et à droite...</p> </td>
  </tr>
</table>

<table class="style_tableau_0000">

Reprend le style par défaut en supprimant les bordures.

Titres en gras. Titres centrés
horizontalement. 		Titres
centrés
verticalement.
Données calées
en haut et à gauche 		Aucune bordure. Largeur du tableau
dans
les
cellules. 		Bordures collabées
(pas d'espace entre les bordures). 		qui s'adapte en fonction
Police normale. Fond transparent partout. des données.
<p> </p> permet
de mettre en retrait
le texte :

Texte en retrait
avec marge à gauche et à droite...

 
<table class="style_tableau_0000">
  <tr>
    <th> Titres en gras. </th>
    <th> Titres centrés<br />horizontalement. </th>
    <th> Titres<br />centrés<br />verticalement. </th>
  </tr>
  <tr>
    <td> Données calées<br />en haut et à gauche </td>
    <td> <strong class="fond_couleur01">Aucune bordure.</strong> </td>
    <td> Largeur du tableau </td>
  </tr>
  <tr>
    <td> dans<br />les<br />cellules. </td>
    <td> Bordures collabées<br />(pas d'espace entre les bordures). </td>
    <td> qui s'adapte en fonction </td>
  </tr>
  <tr>
    <td> Police normale. </td>
    <td> Fond transparent partout. </td>
    <td> des données.<br />&lt;p&gt; &lt;/p&gt; permet<br />de mettre en retrait<br />
    le texte :<p>Texte en retrait<br />avec marge à gauche et à droite...</p> </td>
  </tr>
</table>

<table class="style_tableau_0100">

Reprend le style par défaut en supprimant les bordures et en élargissant le tableau à 100% de la largeur de la zone affichable.

Titres en gras. Titres centrés
horizontalement. 		Titres
centrés
verticalement.
Données calées en haut et à gauche Aucune bordure. Largeur du tableau
dans
les
cellules. 		Bordures collabées
(pas d'espace entre les bordures). 		à 100% de la largeur
Police normale. Fond transparent partout. de la zone affichable.
<p> </p> permet
de mettre en retrait
le texte :

Texte en retrait
avec marge à gauche et à droite...

 
<table class="style_tableau_0100">
  <tr>
    <th> Titres en gras. </th>
    <th> Titres centrés<br />horizontalement. </th>
    <th> Titres<br />centrés<br />verticalement. </th>
  </tr>
  <tr>
    <td> Données calées en haut et à gauche </td>
    <td> <strong class="fond_couleur01">Aucune bordure.</strong> </td>
    <td> Largeur du tableau </td>
  </tr>
  <tr>
    <td> dans<br />les<br />cellules. </td>
    <td> Bordures collabées<br />(pas d'espace entre les bordures). </td>
    <td> à <strong class="fond_couleur01">100% de la largeur</strong> </td>
  </tr>
  <tr>
    <td> Police normale. </td>
    <td> Fond transparent partout. </td>
    <td> des données.<br />&lt;p&gt; &lt;/p&gt; permet<br />de mettre en retrait<br />
    le texte :<p>Texte en retrait<br />avec marge à gauche et à droite...</p> </td>
  </tr>
</table>

<table class="style_tableau_0111">

Reprend le style par défaut en supprimant les bordures, en élargissant le tableau à 100% de la largeur de la zone affichable et en centrant les données verticalement et horizontalement dans les cellules..

Titres en gras. Titres centrés
horizontalement. 		Titres
centrés
verticalement.
Données centrées
verticalement et horizontalement 		Aucune bordure. Largeur du tableau
dans
les
cellules. 		Bordures collabées
(pas d'espace entre les bordures). 		à 100% de la largeur
Police normale. Fond transparent partout. de la zone affichable.
<p> </p> permet
de mettre en retrait
le texte :

Texte en retrait
avec marge à gauche et à droite...

 
<table class="style_tableau_0111">
  <tr>
    <th> Titres en gras. </th>
    <th> Titres centrés<br />horizontalement. </th>
    <th> Titres<br />centrés<br />verticalement. </th>
  </tr>
  <tr>
    <td> Données <strong class="fond_couleur01">centrées<br />verticalement et horizontalement</strong> </td>
    <td> <strong class="fond_couleur01">Aucune bordure.</strong> </td>
    <td> Largeur du tableau </td>
  </tr>
  <tr>
    <td> dans<br />les<br />cellules. </td>
    <td> Bordures collabées<br />(pas d'espace entre les bordures). </td>
    <td> à <strong class="fond_couleur01">100% de la largeur</strong> </td>
  </tr>
  <tr>
    <td> Police normale. </td>
    <td> Fond transparent partout. </td>
    <td> des données.<br />&lt;p&gt; &lt;/p&gt; permet<br />de mettre en retrait<br />
    le texte :<p>Texte en retrait<br />avec marge à gauche et à droite...</p> </td>
  </tr>
</table>

<table class="style_tableau_1100">

Reprend le style par défaut en élargissant le tableau à 100% de la largeur de la zone affichable (mais cette fois en gardant les bordures).

Titres en gras. Titres centrés
horizontalement. 		Titres
centrés
verticalement.
Données calées à gauche
mais centrées
verticalement 		Bordure fine
(1px noir). 		Largeur du tableau
dans
les
cellules. 		Bordures collabées
(pas d'espace entre les bordures). 		à 100% de la largeur
Police normale. Fond transparent partout. de la zone affichable.
<p> </p> permet
de mettre en retrait
le texte :

Texte en retrait
avec marge à gauche et à droite...

 
<table class="style_tableau_1100">
  <tr>
    <th> Titres en gras. </th>
    <th> Titres centrés<br />horizontalement. </th>
    <th> Titres<br />centrés<br />verticalement. </th>
  </tr>
  <tr>
    <td> Données calées à gauche<br />mais centrées<br />verticalement </td>
    <td> Bordure fine<br />(1px noir). </td>
    <td> Largeur du tableau </td>
  </tr>
  <tr>
    <td> dans<br />les<br />cellules. </td>
    <td> Bordures collabées<br />(pas d'espace entre les bordures). </td>
    <td> à  <strong class="fond_couleur01">100% de la largeur</strong> </td>
  </tr>
  <tr>
    <td> Police normale. </td>
    <td> Fond transparent partout. </td>
    <td> des données.<br />&lt;p&gt; &lt;/p&gt; permet<br />de mettre en retrait<br />
    le texte :<p>Texte en retrait<br />avec marge à gauche et à droite...</p> </td>
  </tr>
</table>

<table class="style_tableau_1011">

Reprend le style par défaut en centrant les données verticalement et horizontalement dans les cellules.

Titres en gras. Titres centrés
horizontalement. 		Titres
centrés
verticalement.
Données
centrées
verticalement
et horizontalement 		Bordure fine
(1px noir). 		Largeur du tableau
dans
les
cellules. 		Bordures collabées
(pas d'espace entre les bordures). 		qui s'adapte en fonction
Police normale. Fond transparent partout. des données.
<p> </p> permet
de mettre en retrait
le texte :

Texte en retrait
avec marge à gauche et à droite...

 
<table class="style_tableau_1011">
  <tr>
    <th> Titres en gras. </th>
    <th> Titres centrés<br />horizontalement. </th>
    <th> Titres<br />centrés<br />verticalement. </th>
  </tr>
  <tr>
    <td> Données<br /><strong class="fond_couleur01">centrées<br />verticalement<br />et horizontalement</strong> </td>
    <td> Bordure fine<br />(1px noir). </td>
    <td> Largeur du tableau </td>
  </tr>
  <tr>
    <td> dans<br />les<br />cellules. </td>
    <td> Bordures collabées<br />(pas d'espace entre les bordures). </td>
    <td> qui s'adapte en fonction </td>
  </tr>
  <tr>
    <td> Police normale. </td>
    <td> Fond transparent partout. </td>
    <td> des données.<br />&lt;p&gt; &lt;/p&gt; permet<br />de mettre en retrait<br />
    le texte :<p>Texte en retrait<br />avec marge à gauche et à droite...</p> </td>
  </tr>
</table>

<table class="style_tableau_1111">

Reprend le style par défaut en centrant les données verticalement et horizontalement dans les cellules et en élargissant le tableau à 100% de la largeur de la zone affichable.

Titres en gras. Titres centrés
horizontalement. 		Titres
centrés
verticalement.
Données centrées verticalement et horizontalement Bordure fine
(1px noir). 		Largeur du tableau
dans
les
cellules. 		Bordures collabées
(pas d'espace entre les bordures). 		à 100% de la largeur
Police normale. Fond transparent partout. de la zone affichable.
<p> </p> permet
de mettre en retrait
le texte :

Texte en retrait
avec marge à gauche et à droite...

 
<table class="style_tableau_1111">
  <tr>
    <th> Titres en gras. </th>
    <th> Titres centrés<br />horizontalement. </th>
    <th> Titres<br />centrés<br />verticalement. </th>
  </tr>
  <tr>
    <td> Données <strong class="fond_couleur01">centrées verticalement et horizontalement</strong> </td>
    <td> Bordure fine<br />(1px noir). </td>
    <td> Largeur du tableau </td>
  </tr>
  <tr>
    <td> dans<br />les<br />cellules. </td>
    <td> Bordures collabées<br />(pas d'espace entre les bordures). </td>
    <td> à <strong class="fond_couleur01">100% de la largeur</strong> </td>
  </tr>
  <tr>
    <td> Police normale. </td>
    <td> Fond transparent partout. </td>
    <td> des données.<br />&lt;p&gt; &lt;/p&gt; permet<br />de mettre en retrait<br />
    le texte :<p>Texte en retrait<br />avec marge à gauche et à droite...</p> </td>
  </tr>
</table>
[Valid XHTML 1.0 Strict] [Valid CSS] [Valid RSS]