probleme de mise en forme

**serpolet** · 08/04/2009, 14h55

Bonjour,

voilà, je vais faire simple, je n'arrive pas à cadrer correctement ma bannière, j'ai tout essayé mais en vain, si quelqu'un avait une idée...

Merci d'avance

Code 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
 
<body>
 
 
 
      <div  id="corps">
 
 
 
                               <ul id="iconmenu">
 
 
 
                                       <li id="panel1c"><a href="imprimerie.html"></a></li>
 
                                       <li id="panel2c"><a href="#"></a></li>
 
                                       <li id="panel3c"><a href="impression.html"></a></li>
 
                                       <li id="panel4c"><a href="#"></a></li>
 
                                       <li id="panel5c"><a href="decoration.html"></a></li>
 
 
 
                                </ul>
 
 
 
		   	         <div id="accueil">
 
 
 
                                 </div>
 
	  </div> 
 
 
 
   </body>

Code CSS:

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
 
#corps
 
{
 
   width: 830px;
 
   margin: auto; 
 
   padding: 5px; 
 
   height:590px;
 
   color: #B3B3B3;
 
   background-color: #;
 
   background-image: url("images/fondcorps.jpg");
 
   background-repeat: repeat; 
 
   border:1px solid black;
 
}
 
 
 
#iconmenu {
 
margin: 0 auto;
 
padding: 3px; 
 
width: 810px;
 
height: 175px; 
 
background: url(images/banfinal.jpg) no-repeat;
 
position: relative;
 
}

je laisse une image pour que vous visualisiez mieux la situation:

Merci d'avance

**desert** · 08/04/2009, 17h14

Bonjour,
Je viens de tester le code que tu viens de donner sous FF3 et je ne constate aucun problème de centrage...
Pourrais-tu fournir le code (x)html et css en entier ? Ou même mieux, une page en ligne ?

**serpolet** · 08/04/2009, 21h45

Je vois ce que cela pourrait faire de plus mais je vais tout de même le faire.

Code 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
 
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="designportfolio.css" />
   </head>
 
   <body>
           <div  id="corps">
 
	            <ul id="iconmenu">
                     <li id="panel1c"><a href="imprimerie.html"></a></li>
                     <li id="panel2c"><a href="#"></a></li>
                     <li id="panel3c"><a href="impression.html"></a></li>
                     <li id="panel4c"><a href="#"></a></li>
                     <li id="panel5c"><a href="decoration.html"></a></li>
                </ul>
 
 
                <div id="accueil">
 
                </div>
	      </div> 
 
 
   </body>
</html>

code CSS:

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
 
 body
{
 
   margin: auto; 
   margin-top: 20px; 
   margin-bottom: 20px;  
   background-image: url("images/arriere.gif"); 
}
 
#corps
{
   width: 830px;
   margin: auto; 
   padding: 5px; 
   height:590px;
   color: #B3B3B3;
   background-color: #;
   background-image: url("images/fondcorps.jpg");
   background-repeat: repeat; 
   border:1px solid black;
   position:relative;
 
}
 
_______________________________________________________________________________ BANNIERE _______________________________________________________________________
 
 
#iconmenu {
 
border:0px;
position: relative;
margin: 15px auto ;
padding: 3px; 
width: 810px;
height: 175px; 
background: url(images/banfinal.jpg) no-repeat;
}
 
#iconmenu li {
left:0px;
border:0px;
width: 162px; 
height: 175px; 
position: absolute; 
top: 0px; 
background: url(images/banfinal.jpg) 0 0 no-repeat; 
display: block; 
list-style: none;
}
 
#iconmenu a {
width: 162px; 
height: 175px; 
display: block; 
border: 0px;
a:active {outline: none;}
}
 
#iconmenu a {
 
	outline: none;
 
}
 
:focus {
 
	-moz-outline-style: none;
 
}
 
#iconmenu a:hover {
border: 0px;
}
#iconmenu #panel1c {
border:0px;
left: 0px;
}
 
#iconmenu #panel2c {
border:0px;
left: 162px;
background-position: -162px 0;
}
 
#iconmenu #panel3c {
border:0px;
left: 324px; 
background-position: -324px 0;
}
 
#iconmenu #panel4c {
border:0px;
left: 486px; 
background-position: -486px 0;
}
 
#iconmenu #panel5c {
border:0px;
left: 648px; 
background-position: -648px 0;
}
 
 
#iconmenu #panel1c a:hover {border:0px; background: url(images/banfinal.jpg) -0px -175px no-repeat;}
#iconmenu #panel2c a:hover {border:0px; background: url(images/banfinal.jpg) -162px -175px no-repeat;}
#iconmenu #panel3c a:hover {border:0px; background: url(images/banfinal.jpg) -324px -175px no-repeat;}
#iconmenu #panel4c a:hover {border:0px; background: url(images/banfinal.jpg) -486px -175px no-repeat;}
#iconmenu #panel5c a:hover {border:0px; background: url(images/banfinal.jpg) -648px -175px no-repeat;}
 
____________________________________________________________ FIN ________________________________________________________________________
 
 #accueil
   {
   width: 800px;
   margin:175px auto; 
   margin-bottom: 20px; 
   padding: 5px; 
   height: 350px;
   color: #B3B3B3;
   background-color: #;
   background-image: url("images/corps.jpg");
   background-repeat: repeat-x; 
   border:1px solid white;
 
}
#accueil p
{color: #ffffff
}
#accueil #ppp
{  color:#c0bfbf;
font-size:14px}
#accueil a
{color:#ffffff;
}

Je vous ai montré de plus une image qui montrait bien que la bannière n'était pas centré, la re-voici.

**desert** · 08/04/2009, 22h05

Tu as bien fais car le problème vient des parties de texte comme __BANNIERE__ ou __FIN__ qu'il faut mettre en commentaires (/**/) sinon on se retrouve avec des perturbations dans l'air.

**serpolet** · 08/04/2009, 22h32

Franchement, vraiment très bête et dire que j'hésitais à l'inclure ou pas...Merci énormément, je me disais que c'était vraiment bizarre!

Merci encore.

Cordialement,

Serpolet.

probleme de mise en forme

CSS

Vue hybride

Discussions similaires

Partager

Partager