Problème dans le CSS

Version imprimable

Bonjour à vous ,
Je viens demander un peu d'aide sur ce forum car il s'avère que je suis bloqué dans l'écriture de mon site ... :cry:
Voila ce que j'obtiens en faisant un impécr :

http://img202.imageshack.us/i/imprecranv.jpg/

Voici le Css :

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
body{
background:#26211d;
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:FFFFFF;
}
 
/* ///////////////////////////////
 
             HEADER
 
////////////////////////////////*/
 
#header{
height:278px;
margin:-20px 0 0 0;
background:url(theme/titre.png) no-repeat top center;
}
 
/* ///////////////////////////////
 
             footer
 
////////////////////////////////*/
 
#menufooter_livre_or ul li{
list-style:none;
float:left;
padding:0;
}
 
#menufooter_livre_or ul li a{
height:66px;
width:175px;
background:url(theme/bouton_livre_or.png) no-repeat top left;
display:block;
}
 
#menufooter_livre_or ul li a:hover{
background-position:bottom left;
}
 
 
 
 
#menufooter_telechargements ul li{
list-style:none;
float:left;
padding:0;
}
 
#menufooter_telechargements ul li a{
height:66px;
width:250px;
background:url(theme/bouton_telechargements.png) no-repeat top left;
display:block;
}
 
#menufooter_telechargements ul li a:hover{
background-position:bottom left;
}
 
}/* ///////////////////////////////
 
             CONTENU
 
////////////////////////////////*/
 
#conteneur{
position:relative;
width:838px;
height:1318px;
margin:0 auto;
background:no-repeat top center #FFFFFF;
}
 
#a_la_une{
position:absolute;
height:296px;
width:838px;
margin:80px 0 0 0;
background:url(theme/cadre_a_la_une.png) no-repeat top center;
}
 
#breves{
position:absolute;
top:664px;
height:173px;
width:563px;
background:url(theme/cadre_breves.png) no-repeat left;
}
 
#articles{
position:absolute;
top:847px;
height:299px;
width:562px;
background:url(theme/cadre_articles.png) no-repeat left;
}
 
#commentaires{
position:absolute;
left:569px;
top:665px;
height:479px;
width:269px;
background:url(theme/cadre_commentaires.png) no-repeat right;
}
 
#footer{
position:absolute;
height:152px;
width:838px;
bottom:11px;
background:url(theme/cadre_footer.png) no-repeat center;
}

et le 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
<?xml version="1.0" encoding="UTF-8"?>
<!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>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title> Julien-ultra </title>
	   <link href="style.css" rel="stylesheet" type="text/css" media="screen"
   </head>
 
   <body>
     <div id="conteneur">
       <div id="header"></div>
	   <div id="a_la_une"></div>
	   <div id="breves"></div>
	   <div id="articles"></div>
	   <div id="commentaires"></div>
	   <div id="footer"></div>
 
		    <div id="menufooter_telechargements">
		    <ul>
		        <li><a href="#"></a></li>
		    </ul>
		    </div>
 
 
	 </div> 
 
 
 
 
 
 
   </body>
</html>

Voila je ne comprend pas d'un seul coup en rechargeant ma page dans le navigateur tout mon conteneur contenant les images " a_la_une", "brèves", etc s'est décalé sur la gauche alors qu'il était centré avant ...
Je ne vois pas comment faire pour le recentrer puisque je n'ai normalement rien touché ...
De plus l'image du footer n'apparait plus depuis le décalage du conteneur ...
Enfin comme vous pourrez le remarquer dans le css j'ai mis une couleur blanche ( #FFFFFF) au conteneur et celle ci ne veux pas apparaitre .

Deuxièmement je n'arrive pas à décaler mon menu , dans l'image que je vous ai fourni , on observe le bouton téléchargements qui apparait en haut mais je n'arrive pas à le placer ou je veux ...celui-ci doit normalement être en bas dans sur l'image footer ...

J'espère que quelqu'un prendra le temps de bien vouloir me répondre et j'espère surtout trouver une réponse ... :ccool:
Merci d'avance,
Cordialement.

23/03/2011, 21h38
juju.92

J'ai trouver cela est dû à l'accolade présente ici:

}/* ///////////////////////////////

CONTENU

////////////////////////////////*/

