Code CSS et images de background décalées

**bzhades** · 27/03/2010, 10h36

Bonjour à tous

J'ai un petit souci avec une présentation CSS qui ne fait pas ce que je veux (normal, sinon je ne posterais pas)
Une image vaut mieux qu'un long discours : les coins (images) ne sont pas bien calés sur le reste du menu

Mon idée était de récupérer un template déjà fait pour ma galerie piwigo (qui marche lui) qui a les menus présentés de cette manière, et les reprendre sur l'ensemble du site.
La structure du menu est une <table> avec 3 lignes de 3 colonnes, seule la case au centre ayant du contenu
Je n'arrive malheureusement pas à faire en sorte que les coins (qui sont des images) ne soient pas décalés. les images font 15x15 px, j'ai spécifié dans la css height et width

voilà le code HTML et le CSS suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<html>
	<head>
		<title>Titree</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
	</head>
 
<body>
   <!-- L'en-tête -->
	<div id="en_tete">
		<a href="index.html"><img src="../templates/photom/images/banniere.png"></a>
	</div>
	<!-- Les menus globaux -->
	<div id="menu">
			<a href="../index.php"><img src="../templates/photom/images/menu_acc_off.png" Alt="Accueil" onMouseOver="this.src='../templates/photom/images/menu_acc_off_hover.png'" onMouseOut="this.src='../templates/photom/images/menu_acc_off.png'"></a><a href="../blog"><img src="../templates/photom/images/menu_blog_on.png" Alt="Blog" onMouseOver="this.src='../templates/photom/images/menu_blog_on_hover.png'" onMouseOut="this.src='../templates/photom/images/menu_blog_on.png'"></a><a href="../galerie"><img src="../templates/photom/images/menu_gal_off.png" Alt="Galeries" onMouseOver="this.src='../templates/photom/images/menu_gal_off_hover.png'" onMouseOut="this.src='../templates/photom/images/menu_gal_off.png'"></a><a href="../index.php?page=liens"><img src="../templates/photom/images/menu_liens_off.png" Alt="Liens" onMouseOver="this.src='../templates/photom/images/menu_liens_off_hover.png'" onMouseOut="this.src='../templates/photom/images/menu_liens_off.png'"></a><a href="index.php?page=whois"><img src="../templates/photom/images/menu_whois_off.png" Alt="Qui suis-je ?" onMouseOver="this.src='../templates/photom/images/menu_whois_off_hover.png'" onMouseOut="this.src='../templates/photom/images/menu_whois_off.png'"></a>
		</div>
 
	<div id="corps">
 
		<!-- begin sidebar -->
		<div id="sideBar">
 
		  <table id="table_mbCategories">
		    <tr>
		      <td class="blocmenu_up_left"></td>
		      <td class="blocmenu_up"></td>
		      <td class="blocmenu_up_right"></td>
		    </tr>
		    <tr>
		      <td class="blocmenu_left"></td>
		      <td class="blocmenu_in">
		      	<dl>
					<h2>Catégories</h2>
					<ul>
						<li>test1</li>
						<li>test2</li>
				</dl>
			  </td>
		      <td class="blocmenu_right"></td>
		    </tr>
		    <tr>
		      <td class="blocmenu_bottom_left"></td>
		      <td class="blocmenu_bottom"></td>
		      <td class="blocmenu_bottom_right"></td>
		    </tr>
		  </table>
		</div>
		<!-- end sidebar -->
 
 
		<div id="content">
				<div id="post-3">
					<h3 class="storytitle"><a href="" rel="bookmark">Titre du post</a></h3>
 
					<div class="storycontent">
						Contenu du post
					</div>
 
					<div class="feedback">
						0 commentaires
					</div>
 
				</div>
		</div>
	</div>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
body
{
	margin-left: 10px; 
	margin-top : 0px;   
	/*background-image: url("images/fond.png"); */
	background-color : #6e3f1e ;
}
A, INPUT.rateButton {
    color: #005e89;
    background: transparent;
}
 
.storytitle a
{
	color : #000000;
 
}
 
/* L'en-tête */
 
img 
{
	border : none;
}
#en_tete
{
   height: 80px;
   margin-bottom: 0px;
}
#en_tete img
{
	border: none;
}
 
