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

Fermé
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 - 5 sept. 2009 à 18:17
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 - 30 sept. 2009 à 15:04
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 ^^

26 réponses

le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
5 sept. 2009 à 18:24
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 : "".
0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
5 sept. 2009 à 18:26
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 --'
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
5 sept. 2009 à 18:28
ah! éssayes plutot :
background: url(banpiano.png) 0 0 #000;
0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
5 sept. 2009 à 18:30
Oooh (x2) ... ça affiche un bloc noir cette fois et toujours pas l'image --" (<mais ça avance)
ça signifie quoi ?
(merci hein ^^')
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
5 sept. 2009 à 18:31
background: url(banpiano.png) 0 0;
0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
5 sept. 2009 à 18:34
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;
}
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
5 sept. 2009 à 18:36
#tete
{
width: 353px;
height: 100px;
background: url(ban.png) no-repeat;
margin-top: 30 px;
}


en minuscule, le "B" de background.
0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
5 sept. 2009 à 18:52
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
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
5 sept. 2009 à 18:56
.element1
{
position: absolute;
left: 35px;
top: 100px;
background: url(acceuilban.png) no-repeat;
} 


Pas de "" dans l'url.

0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
5 sept. 2009 à 19:13
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



<div id="tete">

</div>


<div id="menu">

<div class="element1">
<a href="..." ><img src="accueilban.png" alt="accueil" /> </a>
</div>

<div class="element2">
<img src="pianopi.png" alt="pianotine">
</div>

<div class="element3">
<h3>Yaoi, Yuri, ...</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

</div>

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 ^^ ?
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
5 sept. 2009 à 19:21
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"
0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
5 sept. 2009 à 19:25
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 ...
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
5 sept. 2009 à 21:02
euh… @_@

tu aurais une capture d'écran ? (postes là ici par exemple)
0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
6 sept. 2009 à 12:33
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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Pianotine
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="dessin" href="designpi.css" />

</head>
<body>

<div id="tete">

</div>



<div id="menu">

<div class="element1">
<a href="..." ><img src="accueilban.png" alt="accueil" /> </a>
</div>

<div class="element2">
<img src="pianopi.png" alt="pianotine">
</div>

<div class="element3">
<h3>Yaoi, Yuri, ...</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

</div>


Oui ça peut rebuter de voir tout ça --" ... Mais MERCI ^^
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
6 sept. 2009 à 13:38
Je peut repositionner tout ça… Mais faut que je sache comment : c'est ça : http://www.cijoint.fr/cj200909/cijYEUnhH5.png

0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
6 sept. 2009 à 16:42
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 ^^
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
6 sept. 2009 à 17:07
É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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Pianotine</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="dessin" href="designpi.css" />
</head>

<body>
<div id="tete"></div>

<div id="menu">

<div class="element1">
<a href="..." ><img src="accueilban.png" alt="accueil" /></a>
</div>

<div class="element2">
<img src="pianopi.png" alt="pianotine">
</div>

<div class="element3">
<h3>Yaoi, Yuri, ...</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

</div> 
0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
6 sept. 2009 à 17:13
Hrrmm.. ça donne la même chose mais le corps est collé à gauche ><"
0
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 1 057
6 sept. 2009 à 17:49
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)
0
kodjiko-nya Messages postés 24 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 30 septembre 2009 9
6 sept. 2009 à 19:26
Voici : http://www.cijoint.fr/cjlink.php?file=cj200909/cijG9L4dFP.zip

Merci encore , encore... ^^'
0