Problème de postionnement de l'en tête...
kodjiko-nya
Messages postés
25
Statut
Membre
-
kodjiko-nya Messages postés 25 Statut Membre -
kodjiko-nya Messages postés 25 Statut Membre -
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 ^^
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 ^^
A voir également:
- Problème de postionnement de l'en tête...
- Impossible de supprimer en-tête word ✓ - Forum Word
- Un mot est caché dans l’en-tête du document. pour le trouver, modifiez sa couleur. - Forum Word
- Un mot est caché dans l'en-tête du document. pour le trouver, modifiez sa couleur. ✓ - Forum Word
- Nettoyer tete d'impression hp deskjet 2700 - Forum Imprimante
- Supprimer en tete excel ✓ - Forum Excel
26 réponses
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 : "".
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 : "".
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 --'
J'ai enlevé le html, refait un joli block qui est sensé afficher l'image de fond (sans espace ^^)
Mais toujours rien --'
Oooh (x2) ... ça affiche un bloc noir cette fois et toujours pas l'image --" (<mais ça avance)
ça signifie quoi ?
(merci hein ^^')
ça signifie quoi ?
(merci hein ^^')
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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;
}
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;
}
#tete
{
width: 353px;
height: 100px;
background: url(ban.png) no-repeat;
margin-top: 30 px;
}
en minuscule, le "B" de background.
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
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
.element1
{
position: absolute;
left: 35px;
top: 100px;
background: url(acceuilban.png) no-repeat;
}
Pas de "" dans l'url.
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 ^^ ?
[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 ^^ ?
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à :
tu peux virer les "margin" je crois (en absolute, pas besoin).
ensuite, supprimes le "bottom: 1px"
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"
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 ...
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 ^^
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 ^^
Je peut repositionner tout ça… Mais faut que je sache comment : c'est ça : http://www.cijoint.fr/cj200909/cijYEUnhH5.png
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 ^^
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 ^^
Éssayes ça :
Et XHTML
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>
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)
tu peux poster le .zip sur le même site que les images (cijoint)
