Problème de postionnement de l'en tête...

Question

Bonjour,

Bonjour, j'ai un problème avec la bannière que je n'arrive pas à résoudre, lorsque je veux mettre la bannière avec le CSS, elle na s'affiche pas :

body
{
width: 760px;
margin: auto;
margin-top: 20 px;
margin-bottom: 20 px;
margin-left: 20 px;
background: grey;
text-indent: 10 px;
border-style: none;
}



#en_tete
{
width: 600px;
height: 300px;
background-image: url ("banpiano.png");
margin-bottom: 30 px;
}


Pourtant lorsque je met l'image en html ça marche mais dès que je met un lien , un cadre bleu englobe la moitié de la page et pas que l'image... Je comprend plus grand chose, merci, pour votre aide ^^

le hollandais volant · Answer

Salut!

tu met : background-image: url ("banpiano.png"); 

alors que c'est background-image: url(banpiano.png);

sans l'espace après le "url" ni les guillements : "".

kodjiko-nya · Answer

Ooh.. .. Nan, ça marche pas non plus. 
J'ai enlevé le html, refait un joli block qui est sensé afficher l'image de fond (sans espace ^^)
Mais toujours rien --'

le hollandais volant · Answer

ah! éssayes plutot : 
background: url(banpiano.png) 0 0 #000;

kodjiko-nya · Answer

