Code CSS et images de background décalées
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
http://tbagot.free.fr/css.gif
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:
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:
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;
} |
