CSS et resolution ecran

salut tout le monde .
mon probleme est le suivant :)
je voulais mettre une phrase dans la ceinture noire de cette image
http://img812.imageshack.us/img812/3120/69636085.png
donc je l'ai decoupée en deux images :)
la premiere :
www.manga-sekai.com/styles/buttons/cadre.png
la deuxieme :
www.manga-sekai.com/styles/buttons/record.png

maintenant je dois les remettres comme dans l'image initiale :)
voila mon code CSS

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

img.record { position:absolute; right:39%; top:15% } .record{ color:#06a3de; font-size:11px; font-weight:bold; position:absolute; right:41%; top:47.8% } img.cadre{ position:absolute; right:40%; top:37% }

---

bien maintenant passon à HTML
voila mon code

Code:

---

1 2 3 4 5

<img class =\"cadre\"src =\"styles/buttons/cadre.png\"> <img class =\"cadre\"src=\"styles/buttons/record.png\"> <div class =\"record\" align =\"center\"> <font color = white>phrase1</font> ".$record." <font color = white> phrase2 </font>{$df->date($date)}</div>

---

ne vous en faites pas avec le PHP :)

ok
passons au resultat , chez moi qui ai une resolutution de 1366*768
le resultat : www.manga-sekai.com/index.png
pour un autre (d'ailleurs ils sont nombreux :p )
http://img535.imageshack.us/img535/240/34917464.jpg

autre que le code soit correct ou pas , comment gerer ce probleme de resolution ?

Salut,

Tu pourrais peut être utiliser la rotation en css :

Code:

---

1 2	-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);

---

;)

j'ai un peu cherché à propos de rotate , merci , mais je ne pense pas que ça va resoudre mon probleme :(

Bonjour,

pourquoi découpes tu ton image, tu peux simplement ecrire au bon endroit directement non ?

Code:

---

1 2 3 4 5 6

<div class="cadreETfond"> <div class="lecontenu"> <font color = white>phrase1</font> ".$record." <font color = white> phrase2 </font>{$df->date($date)} </div> </div>

---

Et dans le css :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.cadreEtfond{ position:relative; /* Important */ width:350px; height:350px; background-image:url(monimagedefondetdecadre.jgp) }   .lecontenu{ position:relative; /* Important */ width: 330px; height:15px; top:180px; left:13px; }

---

Je n'ai pas testé mais ca devrait a peu près etre bon.

Bonne journée

Ouaiiiiis , pourquoi je l'ai découpée moi ? :D
je vais essayer mais dans ton code il y'a les px qui me traumatisent
C'est que les pixels ont une relation directe avec la resolution donc , je pense pas que ça va resoudre le probleme resolution/design :s
en tout cas je vais essayer ;)

L'idée était de ne pas decouper l'image :p
ça marche maintenant
www.manga-sekai.com
merci tout le monde ça me fait plaisir :cry:

De rien, si on peut encore t'aider n'hesite pas à demander.