Le style de GuppY - Blocs

GÉNÉRAL

Outils
- Webdevelopper
Structure

INDEX

Blocs

Boîtes latérales

Menu Extra (Ajoute-menu)

Ordre alphabétique

Trucs et astuces

Lien dans titre d'article

À noter

Calendrier

Préférences

Se reconnecter
---

40 membres

Connectés :

( personne )

Visites

118329 visiteurs

5 visiteurs en ligne

Blocs - 1. Entête

Cet article est disponible en format standard RSS pour publication sur votre site web:
http://cssguppy.astrographisme.com/data/artfr.xml

Dans le fichier style.css, l'entête est définie par 2 ID : headTop et headBottom

Pour :

Définir la hauteur	headTop	height	200px
Définir la largeur	headTop	width	80% ou 950px
Mettre une couleur de fond	headTop	background	#000000
Mettre une image de fond	headTop	background	url(image.png) repeat ou no-repeat selon que l’image doit se répéter ou non
Mettre une image comme barre de fond au menu	headBottom	background	url(image.png)
Définir l’alignement horizontal	headTop	text-align	à droite : right centré : center à gauche : left

#headTop {
color:inherit;
background: url(header.png) no-repeat;
width: 98%;
text-align: center;
height: 200px;
}

Dans l'entête peuvent se trouver :

Le menu - Les bannières - Le logo - Les citations

Menu :

Barre de menu : dans headBottom ►background : #000000 ou url(image.png)

#headBottom {
color:inherit;
background-color : #FFFFFF url(image.png);
margin: 0px 0px;
padding-bottom: 8px;
}

! Attention : Pour que la barre du menu soit sous le menu (!), dans Config boîtes, vous devez placer le menu-icônes en bas, sinon c'est autre chose qui aura l'image de la barre comme fond.

Exemple :

si vous voulez placer (de haut en bas) :

1. le menu-icônes
2. le logo
3. les citations

et que vous avez défini une image comme fond au headBottom, c'est la citation qui aura le fond, pas le menu

Boutons du menu :

div.menuIcons ul li a span, div.tblbox ul li a span { /* lien */
color: #00C000;
text-decoration: none;
font: bold 13px Arial, Helvetica, sans-serif;
position : relative;
padding : 3px 3px 3px 3px;
border : 1px inset #FFFFCC;
background : #FFFFCC;
margin-top : 10px;
margin-right : 3px;
margin-left : 3px;
}

On peut définir les boutons pour :

le lien ►div.menuIcons ul li a span, div.tblbox ul li a span
le lien actif, c'est-à-dire quand on a cliqué dessus ► div.menuIcons ul li a span.current
le lien survolé ►div.menuIcons ul li a:hover span

On peut donner des fonds et/ou couleurs de textes différents pour chaque bouton / onglet. Il faut donc le spécifier pour chacun et, si désiré, dans le cas où le lien est actif ou survolé.	Liste des classes du menu : .menu_home (accueil) .menu_photo .menu_news (nouvelles) .menu_faq .menu_links (liens) .menu_blog .menu_forum .menu_guestbook (livre d'or) .menu_stats .menu_download .menu_admin ... et si vous utilisez les iconesFrame de Jean-Mi : .menu_iconeframe/2 (le chiffre étant le numéro de l'icône) *NOTE:* il faut mettre un anti-slash avant le slash... je n'arrive pas à le mettre ici
Exemple, si je veux donner un bouton différent pour le lien de téléchargement, j'ajoute les lignes suivantes dans le fichier style.css :
div.menuIcons ul li.menu_download a span { background-image: url(download.png); background-repeat: no-repeat; color : #FFFFFF; }	Pour le lien en général
div.menuIcons ul li.menu_download a:hover span { background-image: url(ongletH.png); background-repeat: no-repeat; color : #FFFFFF; }	Pour le lien survolé
div.menuIcons ul li.menu_download a span.current { background-image: url(ongletA.png); background-repeat: no-repeat; color : #FFFFFF; }	Pour le lien actif

► Voir également une astuce de HPSAM pour disposer ailleurs certains liens (sur le forum)

Couleur du texte	color	#000000
Texte souligné, barré, surligné, clignotant	text-decoration	si aucune : none	voir les possibilités ici
Caractéristiques de la police (gras, italique, police, taille)	font	bold 13px arial, helvetica, sans-serif	voir “font” dans Vocabulaire
Marges internes	padding	3px	voir les possibilités ici
Marges extérieures	margin	4px	voir les possibilités ici
Encadrement du bouton	border	1px solid #000000	voir les possibilités ici
Couleur de fond	background	#000000
Image de fond	background	url(image.png)

Note : Pour définir les attributs du menu dans la boîte Menu, c'est dans div.tblbox ul li a span, td.tblbox ul li a span

haut

Bannières :

Classe div.banner

Cette classe définit les attributs des bannières pour l'entête ET le bas de page. Donc, si vous utilisez la boîte Bannières deux fois, en haut et en bas du site, elles auront les mêmes attributs.

Exemple : on ne peut pas placer la boîte Bannières en haut à droite et en même temps en bas à gauche.
Mais on peut placer la boîte Bannières en haut à droite et en bas à droite

Les bannières peuvent se placer à gauche, à droite ou au centre.

div.banner {
background-repeat: no-repeat;
text-align: center;
padding: 30px 70px 20px;
}

haut

Logo :

Classe div.logo

Selon la hauteur de l'image du logo, il faut ajuster la hauteur de l'entête (dans headTop ► height ) sinon tout peut se superposer avec la barre de menu et les citations... l'effet est assez particulier ! eek

On peut placer le logo à gauche, à droite ou au centre.

div.logo {
text-align: center;
padding: 0 30px;
}

haut

Citations :

Classes :

div.quote (bloc citation)
white-space: nowrap;
text-align: center;
padding: 0 4px;
}

div.quote span.cita (texte de la citation)
font: 11px Arial, Helvetica, sans-serif;
font-style: normal;
color: #008000;
text-align: center;
border: 0;
margin: 0;
padding: 0 8px;
}

div.quote span.author (auteur de la citation)
font-style: normal;
}

Pour enlever ou modifier "Texte à méditer" :

Allez dans le fichier inc/lang/fr-web.inc
Chercher Web5 et modifier ou supprimer le texte ► il faut absolument laisser les guillemets.

Si votre site est bilingue français-anglais, faites de même dans le fichier inc/lang/en-web.inc.

haut

Date de création : 06/10/2007 @ 19:57
Dernière modification : 19/05/2008 @ 16:47
Catégorie : Blocs
Page lue 6380 fois

Prévisualiser Imprimer l'article