Essai CSS

Modification de la taille du titre de page

Police de corps

Texte en h6

De quoi voir la marge en-dessous.

 

Dans le CSS général (Configuration/apparence/Personnaliser/Avancé), on a :

h6{
   margin-bottom: 20px;
   font-size: 1.3em;}

Je vois ce que cela donne sur ma page Essai CSS.

Dans Configuration/Réglages/Zones éditables, j'ajoute un CSS complémentaire

h6{
   margin-bottom: 0px;
   font-size: 2.3em;}

et ça fonctionne très bien.

Je voudrais plus petit, diminuer la taille du titre de la page qui est en h1, mais dans le code html d'une page, le titre d'une page n'est pas seulement en h1.
Exemple : <h1 id="page_main_title" class="main_title">Essai CSS</h1>

Et dans le CSS général, je trouve justement dans Common :

.main_title{
   margin-bottom: 20px;
   padding-bottom: .2em;
   font-size: 3em;
      border-bottom: 1px solid #5b9932;
   }

Je mets en CSS complémentaire la même chose en plus petit.

.main_title{
   margin-bottom: 20px;
   padding-bottom: .2em;
   font-size: 2em;
      border-bottom: 1px solid #5b9932;
   }

Eurêka ! Passer de 3em à 2em, c'est exactement ce qui me fallait. Les titres de pages sont maintenant moins agressifs. Super !!

Modification des éléments de liste dans la Sidebar

Pour diminuer l'espacement des éléments de la liste de toutes les danses, retrouver dans le CSS général /*MENUS VERTICAUX*/, ou /*SUBMENU VERTICAUX*/ ou /*SIDEBAR*/. Pas clair encore.

/*SIDEBAR*/
je peux jouer sur le décalage gauche de la barre verticale, sur sa largeur, sur l'alignement de tout le texte de la barre.

/*MENUS VERTICAUX*/
je peux jouer sur la taille des rectangles verts et blancs, grâce aux espacements par rapport au texte.
Ainsi je modifie en CSS complémentaire
div#sidebar1 ul.menu li a{
      padding:10px 5px 10px 30px;
      display:block;}
en
   div#sidebar1 ul.menu li a{
      padding:3px 5px 3px 15px; /*top right bottom left*/
      display:block;}
pour obtenir des éléments de liste, comme les danses ou les catégories d'agenda, plus rapprochés, et avec moins de décalage gauche.


Modification du style de la balise a

dernière nouveauté le 7 août 2013

Dans la balise <a>, il faut modifier le style grâce à style="   " :

<a style="font-style: italic;" href="http://ceili7poitiers.e-monsite.com/pages/nouveautes.html">nouveauté</a>

 

Modification des tableaux

Tableau 1 avec des liens verts sur fond blanc et des liens blancs sur fond vert

Tous lead around vidéo musique et choré
Tous lead around vidéo musique et choré
Tous lead around vidéo musique et choré
Tous lead around vidéo musique et choré

Tableau 2 avec des liens verts sur fond vert

Tous lead around vidéo musique et choré
Tous lead around vidéo musique et choré
Tous lead around vidéo musique et choré
Tous lead around vidéo musique et choré

Le tableau avec le CSS d'origine donne des liens verts sur fond vert pour les lignes impaires.

Exemple de lien vert sur fond vert
Tableau n°1

 Grâce à un CSS complémentaire, je peux changer la couleur du lien sur fond vert.

couleur du lien modifiée en orange
dans un tableau à 2 lignes

 

 

Modification de la hauteur de l'image du bandeau

Dans un CSS complémentaire, il faut modifier des valeurs de marge dans /*MENUS HORIZONTAUX*/
Par exemple, changer             margin-top:-40px;           en             margin-top:-50px; pour diminuer la hauteur de l'image bandeau et faire remonter le menu horizontal.


Essai de ligne horizontale (verte dans le CSS général, orange dans le CSS complémentaire)

Personnalisation d'une class

Ligne horizontale orange par défaut depuis le CSS complémntaire


puis spécialement verte depuis la class "hrgreen"


essai

pour la ligne horizontale, la balise est <hr>. Son style (ligne verte) est défini dans le CSS général par :

hr{
   margin:10px 0;
   color:#9dba4e;                         /*vert pour IE8*/
   background-color:#9dba4e;}     /*vert pour FF*/

Je la transforme en orange par un CSS complémentaire :

hr{
   margin:10px 0;
   color:#f60; /*orange*/
   background-color:#f60;} /*orange*/

Et en ajoutant :

.hrgreen{
   margin:10px 0;
   color:#5b9932;
   background-color:#5b9932;}

je crée une class de <hr> que j'appelle au moment que je veux dans une page par :

<hr class="hrgreen" />

 

Les attributs de texte avec la balise span

décalage (horizontal, vertical), adoucissement, couleur

<p>
text-shadow:4px 4px 2px black;
</p>

essai d'ombrage


Un ombrage centré

bonne année

 

 

 

Des exercices de mise en page avec jsFiddle (nécessite Google Chrome)

 

Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site