Meric-Graphisme - Les fonds

Par "Header" on entend la zone qui se situe entre le haut du site et le menu horizontal.

Les différents cas exposés ci-dessous concernent l'insertion d'une image dans cette zone.

En fonction de la configuration du site et de ce que l'on souhaite obtenir, plusieurs solutions peuvent être envisagées.

La largeur du site est libre... elle s'adapte en fonction de la définition de l'écran du visiteur.

L'image qui constitue le header peut avoir une répétition horizontale :

Sans être une obligation absolue, une image pas très large, qui se répète horizontalement se prête très bien à ce cas de figure.

Exemple : on souhaite réaliser un bandeau ayant un dégradé de haut en bas d'une hauteur de 180px.

1° étape :
- Réaliser une image de 180px de haut sur 20px de large.
- L'enregistrer dans le dossier de la skin en la nommant header.jpg.

- Dans le style.css, il faut faire en sorte que cette image se répète horizontalement, afin de couvrir toute la largeur du site.

code

#headtop {
color: inherit;
background: #5AA45A url(img/header.jpg) repeat-x center 0;
color: inherit;
height: 180px;
 margin:0; 
padding: 0;
}

L'image réalisée ci-dessus, est appelée grâce à l'ID headtop.

Commentaires:

- L'image "header.jpg" qui se trouve dans le dossier img de la skin est appelée grâce à la propriété "background" et est répétée horizontalement (sur toute la largeur du site) grâce à l'attribut repeat-x.
- On précise grâce à la propriété "height" la hauteur de l'image (ici : 180px).

L'image qui constitue le header à une largeur fixe (une photo par exemple)

Dans ce cas, il est souvent souhaitable d'empêcher cette image de se reproduire horizontalement.
Le code est très voisin de celui ci-dessus, on remarquera simplement l'attribut no-repeat qui se trouve sur la ligne de la propriété "background".
.

code

#headtop {
color: inherit;
background: #540601 url(img/header.jpg) no-repeat center 0;
color: inherit;
height: 180px;
margin:0; 
padding: 0;
}

L'image réalisée ci-dessus, est appelée grâce à l'ID headtop.

La largeur du site est fixe

Rappel : il est possible dans le fichier skin.inc de la skin de fixer la lageur du site (voir tuto, ici)

L'exemple précédent de l'image qui se répète horizontalement convient également très bien à ce cas de figure.
Celui-ci est surtout adapté lorsqu'on souhaite insérer un header avec un motif bien défini, qui ne doit pas se répéter (une photo par exemple).

code

#headtop {
color: inherit;
background: #5AA45A url(img/header.jpg) no-repeat center 0;
color: inherit;
height: 180px;
 margin:0; 
padding: 0;
}

L'image réalisée ci-dessus, est appelée grâce à l'ID headtop.

Commentaires :

- L'image header.jpg qui se trouve dans le dossier img de la skin est appelée grâce à la propriété "background", l'attribut no-repeat l'empêche de se répéter sur la largeur du site, l'attribut "center" permet de positionner l'image au milieu du site dans le sens de la largeur.
- On précise grâce à la propriété "height" la hauteur de l'image (ici : 180px).

Si le visiteur à un écran plus large (supérieur à 1024px dans l'exemple ci-dessus), les deux bandes unies qui entourent le centre du site, ne sont pas du bel effet. On peut essayer d'harmoniser le tout en choisissant comme pour l'exemple ci-dessous une couleur de fond de site proche de celle du header.

Ou au contraire, par un fond nettement différent, afin d'accentuer le contraste, comme ci-dessous.

code

.body {
color: #000000;
background-color: #DBAF02 ;
margin:0; 
padding: 0;
}

Cet exemple de code illustre le dernier cas...
Il est également possible de placer une image sur cet arrière-plan comme proposé dans ce tuto.

Date de création : 17/02/2009 @ 18:01
Dernière modification : 08/07/2009 @ 16:23
Catégorie : Les fonds
Page lue 7326 fois

Imprimer l'article

Réactions à cet article

Réaction n°9

par mh le 21/12/2011 @ 18:34

Bonjour,

J'essaie en vain de mettre en place un header, imge fixe non répétée mais elle n'apparaît pas dans la skin "ombre-vert". J'ai du marron à la place.

J'ai mis l'mage dans le dossier img, elle est nommée header.jpg, les dimensions : 950x220px et j'ai touché au fichier css en copiant collant ceci :

#headTop { /* header top and middle (logo-banner + citation) */
background: #540601 url(img/header.jpg) no-repeat center 0;
height: 180px;
z-index: 15;
border: 1px solid #914F47;
margin: 0;
padding:0;

Ai-je fait une erreur ?

Merci de votre aide

Réaction n°8	par tony84 le 04/12/2011 @ 16:20
Bonjour, est-il possible de faire fonctionner le header comme le logo, i.e. de lui attribuer un lien vers l'accueil du site ? merci d'avance

Réaction n°7

par dinopaul le 25/02/2011 @ 21:53

re-re moi

ça fonctionne bien avec no-skin, mais pas avec chic_violet

Paul

Réaction n°6

par dinopaul le 25/02/2011 @ 15:06

re moi,

j'ai testé sur un site en construction la couleur de fond s'affiche bien, mais impossible d'avoir l'image

#headTop { /* header top and middle (logo-banner + citation) */
color: inherit;
background: #716EB3 url(img/gylogo.gif) no-repeat center 0;
color: inherit;
height: 180px;
margin : 0;
padding : 0;

Est-ce que je me suis trompé dans le code????

Merci

Paul

Réaction n°5

par dinopaul le 25/02/2011 @ 13:48

Rectification, les textes principaux sont bien noir sur fond jaune, mais ce sont les formulations comme après background qui sont en blanc et illisibles sans surligner. Au premier coup d'oeil, je pensais que tu avais oublié de les mettre

En tout cas tu as fait là un super travail; Merci

Paul

Réaction n°4

par dinopaul le 25/02/2011 @ 13:42

Bonjour Méric,

Ce qui est encore plus étrange c'est que chez moi les boites sont jaunes, donc blanc sur fond jaune je ne les vois pas sans les surligner.

Les mystères de l'informatique

Paul

Réaction n°3	par Meric le 24/02/2011 @ 18:39
Bonjour dinopaul, C'est étrange Le code est écrit en noir sur fond jaune. Méric

Réaction n°2

par dinopaul le 22/02/2011 @ 18:01

re,

En fait, en les surlignant c'est bon.

Réaction n°1

par dinopaul le 22/02/2011 @ 17:59

Bonjour, je ne sais si cela vient de mon portable, mais je n'arrive pas à lire les codes dans les rectangles jaunes.

Paul

Tags Cloud

Tags Cloud

Skins au choix

Choisissez une skin

Skin :

Connexion...

Membres : 418

Visites du jour : (1) martial

[ Mot de passe perdu ? ]

[ Devenir membre ]

Membre en ligne :

Anonymes en ligne : 4

Total visites: 716270

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

Astrographisme
Charli77 Skins V4.6
Chez Papinou
Guppy Skins
Guppy style
Le style de GuppY

Lettre d'information

Outils en ligne

Graphisme

Générateur de boutons

Générateur de fonds
Stickers ou badges
Retoucher les Gifs

CSS

Validation W3C

Divers

Browsers shots

Sondage

Nouvelles des Amis

Chez Papinou

FreeGuppy

StockAstuces

association freeGuppY

Visites

716270 visiteurs

4 visiteurs en ligne

Liens

Haut

Conformément à la loi française Informatique et Liberté (article 34), vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant.

Document généré en 0.73 seconde