CSS et resolution ecran [Résolu]

[AyManoVic]

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 ?

[kOrt3x]

Salut,

Tu pourrais peut être utiliser la rotation en css :

Code :

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

[AyManoVic]

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

[e-fitz]

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

[AyManoVic]

Ouaiiiiis , pourquoi je l'ai découpée moi ?
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

[AyManoVic]

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

[e-fitz]

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