Skins Méric
Css et skin Guppy

Présentation

Première approche

Présentation

Graphisme

Les fonds

Présentation

Techniques de base

Animations

Astuces|Placer une ancre

Astuces|Texte défilant

Header

Les Ecritures

Les images

Les nouvelles

Les différents blocs

Les menus

Boîtes latérales

Les articles

Les côtés latéraux

Les tables

Personnalisation

Présentation

Le Blog

Les boites css

Les boîtes centrales

Les liens

Menu Horizontal

Contrôle

Divers

Les fonds

Tutos Divers
Base Skn_1
Skin Pas à Pas
Méric' Gifs
+ mise a jour
+ nouveau
Les menus - Horizontal
3 images par onglet...
La petite animation que vous trouverez ici est beaucoup plus parlante qu'un long discours.

Vous trouverez dans le tableau ci-dessous, les classes où il vous faudra intervenir pour agir sur la présentation du menu à onglets.
section_horizontal.jpg
 
Liens repos

[1]

ligne 212		 div.menuIcons ul li a span {
color: #FEFEFE;
background-image: url(onglet1.png);
width: 78px;
line-height: 26px;
padding: 6px 0;
position: relative;
text-decoration: none;
font: bold 11px Arial, Helvetica, sans-serif;
cursor: pointer;

couleur de la police
 



l'onglet au repos est une image
dont la largeur est de78px
et la hauteur 26px
 
Liens actifs

[2]

ligne 230		  div.menuIcons ul li a span.current {
color:#000000;
background-image: url(onglet3.png);
background-color: inherit;
text-decoration: underline;
}		 L'onglet actif (enfoncé) est constitué d'une image différente de la précédente.


Le texte est souligné.
 
liens survolés

[3]

ligne 241		  div.menuIcons ul li a:hover span {
color: #FFFFFF;
text-decoration: none;
background-image: url(onglet2.png);
background-color: inherit;
position: relative;
top: 1px;
left: 1px;
}		 Au survol de la souris, l'onglet change d'aspect (image différente)

la valeur donnée au Top et Left, permet d'obtenir un léger décalage (1px à partir du haut et du côté gauche) afin d'accentuer l'effet  au passage de la souris.
 

Rappel :lors de la modification du fichier style.css, il est impératif de respecter la syntaxe et ne pas oublier notamment le point virgule qui clôture chaque ligne.

Info+ css :
Les polices de caractères
Si pour agrémenter un texte à son goût dans un logiciel de  traitement de texte nous disposons d'une multitude de polices de caractères, il en est pas de même lors de la réalisation d'une page Web. Si on réalise un document destiné à être placé sur un site, c'est bien entendu afin qu'il soit lu dans les meilleures conditions par tous visiteurs, c'est pour cette raison que le choix du type de polices sur la toile est beaucoup plus limité. On ne retient en effet que quelques unes d'entre elles, installées d'origine sur la plupart des machines.



retour déroulement du tuto

.

Date de création : 27/07/2007 @ 17:06
Dernière modification : 31/12/2008 @ 09:22
Catégorie :
Page lue 4967 fois

Imprimer l'article Imprimer l'article

Réactions à cet article

Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Tags Cloud
Tags Cloud
Série 2009 : Skin Index_2 Série 2009 : Skin Index_2 Série 2009 : Skin Index_2 Série 2009 : Skin Index_2 Série 2009 : Skin Index_2 Série 2009 : Skin Index_2 Graphisme - Image animée Les fonds - L'arrière-plan Le header Utiliser Gestplug Utiliser Config Style Bordure des boutons Les nouvelles - Lire la suite ou .../... Les liens - Les trois blocs verticaux Galerie Skins Flash Divers - Boutons et champs Techniques de base - Dégradé Compteur Transférer Lien sur une barre menu Les côtés latéraux - Les boîtes articles Première approche - Le fichier skin.inc Astuces|Placer une ancre - Objectif Les articles - Le bas des articles Nacre avec texture Les tables - Le livre d'or Autre skin dans la série "ondulée2008" Modifier le nom de la skin Techniques de base - Lancement du logiciel Défintion de la police Centrer menu Présentation - Les images Sylvestre_2010 Astuces|Texte défilant - Avec des images Nouvelles skins Les Tables - Le forum Etat initial Les images - inventaire image Les liens - Le menu vertical Body Préparation - Inventaire Présentation - Les différentes zones Présentation - Préambule nécessaire Présentation - Stuctures - Techniques de base - Ouvrir une image Les fonds - Derrière les boîtes Techniques de base - Création calque Présentation - Le Logiciel Présentation - Ordonner menu sections Skins sur commande Divers - Les liens Le Blog - Lire la suite ou .../... Présentation - Le menu sections Skins 2009 Item article avec Rollover Texte défilant - Horizontalement Nouvelle skin en présensation et changement de nom Config thèmes Série Skin Dream Texte défilant - Verticalement Série : skins "Volute_2009" Galerie Skins Méric Graphisme - Bouton dégradé Nouvelle serie de skin Série de skins "Header" Sélectionner une nouvelle skin Contrôle - Validation W3C Propositions Les tables - Les nouvelles Nouvelle skin noire Informations - A lire Graphisme - La palette Page Boîtes transparentes Les boîtes centrales - Interventions Techniques de base - Découper une image Techniques de base - Une image... des images Série Volute : tons pastels Placement des éléments Les menus - Horizontal Présentation - Boîtes articles Les images - Réaliser les images Header - Dégradé avec reflet Les articles - Image nouveau Boîtes latérales - Bouton relief Header - Qbiste Série 2009 : 2° variation Largeur du site Favicon Les côtés latéraux - Le calendrier Série 2009 : Skin Index_2 - Série header2008 Série "nacre" en téléchargement Présentation - Introduction Bloc principaux - Attribuer une couleur Skins à boîtes rétractables. Nouvelle Skin "Dream05" Graphisme - Bouton dégradé Le Blog - Date RSS amis Graphisme - Bouton tube Techniques de base - Placer des guides Astuces|Placer une ancre - Résulats Les nouvelles - Lire la suite ou .../... Chic Jaune Graphisme - Bouton Tube Skin série header (suite) Skin de fêtes Nouvelle skin GuppY Nouveau Tuto : le menu horizontal Skin Ondulée Jaune. Skin meric2008_19 Nouvelle skins GuppY 4.6 Outils en ligne Blog Les skins gyppy se mettent aux rayures - Nouvelle série de skins Boîtes latérales - Fond dégradé Graphisme - Image animée Boîtes translucides Contrôle - La validation W3C Serie 2009 Skin meric08_16 Carnaval Les articles - Boîtes artIcles Série Qbiste 2009 Header - Dégradé simple Skins Guppy en téléchargement Onglet avec des images Onglet avec fond Onglets sur une barre continue Techniques de base - Manipuler les calques Informations - Exemples de créations Skin pour les fêtes Skin série 2009 Les côtés latéraux - Les boîtes libres Skins en téléchargement Tuto "The Gimp" Nouvelle skin Serie Qbiste 2009 Nouvelle version de skin Nouvelle skin Guppy rouge Skin "chic_violet" en téléchargement Serie Index 2009 Skin Signal08_03 en téléchargement Texte défilant - Méthodologie Skins pour les Fêtes Nouvelle skin grise Nouvelles version Une skin verte pour changer... Modifications zones téléchargement volute_5 meric2011_1 Tutos "The Gimp" meric2011_4 Skin "nacre_texture_beige" en téléchargement Présentation - Liste des tutos Ondulée Mauve en téléchargement Astuces|Placer une ancre - Objectif Skin asymétrique Onglets, images non-extensibles Ondulée 2008-Rouge Header 2008-Marron volute_1 Header 2008-Gouttes Reflet Rouge volute_3 2 nouvelles skins Ondulée 2008_bleue Chic noir Chic noir volute_2 Skin "ombre_bleu" Nouvelle série de skins Nouvelle skin GuppY Nouvelle skin pour Guppy Dernière skin de la série "reflet" Série Stripe 2008 Oneside 2008-02 Chic ciel Mirror 2008-03 Chrome bleu Meric 08-10 Profilé bleu Commentaires skin pas à pas Skin pasapas_v1 Dream 01 Degrade bleu Skin Halloween Uniform 2008-05 Série header2008 Spécial commande Skin pour démarrer 2008 Skins série "Profilée" Skin Guppy: Stripe version bleu Serie Moon 2008 Sondage Ronde bleue Mirror 2008 - 02 Skin "Bleu nuit Skin "dégradé bleu" Muguet 2 Muguet 1 Muguet 1 Techniques de base - Fond translucide Images pour boîtes skn_1 Meric 08-06 Ondulée 2008 gris brin du bonheur Meric 08-15 Header 2008-Feu meric2011_11 Meric 08-03 Serie skins "nacre" Meric 08-11 Moon 08-03 Meric 08-08 Nacre Kaki Chic Violet Header 2008-Onde meric2011_2 Header2008 Nature header2008_nature Signal 08-04 Halloween Ombre_bleue Skin boites multicolores Symbole 1 Serie mirror2008 qbiste2 Ronde Bordeaux Tuto Config Style Pâques 1 Meric 08-04 Tricolore Gris Header 2008-Volute meric2011_14 noel_2010 Skin pour résoudre un problème d'onglets Skin de fêtes Meric 08-13 meric2011_5 Skin de Noël pour les enfants Saint Sylvestre 2009 Noël Bambino Saint-Sylvestre Noël Bambino 2 Header 2008 marine Ombre Vert Oneside 2008-03 Uniform 2008-04 Meric 08-07 Noël 1 Noël 2 2 Skins en téléchargement Tuto texte défilant Skin "Terre de feu" Dans le Blog - .../... ou lire la suite Meric 2008-18 Signal 08-02 Nouveau Tuto Meric 08-17 Nouvelle serie de skins 2008 Skin Uniform Dream03 Dans les articles - Placer une ancre page html Compteur Nouvelle serie "la série reflet" Chrome Vert meric2011_12 Nouvelle skin 1° Mai Noel Méric 2009 Tuto : Installer une skin Skin pour GuppY en téléchargement Bande Dégradée Vert Index_1 Chrome Marron Série Ronde Skin série "Moon_08" Nouvelles skins en démo index_3 Série Ombre Saint Valentin Meric 2008-19 Tuto : Les thèmes dans Config Thèmes Ondulée 2008-mauve Série Classic Série Ondulée 2008 Skin Chic_ciel en téléchargement Compteur bordeaux - ctm_07 Nouvelle série : Stripe 2008 Série Liseré 100 000 visiteurs Skin "signal" qbiste1 Meric 08-14 Uniform 2008-01 Uniform 2008-02 Nouvelle série de skins. Ronde Vert-2 Skins de Noël Skin Rouge/Orange Reflet bleu Nacre Texture beige Reflet Vert Oneside 2008-01 Dream 04 Nouvelle skin en téléchargement 2 Nouvelles skins Nacre Gris Skin Ondulée Série Qbiste 2009 Année 2010 Série Reflet Meric 08- 02 Série Uniform Skin spéciale "2 colonnes" meric2011_6 Série Index 2009 Uniform 2008-06 Signal 08-05 Meilleurs Voeux Serie Oneside 2008 Signal 08-03 test Dream 05 Chrome Gris Bas des billets Skin Saint-Sylvestre Skin Muguet Série Fêtes meric2011_13 Série Bande dégradée Série Volute 2009 Moon 08 -01 Mirror 2008-01 Nouvelle boîte articles Série "Moon_08" en téléchargement Série Profilé Moon 08 - 02 Skin Noël 2011 Signal 08-01 meric2011_10 Module de Tchat Série Thème Classic Noir Nacre bleu Ronde Mauve Meric 08-05 2009 Tricolore Vert Chic Gris Glitters Dégradé Rouge Bande Dégradée Rouge taille de police du menus Série 2008 meric2011_8 Skin de Noël meric2011_9 Série Chic Ondulée 2008-jaune Skin en téléchargement Meric 08-16 Série Dégradée Skin "profile_bleu" Header Bande dégradée bleue Skin sur mesures Bouton Skin mirror Skin Uniform (suite) index_4 Ronde Vert Série Chrome Série Chrome Meric 08-09 Chrome Bleu Les images - inventaire image Skin asymétrique Propositions Onglet avec fond Skin Ondulée test Skins pour les Fêtes Bas des billets Mise à jour Skins Bande_dégradé Skin en téléchargement Les articles - Le bas des articles skin Passion-crosscar Techniques de base - Dégradé Utiliser Config Style Header - Qbiste Série Tricolore Header2008 Nature Pâques 1 Série Nacre Les boites - Boite menu Présentation des tutos - Préambule Divers - Boutons et champs Skin "meric_ocean" en téléchargement Mericmatrix Nouveau service : Création de Header et Bannières 4 Nouvelles Skins 3 nouvelles créations Logo et bannière Dans le monde de Guppy Commandes : Skins personnalisées Boîte Skin en direct Skin Mericmatrix - Nouvelle skin Skin "passion-crosscar" Tuto "skin_pasapas" Skin en démo Compteur bleu degrade - ctm_03 Compteur dore - ctm_01 Compteur bleu reflet - ctm_02 Compteur Chrome bleu - cmt_06 Dream02 index_2 Bannière Saint-Sylvestre 2009 Stripe 2008-bleu Qbiste_3 Uniform 2008-03 Header 2008 bleu Reflet ciel Meric 08-01 Nouvelle skin 2 Skins en téléchargement Nouvelle skin grise Skin Mirror Skin série "Moon_08" Mise à jour Skins Bande_dégradé Skins en téléchargement Nouvelles skins Reflet noir Stripe 2008 Gris Graphisme - Créer un Gif animé Bas des billets Symbole 1 Classic marine Les premières skins en présentation Tutos à disposition Skins en téléchargement Skins en direct Skin multicolore Skin reflet_rouge Trois nouvelles skins Skin de fêtes skin chic_gris en téléchargement Skins en téléchargement Skin en téléchargement Série skins chics Tuto "Fond de site" Skins en démo Tuto "Boîtes transparentes" Tuto "bordures boutons" Téléchargement automatique avec Gestplug Le menu sections Section GIF Section GIF Skin tricolor_violine Boîte Admin-Members 2 skins de la série "tricolor" en téléchargement Skin en test Nouvelles skins Téléchargement Bouton Méric-Graphisme Techniques de base - Placer des guides 2 Nouvelles skins de Noël Nouvelle skin grise Transférer une skin par FTP Nouvelle skin en télechargement Chrome gris ou marron ? Optimisation de la section "Skins" Skin en téléchargement Tricolore Violine Nouvelle skin signal Tuto : Menu latéral en rollover Skin de noël Version 4.5 Skin de Noël pour les enfants Skins en téléchargement Header - Dégradé avec reflet Glitters Mise à jour Skins Bande_dégradé volute_5 Contrôle - Validation W3C Nacre Texture beige Oneside 2008-03 Etat initial Nouvelle Skin "Dream05" Body Les côtés latéraux - Les boîtes libres Header 2008-Gouttes Bloc principaux - Attribuer une couleur - Présentation - Les images Les côtés latéraux - Les boîtes articles Onglet avec des images Les côtés latéraux - Les boîtes articles Techniques de base - Fond translucide Skin meric08_16 Techniques de base - Découper une image Les nouvelles - Lire la suite ou .../... Astuces|Placer une ancre - Objectif Les côtés latéraux - Les boîtes libres Lien sur une barre menu Les articles - Image nouveau Largeur du site Largeur du site Les articles - Image nouveau Les articles - Le bas des articles Série Chrome Techniques de base - Création calque Skin spéciale "2 colonnes" Uniform 2008-05 meric2011_6 Tricolore Vert Header - Qbiste volute_5 Graphisme - La palette Header 2008-Feu Les liens - Le menu vertical Techniques de base - Manipuler les calques Techniques de base - Placer des guides Utiliser Config Style Placement des éléments Les fonds - L'arrière-plan Techniques de base - Création calque Skins sur commande Présentation - Les différentes zones Série "nacre" en téléchargement Header - Dégradé avec reflet Onglets sur une barre continue Carnaval Techniques de base - Manipuler les calques Nouvelles version Nouvelles version Les skins gyppy se mettent aux rayures - Header - Qbiste Techniques de base - Ouvrir une image Présentation - Introduction Nouvelle série de skins Ombre Vert Reflet bleu Meric 2008-18 meric2011_2 Config thèmes Astuces|Texte défilant - Horizontalement Techniques de base - Découper une image Bloc principaux - Attribuer une couleur Dream 01 tn requin usa,nike air max classic bw blanc Chic noir Meric 08- 02 Autre skin dans la série "ondulée2008" Mirror 2008 - 02 Noël 2 Nouveau Tuto Dream03 Skin en téléchargement jordan femme retro 6,nike tn pas cher Bloc principaux - Attribuer une couleur Présentation - Ordonner menu sections Les liens - Le menu vertical Section GIF Ombre_bleue Signal 08-04 Série Skin Dream
Skins au choix

Choisissez une skin

Skin :
Connexion...
 Liste des membres Membres : 418

Votre pseudo :

Mot de passe :

[ Mot de passe perdu ? ]

[ Devenir membre ]

  Membre en ligne :
  Anonymes en ligne : 7
Total visites Total visites: 715890  

Record connectés :
Record connectés :Membres: 23

Le 26/12/2007 @ 21:50

Webmaster - Infos
Calendrier
Tchat non-Membres
Vous devez être connectés en tant que membre pour accéder au Tchat
Recherche



Sites skins Guppy
Lettre d'information
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
S'abonner
Se désabonner
Captcha
Recopier le code :
52 Abonnés
Outils en ligne
Sondage
Que souhaiteriez voir sur le site ?
 
Plus de skins ?
Plus de tutos skins?
Plus de trucs et astuces (Blog)?
Trucs et astuces (css) ?
Plus de tutos (GuppY)
Autres
Résultats
Nouvelles des Amis
Visites

 715890 visiteurs

 10 visiteurs en ligne

Liens
^ Haut ^