Image sur haut de page ; non centré

Question

assobachant

23 Mar 2006 à 11:26

Bonjour a vous tous ; je me présente
newbie en html;php;spip et css j'essaye de me debrouillé comme je peux.

Malheureusement souvent je ne m'en sort pas; je fais donc appel a vous...

voici le début de mon css :

#bandeau {
width : 700px;
border: 1px solid #000000;
background-repeat: no-repeat;
background-image : url(http://www.bachant.info/IMG/Asso-B@CH@NT.gif);
background-attachment : fixed
img {
display: block;
}}
html,body {
background-color :white;
background-image: url(http://www.bachant.info/IMG/fond.png);
background-attachment : fixed;
}

Donc si j'ai bien compris les tutos ;
je creer un haut de page avec une image et un fond de page .

le pb c'est que je n'arrive pas a centrer mon images en haut de page

www.bachant.info

j'espére etre clair et merci du coup de pied ou de la piste.....

@micalement

fvsch

23 Mar 2006 à 12:14

Penses à utiliser le balisage BBcode quand tu cites du code (HTML, CSS ou autre). Ça facilite grandement la lecture. Merci.


#bandeau {
width : 700px;
border: 1px solid #000000;
background-repeat: no-repeat;
background-image : url(http://www.bachant.info/IMG/Asso-B@CH@NT.gif);
background-attachment : fixed
img {
display: block;
}}

La syntaxe est incorrecte. Tu ne peux pas imbriquer un groupe sélecteur {propriétés} à l'intérieur d'un autre.


#bandeau {
	width : 700px;
	border: 1px solid #000000;
	background-repeat: no-repeat;
	background-image : url(http://www.bachant.info/IMG/Asso-B@CH@NT.gif);
	background-attachment : fixed;
}
img {
	display: block;
}

Cette version corrigée devrait déjà mieux passer.

Maintenant, pour résoudre ton problème, il faudrait positionner ton image de fond. Par défaut, elle se place en haut à gauche. Tu peux corriger ça avec une propriété background-position ou encore tout mettre dans une unique propriété background.

background: #c1c1c1 url(http://www.bachant.info/img/asso-bachant.gif) no-repeat center top;

Au passage, j'ai rajouté une couleur de fond pour remplir les espaces qui seront laissés vides. J'ai aussi changé le nom du dossier (en minuscules) et du fichier (en minuscules et SURTOUT SANS AROBASES !). Je te conseille fortement de répercuter ces changements sur tes fichiers.
Pour les fichiers pour le web, il vaut mieux proscrire les majuscules (pas super important, mais le tout minuscules facilite la vie), et surtout les espaces (utiliser des tirets, des tirets de soulignement, ou pas d'espaces du tout) et les caractères spéciaux. Rapport à des problèmes de compatibilité, de normes, etc.

assobachant

23 Mar 2006 à 14:10

mpop a écrit :
Penses à utiliser le balisage BBcode quand tu cites du code (HTML, CSS ou autre). Ça facilite grandement la lecture. Merci.

Exact; je ne faute plus Smiley confused

mpop a écrit :


#bandeau {
width : 700px;
border: 1px solid #000000;
background-repeat: no-repeat;
background-image : url(http://www.bachant.info/IMG/Asso-B@CH@NT.gif);
background-attachment : fixed
img {
display: block;
}}

La syntaxe est incorrecte. Tu ne peux pas imbriquer un groupe sélecteur {propriétés} à l'intérieur d'un autre.


#bandeau {
	width : 700px;
	border: 1px solid #000000;
	background-repeat: no-repeat;
	background-image : url(http://www.bachant.info/IMG/Asso-B@CH@NT.gif);
	background-attachment : fixed;
}
img {
	display: block;
}

Cette version corrigée devrait déjà mieux passer.

Le pb c'est que si j'applique le code corrigée; je ne voie plus l'image.

mpop a écrit :

Au passage, j'ai rajouté une couleur de fond pour remplir les espaces qui seront laissés vides. J'ai aussi changé le nom du dossier (en minuscules) et du fichier (en minuscules et SURTOUT SANS AROBASES !). Je te conseille fortement de répercuter ces changements sur tes fichiers.
Pour les fichiers pour le web, il vaut mieux proscrire les majuscules (pas super important, mais le tout minuscules facilite la vie), et surtout les espaces (utiliser des tirets, des tirets de soulignement, ou pas d'espaces du tout) et les caractères spéciaux. Rapport à des problèmes de compatibilité, de normes, etc.

bon ben voila j'ai fait comme tu a dit. le seul hic; c'est le dossier img.
sous "spip" ce dossier est expressement nommé "IMG"; bon sachant cela, ça ne doit pas trop géné si ?

fvsch

23 Mar 2006 à 15:10

assobachant a écrit :
Le pb c'est que si j'applique le code corrigée; je ne voie plus l'image.

Laquelle, l'image de fond ?
Ça me semble étrange. Tu es sûr d'avoir bien respecté la syntaxe (accolades bien ouvertes et fermées comme il faut) ?

assobachant a écrit :
bon ben voila j'ai fait comme tu a dit. le seul hic; c'est le dossier img.
sous "spip" ce dossier est expressement nommé "IMG"; bon sachant cela, ça ne doit pas trop géné si ?

Non, on peut garder des majuscules dans les noms de fichiers. En fait, le seul problème avec les majuscules c'est que si tu fais un lien vers un fichier "Test" mais que dans ton lien tu as juste "test", certains serveurs l'accepteront, d'autre pas. Donc pour se simplifier la vie on met souvent les noms de fichier en minuscules. Mais si c'est en majuscules, la seule restriction c'est de bien mettre les majuscules là où il faut dans les liens.

Par contre, éviter les caractères spéciaux, là c'est très très recommandé.

assobachant

23 Mar 2006 à 17:51

Bon j'espére que l'eleve sera a la hauteur des cours du professeur; car j'aime comprendre...........

mon début de css :


#html,body {
        background-color :white;
        background-image: url(http://www.bachant.info/img/fond.png);
        background-attachment : fixed;
}
#bandeau {
	width : 700px;
	height: 50px;
	border: 1px solid #000000;
	background-repeat: no-repeat;
	background-image : url(http://www.bachant.info/img/asso-bachant.gif);
	background-attachment : fixed;
	background-position : top center;

}
#corps	{
	width : 700px;
	border: 1px solid #000000;
}

le début du résultat :

www.bachant.info

L'image est donc bien centré sur le bloc; par contre elle ne prend pas la largeur.

faut t'il redéfinir la taille de l'image ?.


#bandeau {
	width : 700px;
	height: 50px;
	border: 1px solid #000000;
	background-repeat: no-repeat;
	background-image : url(http://www.bachant.info/img/asso-bachant.gif);
	background-attachment : fixed;
	background-position : top center;

}

==> Ensuite si j'ai bien compris on peu ecrire sur une même ligne donc comme ça est ce bon ?
#bandeau {
width : 700px;
height: 50px;
border: 1px solid #000000;
background-image : url(http://www.bachant.info/img/asso-bachant.gif);no-repeat;fixed;top center;
}


img {
	display: block;
}

Quelle été donc l'utilité ci dessus; puisque avec ou sans; je ne voie pas de différence.

MERCI de m'aider a progresser.

assobachant

23 Mar 2006 à 18:07

Afin d'avoir quelquechose qui tien a peu prés j'ai contourné l'histoire de la taille de l'image en utilisant la balise :

background-color: #C0C0C0 ;

bon ce qui donne


#bandeau {
	width : 700px;
	height: 50px;
	border: 1px solid #000000;
	background-repeat: no-repeat;
	background-image : url(http://www.bachant.info/img/asso-bachant.gif);
	background-attachment : fixed;
	background-position : top center;
	background-color: #C0C0C0 ;  
}

y a t'il moyen de simplifier et pour vous est ce bon ?

fvsch

23 Mar 2006 à 19:41

Houlà, ya du boulot Smiley confus

------------
Pour commencer, on va tenter de respecter la syntaxe CSS, ça serait mieux. Donc exit ceci :

#html,body {propriétés CSS}

qui signfie : « Applique les propriétés CSS suivante à l'élément HTML dont l'identifiant est "html" (de type <balise id="html">...</balise>) ET à l'élément body ».
Vu les propriétés utilisées, on peut se contenter de les appliquer à body (on vire la première partie du sélecteur, virgule incluse). Rappel : la virgule sert à cummuler plusieurs sélecteurs CSS différents.

------------
Ensuite :

background-position : top center;

L'ordre pour les valeurs est position latérale position verticale. Il est possible que la syntaxe utilisée ci-dessus fonctionne malgré tout, mais autant être rigoureux et utiliser

background-position : center top;

------------

background-image : url(http://www.bachant.info/img/asso-bachant.gif);no-repeat;fixed;top center;

Houlà catastrophe !
Je veux bien reconnaître que je suis allé un peu vite en vous donnant un exemple une écriture compacte (qui utilise la propriété généraliste background plutôt que ses diverses déclinaisons), mais il ne faudrait pas non plus modifier allègrement l'exemple en question, en rajoutant par exemple des point-virgules qui en CSS signifient « Fin d'un couple propriété + valeur(s) » ! Ici, les différentes valeurs s'appliquent à la même propriété, et sont séparées par des espaces. La syntaxe est la suivante :

background: [i]couleur_de_fond[/i] url([i]adresse_de_l'image[/i]) [i]mode_de_répétition[/i] [i]positionnement_latéral[/i] [i]positionnement_vertical[/i];

On n'est pas obligé d'utiliser tous les types de valeurs, on peut se contenter par exemple d'un :

background: url(machin.png) no-repeat;

Voire même cummuler cette instruction avec des instructions plus spécifiques comme background-position ou background-attachment.

------------

assobachant a écrit :
img {display: block;}
Quelle été donc l'utilité ci dessus; puisque avec ou sans; je ne voie pas de différence.

Une image appelée depuis la page HTML (balise HTML <img>) est un élément de type en-ligne. C'est à dire que son comportement est le même que celui d'un caractère au milieu d'une ligne de texte. Si on place une image au sein d'un paragraphe, comme par exemple la frimousse suivante : Smiley ravi

, elle s'insère dans le texte au même titre qu'une lettre. Avec une grosse image, on a simplement le même effet qu'avec une très grosse lettre.

Maintenant, via les CSS, on peut dire au navigateur de traiter les images comme des éléments de type bloc. C'est à dire que toute image (le sélecteur CSS ci-dessus vise l'essemble des éléments "img" du document, c'est à dire toutes les images à l'exception des images de fond, qui ne sont pas appelées à l'aide d'une balise <img>) se comportera comme un paragraphe, par exemple. Chaque image provoquera (sauf instruction contraire) un retour à la ligne avant et après l'image, comme c'est le cas avec un paragraphe.

Maintenant, pour ce qui est de l'utilité de cette instruction dans votre cas précis, je n'en ai pas la moindre idée Smiley lol

. Si vous avez récupéré du code à droite et à gauche, il peut s'agir d'un reliquat qui avait son utilité dans le contexte où vous l'avez pioché, mais pas dans le votre.
Modifié par mpop (23 Mar 2006 - 19:42)

fvsch

23 Mar 2006 à 19:45

Enfin, pour finir :
Je n'avais pas compris que vous vouliez étirer l'image sur toute la largeur du bloc (700px). En CSS, c'est tout à fait impossible. Il vous faut une image de 700px de large. Il faut donc retravailler l'image elle-même.

Si on avait eu une image appelée depuis le fichier HTML via une balise <img>, on aurait pu préciser une largeur de 700px pour cette image. Je déconseille cependant très fortement cette technique : les navigateurs effectuent à redimmensionnement un peu barbare, sans lissage, et le résultat est particulièrement laid (pixellisé, déformé, etc.).

assobachant

23 Mar 2006 à 21:41

mpop a écrit :
Enfin, pour finir :
Je n'avais pas compris

c'est pourquoi j'ai précisé; je vous remercie grandement du coup de main et je me rend-compte du chemin a parcourir pour maitriser le css.

j'espére que ce qui suit vous plaira dans la façon de coder, tant qu'a faire autant apprendre les bonnes régles de suite.


#html,body {propriétés CSS}
{
        background-color :white;
        background-image: url(http://www.bachant.info/img/fond.png);
        background-attachment : fixed;
}
#bandeau {
	width : 700px;
	height: 50px;
	border: 1px solid #000000;
	background: #C0C0C0 url(http://www.bachant.info/img/asso-bachant.gif) no-repeat top center fixed;
}

toutefois j'ai réussi a obtenir le résultat souhaité.

fvsch

23 Mar 2006 à 22:02

Pour compléter :
http://www.openweb.eu.org/articles/background_css/

Ensuite, quelques petites corrections :

body {
        background-color :white;
        background-image: url(http://www.bachant.info/img/fond.png);
        background-attachment : fixed;
}
#bandeau {
	width : 700px;
	height: 50px;
	border: 1px solid #000000;
	background: #C0C0C0 url(http://www.bachant.info/img/asso-bachant.gif) no-repeat [b]center top[/b] fixed;
}

Je pense qu'une petite révision de base sur la syntaxe CSS (sélecteurs, propriétés, etc.) avant de se lancer dans le détail de l'utilisation des propriétés. Parce qu'une propriété ou un sélecteur mal écrit, ça ne marche pas, c'est la tolérance zéro Smiley cligne

http://www.openweb.eu.org/articles/initiation_css/
http://www.openweb.eu.org/articles/cascade_css/

Numéro complémentaire :
http://web.covertprestige.info/cours-html/
(c'est de moi, mais pas sûr que ça soit très clair, par contre...)
Modifié par mpop (23 Mar 2006 - 22:03)

assobachant

23 Mar 2006 à 22:14

Merci pour tous

Voila de la lecture................
avec un ctrl+d dans firefox ; je retrouve ça facilement.

Sujet clos

CSS et mise en forme, CSS3

Image sur haut de page ; non centré