28220 sujets

CSS et mise en forme, CSS3

Background image

Pages :
Bonsoir à tous,

Je suis nouveau sur le forum, et je suis en train de me documenter un max sur
les CSS et XHTML pour mes sites internets

Voici ma questions,

Mon texte ne s'affiche pas sur mon image mais juste au dessus
J'ai surement une erreur mais je vois pas...
Voici le lien de ma page test www.ptgv.be/test.html

le code de la page est

<div class="p1">test</div>
le code CSS est :


.p1{
    color: #506506;
    background: url('images/menu_tgv.gif') no-repeat;    
    background-repeat:no-repeat
    width:900px;
    height:55px;
    padding:0px;
    text-align:center;
    font-weight:bold;
    font-size:14px;
    float:center;
}


Merci D'avance

Alaiz
Modifié par alaiz (06 May 2005 - 01:52)
bonsoir,
a écrit :
background-repeat:no-repeat


Il manque un point virgule à la fin là.
Je sais pas si c'est ça enfin essaie.
Salut. Smiley smile
pouleytte a écrit :
bonsoir,
background-repeat:no-repeat


Il manque un point virgule à la fin là.
Je sais pas si c'est ça enfin essaie.
Salut. Smiley smile

Je viens d'essayer, mais çà n'a pas l'air d'être çà le prob
Merci quand même
Bonjour et bienvenue,
 background: url('images/menu_tgv.gif') no-repeat;
background-repeat:no-repeat;

C'est un peu redondant comme code non?
 float:center;

Je ne connais pas de valeur "center" à cet attribut....
Si tu espère centrer ton div il faut proceder ainsi :
body{text-align: center;/*pour IE*/}
div.p1{margin-left: auto; margin-right: auto; /*pour FF*/}

Essaie de rajouter un pour voir.
 margin:0 ;

Voilà c'est tout ce que je vois comme problème potentiel.
Bon courage,
IlSandor.
Modifié par ilsandor (06 May 2005 - 01:26)
J'ai enlevé le float
J'ai ajouté le margin: 0;

Mais toujours sans succès
Merci quand même ilsandor
Bonsoir alaiz et bienvenue sur le forum Alsacréations.

Te serait-il possible d'éditer ton premier post pour insérer ton code dans le BBCode [ code][/code ] (sans les espaces) ?
euh... Ta page test, elle n'est pas un peu pauvre ?

<html>
<head>
<LINK rel="stylesheet" type="text/css" href="styles.css" />
</head>
<div class="p1">test</div>
Selon moi, le minimum acceptable serait :

<!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" lang="fr">
 <head>
  <title>Page Test</title>
  <meta http-equiv="Content-Language" content="fr" />
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
  <div class="p1">test</div>
 </body>
</html>

Avec la DTD de ton choix bien sûr Smiley lol
Stephan a écrit :
euh... Ta page test, elle n'est pas un peu pauvre ?

<html>
<head>
<LINK rel="stylesheet" type="text/css" href="styles.css" />
</head>
<div class="p1">test</div>


Oui je sais, mais même pauvre çà marche po !!! Smiley decu
Stephan a écrit :
euh... Ta page test, elle n'est pas un peu pauvre ?

Ooooouuuuuuuuppppppssssss !!!!
J'avais loupé ca :d, c'est pas de la pauvreté c'est que ca ne correspond à rien...

Essaie ca alaiz je pense que ca ira mieux Smiley cligne .
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="p1">test</div>
</body>
</html>

Amicalement,
IlSandor
Modifié par ilsandor (06 May 2005 - 01:55)
<hors-sujet />

Attention aux guillemets simples dans l'appel de l'image.

background: url('images/menu_tgv.gif') no-repeat;

IE/Mac ne verra pas l'image.

Puisque les guillemets sont inutiles dans ce contexte et qu'ils sont une source potentielle de problèmes, je suggère de ne pas en mettre du tout.

background: url(images/menu_tgv.gif) no-repeat;

Modifié par Stephan (06 May 2005 - 02:07)
alaiz a écrit :
Mon texte ne s'affiche pas sur mon image mais juste au dessus
J'ai surement une erreur mais je vois pas...

C'est ton image de fond qui a un problème, il y a une bande transparente de 17px de hauteur en haut.
alaiz a écrit :
Smiley decu J'ai rajouté les balises manquantes, mais mon texte reste toujours au dessus de l'image Smiley decu

Erreur. Ton texte est exactement positionné sur ton image. C'est ton image qui fait 55px de hauteur. La partie supérieure de l'image est la même couleur que ton fond, voilà pourquoi tu ne vois pas le problème. Smiley cligne
Arrgh ! Brulé Smiley smile
Modifié par Stephan (06 May 2005 - 02:11)
djfeat a écrit :

C'est ton image de fond qui a un problème, il y a une bande transparente de 17px de hauteur en haut.


Donc, il faudrait que je mette un padding pour descendre mon texte ???
alaiz a écrit :


Donc, il faudrait que je mette un padding pour descendre mon texte ???

Yes !
padding-top: 17px;
djfeat a écrit :

C'est ton image de fond qui a un problème, il y a une bande transparente de 17px de hauteur en haut.

Donc dans ce cas un petit 
background-position : 0 -17px;
résoudra ton problème temporairement.
Sachant que la bonne solution est de recadrer ton image.
IlSandor.
Modifié par ilsandor (06 May 2005 - 02:14)
Pages :
Sujet clos
Aller à