18041 sujets
Questions générales et questions de débutants
Bonjour,
Deux solutions s'offrent à toi :
1. faire une image de la taille que tu veux (avec les couleurs indexées le poids ne sera pas énormément différent).
2. donner une largeur au conteneur qui a pour fond cette image (dans ton cas body, la couleur de fond pouvant être attribuée à html ; créer un conteneur spécifique qui englobera tout le site peut également se faire)
Deux solutions s'offrent à toi :
1. faire une image de la taille que tu veux (avec les couleurs indexées le poids ne sera pas énormément différent).
2. donner une largeur au conteneur qui a pour fond cette image (dans ton cas body, la couleur de fond pouvant être attribuée à html ; créer un conteneur spécifique qui englobera tout le site peut également se faire)
Merci de la réponse.
J'avoue n'avoir pas tout compris...
1. Faire une image de la taille que je veux (960px et 250px) pèse 35ko contre 636octets avec la petite image que je souhaite utiliser. (Avec les couleurs indexées...? qu'est ce que ça veut dire ?) (Mon image est créé avec Photoshop en utilisant "les couleurs du web" si c'est ce que tu veux dire...)
J'ai rien compris pour le "2." par contre
J'avoue n'avoir pas tout compris...
1. Faire une image de la taille que je veux (960px et 250px) pèse 35ko contre 636octets avec la petite image que je souhaite utiliser. (Avec les couleurs indexées...? qu'est ce que ça veut dire ?) (Mon image est créé avec Photoshop en utilisant "les couleurs du web" si c'est ce que tu veux dire...)
J'ai rien compris pour le "2." par contre
Je te montre ce que j'ai dans le CSS qui pourrait nous être utile:
Modifié par Noips (07 Dec 2009 - 20:18)
body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#663300 url(images/bg_mini.jpg) repeat-x scroll center top;
color:#696969;
font-family:Arial,Verdana,sans-serif;
font-size:12px;
line-height:21px;
text-align:center;
#header .container {
height:250px;
text-align:center;
z-index:2;
}
.container {
margin:0 auto;
position:relative;
text-align:left;
width:960px;
Modifié par Noips (07 Dec 2009 - 20:18)
C'est fort simple.
J'aurais tendance à dire, transfère tout simplement ton "background:#663300 url(images/bg_mini.jpg) repeat-x scroll center top;"de body, dans ton "header" puis tu ajoute un padding-top à ce dernier correspondant à la dimension de ton image.
Tu pourrais aussi créer un nouveau div, avec les bonnes dimension, au dessus de ton header puis y mettre ton background.
J'aurais tendance à dire, transfère tout simplement ton "background:#663300 url(images/bg_mini.jpg) repeat-x scroll center top;"de body, dans ton "header" puis tu ajoute un padding-top à ce dernier correspondant à la dimension de ton image.
Tu pourrais aussi créer un nouveau div, avec les bonnes dimension, au dessus de ton header puis y mettre ton background.
Salut et bienvenue parmi nous 
En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).
Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.
Bonne continuation
En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).
Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.
Bonne continuation
En effet c'est plus lisible avec le code
juliesunset .... MERCI !
ça marche impec' ! Par contre j'ai pas rajouté de "padding-top" comme tu me dis, c'est nécessaire ?
Voila ce que j'ai donc maintenant :
C'est bon non ? Dis moi, ou rajouter le "padding-top" que je vois la différence stp
MERCI ENCORE juliesunset !
Modifié par Noips (07 Dec 2009 - 21:20)
juliesunset .... MERCI !
ça marche impec' ! Par contre j'ai pas rajouté de "padding-top" comme tu me dis, c'est nécessaire ?
Voila ce que j'ai donc maintenant :
body {background: #663300) no-repeat scroll top center; text-align: center; line-height: 21px; font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #696969;}
.container { text-align: left; width: 960px; margin: 0 auto; position: relative; }
#header .container { text-align: center; height: 250px; z-index: 2; background:#663300 url(images/bg_mini.jpg) repeat-x scroll center top; }
C'est bon non ? Dis moi, ou rajouter le "padding-top" que je vois la différence stp
MERCI ENCORE juliesunset !
Modifié par Noips (07 Dec 2009 - 21:20)
Non le padding-top n'est pas nécessaire, tout dépend du résultat que tu souhaite obtenir.
En supposant que tu veuille obtenir un décalage entre ton image et le contenu de ton conteneur, tu devras donc ajouter un padding à ce dit conteneur. Le padding se trouve à être une marge interne d'un block, qui créera un décalage entre le bord du block et son contenu placé dans le html. On l'utilise de la même façon que le margin, mais se dernier applique des marges à l'extérieur du block.
En supposant que tu veuille obtenir un décalage entre ton image et le contenu de ton conteneur, tu devras donc ajouter un padding à ce dit conteneur. Le padding se trouve à être une marge interne d'un block, qui créera un décalage entre le bord du block et son contenu placé dans le html. On l'utilise de la même façon que le margin, mais se dernier applique des marges à l'extérieur du block.