Modifier la position d'une image sans affecter les objets/textes liés
Bonjour!
Tout d'abord, étant débutant et complètement perdu dans tous les tutos que j'ai lu (et compris à moitié), je tiens à m'excuser pour toutes les bêtises que je risque de sortir. (Et si je n'ai pas ma place ici, j'en suis encore plus désolé.)
Voici mon problème, j'ai récemment créé un forum gratuit sur un site bien connu et à partir d'un thème déjà existant, j'ai tenté de remplacer la plupart des images/boutons etc pour que ça corresponde un peu plus à mes attentes.
J'ai remplacé une image d'une taille de 1000*20 pixels par une autre de 1000*30 pixels. Et forcément, l'image est rognée.
J'ai donc tenté de modifier certaines valeurs dans la feuille de style CSS (après avoir cherché des informations un peu partout), le problème qui se pose est qu'avec les nouvelles valeurs de largeur/hauteur, mon image apparaît entièrement mais les blocs du dessous sont décalés, le texte est sur-élevé, enfin tout va de travers!
Je vous copie la partie de mon code CSS (qui selon moi est en cause) ci-dessous pour plus de clarté:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
/* Table-------------------------------------------------*/
.forabg {
margin-bottom: 4px;
clear: both;
background-color: #;
background-image: url('http://illiweb.com/fa/empty.gif');
background-repeat: repeat-x;
background-position: 0 0;
border: 2px solid #;
padding: 0px 5px;
}
* html .forabg {
position: relative;
height: 1%;
}
*+ html .forabg {
min-height: 1px;
}
.forumbg {
background-color: #;
background-image: url('http://illiweb.com/fa/empty.gif');
background-repeat: repeat-x;
background-position: 0 0;
border: 2px solid #;
padding: 0px 5px;
margin-bottom: 4px;
clear: both;
}
* html .forumbg {
height: 1%;
}
*+ html .forumbg {
min-height: 1px;
}
.forumbg table.table1 {
margin: 0 -2px -1px -1px;
}
ul.topiclist {
list-style-type: none;
margin: -5;
background-image: url("http://i37.servimg.com/u/f37/11/97/68/43/bordur10.png");
background-repeat: no-repeat;
width: 1000px;
height: 30px;
color: #c1c1c1;
}
* html ul.topiclist {
height: 1%;
}
*+ html ul.topiclist {
min-height: 1px;
}
ul.topiclist li {
display: block;
margin: 0;
}
* html ul.topiclist li {
position: relative;
}
ul.topiclist li.row dl {
padding: 0px 0;
}
ul.forums li.row dl {
min-height: 41px;
}
* html ul.forums li.row dl {
height: 41px;
}
ul.topiclist dt,ul.topiclist dd.dterm {
display: block;
float: left;
width: 60%;
font-size: 1.1em;
padding-left: 30px;
padding-right: 5px;
}
ul.topiclist dfn {
display: none;
}
ul.topics li.header dl.icon dt {
padding-right: 50px;
}
ul.topics dt,ul.topics dd.dterm {
padding-left: 45px;
display: block;
float: left;
width: 50%;
}
ul.topics dd {
display: block;
float: left;
}
ul.forums {
background-color: #212121;
background-image: none;
}
li.header dl.icon {
min-height: 0;
}
li.header dl.icon dt {
padding-left: 0;
}
li.header dt {
font-weight: bold;
}
li.header dd {
margin-left: 1px;
}
dl.icon {
min-height: 35px;
background-position: 10px 50%;
background-repeat: no-repeat;
/*height: auto !important;
*/
/* cssTidy */
/*height: 35px;
*/
/* cssTidy */
height:auto;
}
dl.icon dt,dl.icon dd.dterm {
background-repeat: no-repeat;
background-position: 5px 50%;
/* Center icons */
}
li.header dt, li.header dd {
line-height: 1em;
border-left-width: 0;
margin: 2px 0 4px 0;
color: #ffffff;
padding-top: 2px;
padding-bottom: 2px;
font-size: 1em;
font-family: Verdana,Verdana;
text-transform: uppercase;
}
li.row {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
li.row:hover {
background-color: #;
}
ul.topiclist dd {
border-left: 1px solid transparent;
display: block;
float: left;
padding: 4px 0;
}
ul.topiclist li.header dl dd {
border: none;
}
dd.lastpost span, ul.topiclist dd.searchby span, ul.topiclist dd.info span, ul.topiclist dd.time span, dd.redirect span, dd.moderation span {
display:block;
padding-left:5px;
}
ul.pmlist dt {
padding-left: 45px;
}
ul.forums dd {
border-color: transparent;
border-left-style: solid;
border-left-width: 1px;
}
li.row:hover dd {
border-left-color: transparent;
}
.mod-text {
font-weight: bold;
}
.hierarchy {
display: inline;
text-transform: none;
border: none;
font-size: 1em !important;
} |
L'image dont je vous parle plus haut (et les valeurs de largeur/hauteur que j'ai ajoutées) se situe ici:
Code:
1
2
3
4
5
6
7
8
9
10
|
ul.topiclist {
list-style-type: none;
margin: -5;
background-image: url("http://i37.servimg.com/u/f37/11/97/68/43/bordur10.png");
background-repeat: no-repeat;
width: 1000px;
height: 30px;
color: #c1c1c1;
} |
Après plusieurs heures de recherches, j'ai seulement réussi à retirer un léger décalage en modifiant la valeur "margin" à -5
Je mets ci-dessous deux images pour que vous puissiez voir un peu mieux ce dont je parle:
-voici ce que ça donne sans les valeurs de largeur/hauteur (donc par défaut 1000*20 pixels)
http://i37.servimg.com/u/f37/11/97/68/43/th/sans10.jpg
-et voici avec les nouvelles valeurs (1000*30)
http://i37.servimg.com/u/f37/11/97/68/43/th/avec10.jpg
Donc pour résumer, j'aimerais savoir comment faire (ou ce que je suis censé modifier ou ajouter) pour que mon image apparaisse en entier, sans casser la mise en page.
Et aussi (si possible :oops:), savoir comment centrer le texte dans cette même image. Car j'ai essayé plusieurs techniques trouvées dans divers tuto mais ça ne change pas grand chose (ou alors le texte est complètement inversé, voire illisible...)
Voilà, j'espère avoir été assez clair dans mes propos... (En tout cas j'ai du mal à me comprendre! :cry:)
Je vous remercie d'avance d'avoir eu la patience de lire mon post! Et bien entendu si j'ai oublié l'une ou l'autre chose je suis ouvert à toute question!
Merci encore et bonne soirée.
Edit: je viens de remarquer que j'avais inversé les deux images, du coup ça n'avait plus beaucoup de sens. C'est donc corrigé, même si je doute sincèrement avoir une réponse, même comme ça.
