Problème positionnement de texte

sur une image de fond

7 février 2006 à 18:21:03

Salut les gens

Je demande votre aide parce que j'ai un chti problème de CSS que je n'arrive pas à résoudre :euh:

Voici mon problème :
http://www.zelda-soul.com/?code=essai&jeux=oot

Comme vous pouvez le deviner,j'aimerais que le texte ( à savoir [Test] - [Astuces] ) soit bien positionné sur mon image de fond .

Voici mon code (x)HTML :

<p class="image"><img src="design/jeux.jpg" alt="Les Jeux" /></p>
<p class="jeux">
<a href="?jeux=oot&type=test">[Test]</a> - <a href="?jeux=oot&type=astuce">[Astuces]</a>
</p>

Et voici mon code CSS :

.jeux {
height: 100px;
overflow:hidden;
background-image: url(/design/navigation.jpg);
background-repeat: no-repeat;
background-position:center;
}

.image {
text-align: center;
}

Merci d'avance

Si vous voulez critiquer mon site ou me donner des suggestions, c'est par la : http://www.siteduzero.com/forum-83-14892-avis-mon-site-en-preparation.html

JulFisher

7 février 2006 à 18:27:17

Fais plutot une image pour le titre avec un fond et bordures bleus, et mets le texte dans un paragraphe avec bordures et fond bleus, ce sera beaucoup plus simple.

Ziir

7 février 2006 à 19:41:47

J'ai peur que sur une image et sur une page web la couleur ne soit pas la même ...

strucky

7 février 2006 à 19:49:03

Et où doivent précisément se positionner tes liens sur ton image ?

Ziir

7 février 2006 à 20:40:29

A 5 px du coté gauche de l'image et juste en dessous de la ligne verticale ( 42px par rapport au haut de l'image )

strucky

7 février 2006 à 21:15:11

Alors ce que j'aurais fait :

Donner à ton paragraphe les dimensions de ton image 400*100.

Utiliser une liste <ul> pour l'affichage de tes liens.

Ce qui donnerait :

.jeux {
height: 100px;
width: 400px;
margin: auto;
background-image: url(/design/navigation.jpg);
}

.jeux ul {
margin: 42px 0 0 5px;
height: /* à toi de voir */
}

.jeux ul li {
display: inline;
float: left;
margin-right: 5px;
}

<p class="jeux">
<ul>
<li><a href="?jeux=oot&type=test">[Test]</a>
<li><a href="?jeux=oot&type=astuce">[Astuces]</a></li>
</ul>
</p>

Y'aura certainement quelques trucs à corriger.

Ziir

7 février 2006 à 21:48:23

Merci pour ton aide mais ca me marche malheuresement pas

regarde par toi même ...

strucky

7 février 2006 à 22:19:13

Hum, c'est bizarre que ta liste sorte de ton paragraphe...

Tu as oublié une fermeture de <li> dans ton code, mais je ne pense pas que ça vienne de ça.

Ziir

7 février 2006 à 22:55:19

j'ai refermé le li mais ca ne change rien ...

strucky

7 février 2006 à 23:22:09

Bon, j'ai trouvé, remplaces le paragraphe par un div, j'ai essayé, ça fonctionne.

Ensuite tu mettras un padding à 0 dans ul.

Voilà

Ziir

7 février 2006 à 23:29:16

Bhein heu apparemment non

Pourtant je pensse avoir bien fait ...

strucky

8 février 2006 à 8:00:34

C'est bizarre ...

Je sais pas si ça vient de là, mais tu as encore une erreur dans ton html :

Ta balise li, n'est pas fermée.

Ziir

8 février 2006 à 11:59:27

Malheuresement non, ca ne vient pas de la

Je reposte mon code changé :

<p class="image"><img src="design/jeux.jpg" alt="Les Jeux" /></p>
<div class="jeux">
<ul>
<li><a href="?jeux=oot&type=test">[Test]</a></li>
<li><a href="?jeux=oot&type=astuce">[Astuces]</a></li>
</ul>
</div>

et mon CSS :

.jeux {
height: 100px;
width: 400px;
margin: auto;
background-image: url(/design/navigation.jpg);
}

.jeux ul {
margin: 42px 0 0 5px;
padding: 0px;
}

.jeux ul li {
display: inline;
float: left;
margin-right: 5px;
}

.image {
text-align: center;
}

JulFisher

8 février 2006 à 13:59:54

Comment que vous battaillez

Si tu m'avais écoutais

http://julfisher.free.fr/divers/ziir.zip

Ziir

8 février 2006 à 15:04:52

C'est pas exactement ce que je voulais mais je pensse pouvoir l'arranger

Merci julfisher

Heu par contre j'aimerai bien que le texte soit que a 5px de la bordure de gauche et non au millieu

JulFisher

8 février 2006 à 16:22:03

#centre ul {
padding: 0;
margin: [haut]px [droite]px [bas]px [gauche]px;
}

Voilà, il te suffit de mettre les valeurs que tu veux