/* Barre de menus principale */
#menu
{
   margin-left : 0px ;
   margin-bottom : 0px;
   padding-bottom : 0px;  
   background-repeat : repeat;
   height : 35px;
   min-width : 1017px;
 
}
#menu.IMG
{
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
}
 
/* Les couleurs */
.red
{
	color : red;
}
 
/* barre de menus latérale*/
#sideBar
{
	float : left;
	margin-left : 10px;
	border : 0;
}
 
#corps
{
   margin-left: 0px;
   margin-right : 10px;
   margin-bottom: 10px;
   padding-top : 5px;
   padding-left: 5px;
   padding-bottom : 10px;
   border-right : solid 1px #000000;
   border-left : solid 1px #000000;
   border-bottom : solid 1px #000000;
   color : #000000;
   background-color: #decd87;
   min-height : 400px;
   min-width : 1020px;
 
}
#content
{
	padding-left : 260px;
 
}
 
#categories 
{
	color : #ffffff;
	margin : auto;
    text-align : center ;
}
#table_content, .table_menu, #table_mbLinks, #table_mbCategories, #table_mbTags, #table_mbSpecials, #table_mbMenu, #table_mbIdentification {
	width:235px;
	border:0;
	padding : 0;
	margin: 0;
	border-collapse : collapse;
}
 
#table_mbCategories .blocmenu_up_right {
	background-image: url(../templates/photom/images/red_up_right.png);
	background-repeat:no-repeat;
	background-position:center;
	width:15px;
	height:15px;
}
#table_mbCategories .blocmenu_up_left{
	background-image: url(../templates/photom/images/red_up_left.png);
	background-position:bottom;
	background-repeat:no-repeat;
	width:15px;
	height:15px;
}
#table_mbCategories .blocmenu_up{
	background-image: url(../templates/photom/images/red_up.png);
	background-position:bottom;
	background-repeat: repeat-x;
	height:15px;
}
 
#table_mbCategories .blocmenu_in {
	background-color:#531808;
}
#table_mbCategories .blocmenu_right {
 background-image: url(../templates/photom/images/red_right.png);
 background-position:left;
 background-repeat:repeat-y;
 width:15px;
}
#table_mbCategories .blocmenu_left {
 background-image: url(../templates/photom/images/red_left.png);
 background-position:right;
 background-repeat:repeat-y;
 width:15px;
}
 
#table_mbCategories .blocmenu_bottom_right{
 background-image: url(../templates/photom/images/red_bott_right.png);
 background-position:top;
 background-repeat:no-repeat;
 width:15px;
 height:15px;
}
#table_mbCategories .blocmenu_bottom_left{
 background-image: url(../templates/photom/images/red_bott_left.png);
 background-position:top;
 background-repeat:no-repeat;
 width:15px;
 height:15px;
}
#table_mbCategories .blocmenu_bottom{
 background-image: url(../templates/photom/images/red_bott.png);
 background-position:top;
   background-repeat: repeat-x;
 height:15px;
}

**coeos.pro** · 27/03/2010, 14h07

Bonjour, c'est normal que ce soit décalé, c'est une table, il faut passer par des div, les tables sont réservé à l'affichage de valeurs.
Il y a peut etre moyen de bidouiller (si tu donnes ton URL, je verrai mieux) sinon faudra modifier le code

**12monkeys** · 27/03/2010, 21h51

Bonsoir

Voici un tutoriel qui explique en détail comment faire ça avec des div et du CSS : http://christophe-f.developpez.com/t...oins-arrondis/

**bzhades** · 28/03/2010, 13h16

Ok, ça marche, merci à vous, j'ai pris les balises div (chose que je fait d'habitude, mais là j'avais la flemme de refaire le template

par contre, faudra quand même qu'on m'explique pourquoi sur piwigo, j'ai ça impeccable, alors que quand je récupère le template sous wordpress, ça me fait cet affichage !

Vivement un système de template unifié d'ailleurs, car passer des .tpl aux.php avec des codes à réapprendre à chaque fois, c'est lourd.

Code CSS et images de background décalées

CSS

Discussions similaires

Partager

Partager