Oooh (x2) ... ça affiche un bloc noir cette fois et toujours pas l'image --" (<mais ça avance)
ça signifie quoi ? 
(merci hein ^^')

le hollandais volant · Answer

background: url(banpiano.png) 0 0;

kodjiko-nya · Answer

Pourquoi 0 0 ? 

Enfin, j'ai changé, ça n'affiche toujours rien --'

body
{
width: 760px;
margin: auto;
margin-top: 20 px;
margin-bottom: 20 px;
margin-left: 20 px;
background: grey;
text-indent: 10 px;
border-style: none;
}



#tete
{
width: 353px;
height: 100px;
background-repeat: no-repeat;
Background: url("ban.png") 0 0; 
margin-top: 30 px;
}

le hollandais volant · Answer

#tete
{
width: 353px;
height: 100px;
background: url(ban.png) no-repeat;
margin-top: 30 px;
}

en minuscule, le "B" de background.

kodjiko-nya · Answer

Ah oui ^^ 
Merci ça marche, maintenant j'ai un autre question ... Comment on peut mettre un lien sur une image qui apparait grâce au CSS.... Pour être plus explicite, j'ai fait des icone sur photoshop pour les mettre sur un menu qui flottera à gauche mais l'image n'apparait pas non plus... Alors de là à la mettre en tant que lien... --"

#menu
{
float: left;
width: 120px;
margin-top: 5px;
margin-left: 30px;
position: absolute;
left: 35px;
bottom: 1px;
top: 100px
}

.element1
{
position: absolute;
left: 35px;
top: 100px;
background-image: url("acceuilban.png");
background-repeat: no-repeat;
}

Element 1, c'est à dire là où doit être l'icone, n'apparait pas... 

Merci encore

le hollandais volant · Answer

.element1
{
position: absolute;
left: 35px;
top: 100px;
background: url(acceuilban.png) no-repeat;
} 


Pas de "" dans l'url.

kodjiko-nya · Answer

Merci mais l'histoire de l'image dans le CSS j'aime pas trop... [URL=https://imageshack.com/][IMG]http://img197.imageshack.us/img197/3307/pianojl.png[/IMG][/URL] Euh voilà ce que donne : en HTML

ET en CSS body { width: 760px; margin: auto; margin-top: 10 px; margin-bottom: 20 px; margin-left: 20 px; background: grey; text-indent: 10 px; border-style: none; } #tete { width: 600px; height: 300px; background-repeat: no-repeat; background: url(ban.png); } #menu { width: 120px; margin-top: 50px; margin-left: 30px; position: absolute; left: 35px; bottom: 1px; top: 100px } .element1 { float: left; } .element2 { clear: left; position: absolute; top: 1px; left: 10 px; } J'ai pourtant annulé le float: left pour mettre une autre image mais celle-ci part vers la droite et j'arrive pas à la récupérer --" Une réponse à ça s'il vous plait ^^ ?

le hollandais volant · Answer

Le problème c'est tu utilise le positionnement absolute.

C'est très "recommandé". Pas que ça marches pas, mais fait savoir comment fonctionne le CSS pour pouvoir l'utiliser correctement. aussi  là :

#menu
{
width: 120px;
margin-top: 50px;
margin-left: 30px;
position: absolute;
left: 35px;
bottom: 1px;
top: 100px
} 

tu peux virer les "margin" je crois (en absolute, pas besoin).

ensuite, supprimes le "bottom: 1px"

kodjiko-nya · Answer

Ok merci, mais le deuxième icone , pourquoi reste-t-il à droite, et lorsqu'on le selectionne c'est avec un gros bloc qui englobe une partie du texte ...

le hollandais volant · Answer

euh… @_@

tu aurais une capture d'écran ? (postes là ici par exemple)

kodjiko-nya · Answer

http://www.cijoint.fr/cjlink.php?file=cj200909/cijcPfFJcF.png Voilà .. Ne prête pas attention à la couleur ou au contenu... Je veux "seulement" pour remonter la bannière, et aligner à gauche les deux images, qui seront des liens. Mais j'arrive pas à remonter la bannière --" , et je ne parle pas du menu ... Voilà les feuilles CSS body { width: 760px; margin: auto; margin-top: 10 px; margin-bottom: 20 px; margin-left: 10 px; background: grey; text-indent: 10 px; border-style: none; } #tete { width: 600px; height: 300px; background-repeat: no-repeat; background: url(ban.png); } #menu { width : 148 px; position: absolute; left: 35 px; top: 100 px; } #corps { margin-left: 110px; margin-bottom: 20px; padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ background: green; background-repeat: repeat-x; border: 2px solid black; } Et XHTML Pianotine

Oui ça peut rebuter de voir tout ça --" ... Mais MERCI ^^

le hollandais volant · Answer

Je peut repositionner tout ça… Mais faut que je sache comment : c'est ça : http://www.cijoint.fr/cj200909/cijYEUnhH5.png

kodjiko-nya · Answer

Oui sauf que le menu est plus vers la gauche, pour pas qu'il soit trop collé . 

sinon comme ça c'est parfait, . Depuis ce matin j'ai fait quelques modifs, mais le menu est toujours hors de contrôle --" a l'instar de la bannière ><".

Voilà ce que j'ai réussi à donner ^^

http://www.cijoint.fr/cj200909/cijLMFcTZ1.png

Merci encore beaucoup ça me sauve de beaucoup d'heure perdues à galérer sur l'ordinateur ^^

le hollandais volant · Answer

Éssayes ça : body { width: 760px; margin: 10 auto 20 10; background: grey; text-indent: 10 px; border: none; } #tete { width: 600px; height: 300px; margin: auto; /* pour le centrer sur la page */ background: url(ban.png) no-repeat; } #menu { width : 148 px; float:left; } #corps { margin: 0 0 20 200px; padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ background: green; border: 2px solid black; } Et XHTML Pianotine

kodjiko-nya · Answer

Hrrmm.. ça donne la même chose mais le corps est collé à gauche ><"

le hollandais volant · Answer

Tu pourrais me faire un fichier ZIP, avec le HTML, le fichier CSS, et les images afin que je regardes ça de plus prêt (avant j'avais rien testé).

tu peux poster le .zip sur le même site que les images (cijoint)

kodjiko-nya · Answer

Voici      :      http://www.cijoint.fr/cjlink.php?file=cj200909/cijG9L4dFP.zip

Merci encore , encore... ^^'

le hollandais volant · Answer

Merci !
Euh… c'est urgent ou pas ? Car je verrais surement ça dans la semaine (je reprend les cours demains^^), et je ne suis pas tout à fait certain de pouvoir repasser ici… Donc bon…

Mais je remetrais ça ici le week-end prochain.

kodjiko-nya · Answer

http://www.cijoint.fr/cjlink.php?file=cj200909/cijG9L4dFP.zip*

*Voilà*  Merci ^^

kodjiko-nya · Answer

Désolé pour le double post , mozilla beugue --"

Ouais, t'inquiètes, prend tout ton temps ^^

le hollandais volant · Answer

Pas grave^^

voilà ton site : http://www.cijoint.fr/cj200909/cijqMPXecy.zip

J'ai refait un peu les images (j'ai supprimé les "blanc" autours des images, et j'ai fait un bon arrondi pour l'image verte^^


Sinon, j'ai retouché légèrement le HTML et pas mal le CSS : j'ai tout commenté : j'ai écrit dans les fichiers tes erreurs, ce que j'ai fait pour y remédier et pourquoi.

en espérant t'avoir aidé, et en espérant que tu comprenne ce que j'ai changé (je répondrais à tes questions si tu veux).

kodjiko-nya · Answer

Héhé, merci beaucoup j'avais pas vu avant --"

Bon c'est vrai que j'ai laissé ce projet de côté va falloir que je m'y remette, je te remercie encore, et j'en ai des question à poser (mais plus tard) 
Enfin MERCI (pour maintenant et plus tard xP)

kodjiko-nya · Answer

Ok merci merci =)

Problème de postionnement de l'en tête...

26 réponses

Votre réponse

Discussions similaires

Newsletters