Sinon j'aimerais vraiment un réponse pour mon bouton je ne m'en sort pas ... je vois pas trop ce qu'il faut mettre pour le déplacer correctement ( dans mon cas dans le dernier bloc ...)
Ou alors quand j'arrive un peu à le déplacer il reste derrière mes bloc ...ce qui fait qu'on ne le voit plus .

Merci d'avance,
Cordialement.
24/03/2011, 11h17
Meloooo

Bonjour,
essayes de mettre ton bouton en position:absolute, et de jouer avec les z-index.
24/03/2011, 11h24
Bisûnûrs

Peut-être en mettant ton soi-disant bouton dans l'élément #footer ça fonctionnerait mieux.

Remarque par rapport à ton code : La mise en page avec des position:absolute à ne plus savoir quoi en faire, c'est vraiment pas top .. Je te conseille de lire :
http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Bonjour
J'ai essayer de reproduire ton screenshot... je ne sais pas trop si ca va t'aider mais bon je poste quand meme...

HTML index.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
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
 
   <head>
       <title> Julien-ultra </title>
	   <link rel="stylesheet" rev="stylesheet" href="main.css" />
   </head>
 
   <body>
     <div id="conteneur">
	 <!-- ******Header****** -->
       <div id="header"><h1>HEADER ici</h1></div>
	   <!-- ******bloc A la une****** -->
	   <ul id="alu" class="bloc">
			<li id="titre_alu" class="titre">A LA UNE</li>
			<li id="contenu_alu" class="contenu">Contenu ici</li>
		</ul>
		<!-- ******bloc Breves, Articles et Commentaires****** -->
		<ul class="bloc">
			<li>
				<ul id="leftB" class="bloc">
					<li>
						<ul id="brv" class="bloc">
							<li id="titre_brv" class="titre">BREVES</li>
							<li id="contenu_brv" class="contenu">Contenu ici</li>
						</ul>
					</li>
					<li>
						<ul class="bloc">
						<li id="titre_a" class="titre">ARTICLES</li>
						<li id="contenu_a" class="contenu">Contenu ici</li>
						</ul>
					</li>
 
				</ul>
			</li>
			<li>
				<ul id="rightB" class="bloc">
					<li id="titre_com" class="titre">COMMENTAIRES</li>
					<li id="contenu_com" class="contenu">Contenu ici</li>
				</ul>
			</li>
		</ul>
		<!-- ******Footer****** -->
	   <ul id="footer" class="bloc">
			<li><ul class="bloc">
				<li id="menufooter_telechargements" class="menu"><a href="#">Telechargement</a></li>
			</ul></li>
			<li><ul class="bloc">
		   <li id="menufooter_livre_or" class="menu"><a href="#">Livre d'or</a></li>
		   </ul></li>
		</ul> 
	 </div> 
   </body>
</html>

CSS main.css

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
 
body {
	background:#26211d;
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:FFFFFF;}
 
a {
	text-decoration: none;
	font-family: font-family: Impact, Charcoal, sans-serif;
	font-size: 200%;
	color: #6c643d;}
 
#conteneur {
position:relative;
width:838px;
height:1318px;
margin:0 auto;}
 
#header{ /*mettre son header ici*/
background: #635d39;
}
 
/*mage entre blocs */
#alu{
	margin-bottom :10px;}
 #brv{
	margin-bottom :10px;
	margin-right :10px;}
 
.bloc{
	list-style:none;
	text-align: left;
	margin:0;
	padding:0;}
 
.titre{
	font-family: font-family: Impact, Charcoal, sans-serif;
	font-size: 200%;
	color: #6c643d;
	background: #d7be85;}
		#titre_alu{
			width:838px;}
		#titre_brv{
			width:563px}
		#titre_a{
			width:563px;}
		#titre_com{
			width:265px;}
 
.contenu{
background: #635d39;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;}
	#contenu_alu {
		height:296px;
		width:838px;}
	#contenu_brv {
		height:296px;
		width:563px}
	#contenu_a {
		height:296px;
		width:563px}
	#contenu_com {
		height: 630px;
		width:265px;}
 
 
#leftB{
	float:left;}
#rightB{
	float:right;}
/*Il ya peut etre un meilleur moyen d'aligner la bar de droite?*/
 
 
#footer{
float:left;
width:838px;
margin:10px;
padding:0;}
#footer ul{
float:left;
margin-right: 15px;}
.menu{
border: 1px dashed;
width: 100%;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#menufooter_telechargements:hover{
color: #635d39;
}
#menufooter_livre_or:hover{
color: #635d39;
}

bonne chance.