Problème dans le CSS

juju.92 · 23/03/2011, 17h29

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 ...

Voila ce que j'obtiens en faisant un impécr :

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

Voici le Css :

Code css :

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
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 html :

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
<?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 ...

Merci d'avance,
Cordialement.

juju.92 · 23/03/2011, 20h38

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.

Meloooo · 24/03/2011, 10h17

Bonjour,
essayes de mettre ton bouton en position:absolute, et de jouer avec les z-index.

Bisûnûrs · 24/03/2011, 10h24

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/

Melcain · 24/03/2011, 17h01

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 xhtml :

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
<?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 css :

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
 
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.

23/03/2011, 20h38	#2
juju.92 Invité de passage Inscription : mars 2011 Messages : 2 Détails du profil Informations personnelles : Sexe : Localisation : France, Hauts de Seine (Île de France) Informations forums : Inscription : mars 2011 Messages : 2 Points : 0 Points : 0	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.
	00

24/03/2011, 10h17	#3
Meloooo Membre actif Mélanie Inscription : novembre 2008 Messages : 275 Détails du profil Informations personnelles : Nom : Mélanie Âge : 22 Informations forums : Inscription : novembre 2008 Messages : 275 Points : 178 Points : 178	Bonjour, essayes de mettre ton bouton en position:absolute, et de jouer avec les z-index.
	00

24/03/2011, 10h24	#4
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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/
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email