Problème de centrage de ma page

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour à tous,

j'ai un problème vis à vis de ma page web. J'ai utilisé pas mal de balise mais impossible de centrer ma page. Voicic les codes :

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
 
 
#global_ {
    position:absolute;
    left:0px;
    top:0px;
    width:1000px;
    height:1000px;
    margin: center;
}
 
 
#akolite_ {
    position:absolute;
    left:22px;
    top:34px;
    width:333px;
    height:39px;
}
 
#forum_ {
    position:absolute;
    left:386px;
    top:132px;
    width:210px;
    height:208px;
}
 
#site_ {
    position:absolute;
    left:673px;
    top:132px;
    width:207px;
    height:208px;
}
 
#tuto_ {
    position:absolute;
    left:102px;
    top:133px;
    width:208px;
    height:208px;
}
 
#tete_ {
    position:absolute;
    left:566px;
    top:563px;
    width:434px;
    height:331px;
}
 
#foot_ {
    position:absolute;
    left:0px;
    top:894px;
    width:1000px;
    height:106px;
}

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
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>akolite</title>
</head>
<body style="background-color:#FFFFFF;">
 
 
 
 
<div id="global_">   
 
    <div id="akolite_">
        <img id="akolite" src="images/akolite.gif" width="333" height="39" alt="" />
    </div>
    <div id="forum_">
        <img id="forum" src="images/forum.gif" width="210" height="208" alt="" />
    </div>
    <div id="site_">
        <img id="site" src="images/site.gif" width="207" height="208" alt="" />
    </div>
    <div id="tuto_">
        <img id="tuto" src="images/tuto.gif" width="208" height="208" alt="" />
    </div>
    <div id="tete_">
        <img id="tete" src="images/tete.gif" width="434" height="331" alt="" />
    </div>
    <div id="foot_">
        <img id="foot" src="images/foot.gif" width="1000" height="106" alt="" />
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

Alors je suis débutant dans le domaine et il y a fort à parier que les codes soient pour la plus part erronés.

Merci.

13/01/2008, 00h24
Kerod

Hum..L'histoire de faire générer un code par ImageReady ou autre du même est pas trop bon :aie:

Par exemple, il te met des position: absolute partout alors que tu en aurais peut être pas besoin.

Et le souci pour ton centrage vient justement de là. Il faudrait soit retirer tout tes absolute ce qui te permettrait d'utiliser les bonnes propriétés soit tu les gardes et tu modifies ton margin pour lui donner des %.
13/01/2008, 00h35
kaalat

Merci beaucoup pour cette rapidité et l'edit de mon thread.

Cette page sera mon index et en gros elle servira de redirection vers :

1 - le forum
2 - le site
3 - les tutoriaux

Y a t-il une solution à privilégier parmis les 2 que tu m'as cité ?

( si je retire toutes les balises absolutes toutes mes images ne sont plus centré )

Merci.
13/01/2008, 00h43
Kerod

Ce que tu peux faire c'est modifier le position absolute de global et le remplacer par relative. Ainsi tes images garderont le positionnement que tu as déjà mis en place.

Si ça fonctionne correctement et qu'il reste juste le problème de centrage. Reviens nous voir. Sinon, possible de le voir en ligne ?
13/01/2008, 00h44
kaalat

Oui bien entendu. J'y ajoute le fichier index/images et css si besoin.

http://charles.bettle.free.fr/stockage/site.rar

http://charles.bettle.free.fr/

Il n'y a que la page index permettant les redirections.

J'essaie ce changement et vous tiens au courant.

Merci.
13/01/2008, 00h53
Kerod
Donc voilà. Grâce à ton lien et Firebug :mrgreen: voici une solution :

Code:

text-align: center

à rajouter à body
ton div principal à modifier :
Code:

1 2 3 4 5 6 7 8 #Tableau_01 { height:1000px; margin:auto; position:relative; width:1000px; text-align: left; }
Et ça devrait résoudre ton problème ;)

pendant que j'y suis rajoute ceci au body
Code:

1 2 margin:0; padding :0;
13/01/2008, 01h26
kaalat

J'essaie ça dès que je peux me reconnecter à mon ftp :/

Voila j'ai essayé mais visiblement je dois pas faire exactement ce que tu me demandes car ça ne fonctionne pas :/

J'ai donc modifié le css pour qu'il soit ainsi :

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
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles -->
<style type="text/css">
<!--
 
#global {
height:1000px;
margin:auto;
position:relative;
width:1000px;
text-align: left;
margin:0; 
padding :0;
 
}
 
 
#akolite_ {
	position:absolute;
	left:22px;
	top:34px;
	width:333px;
	height:39px;
}
 
#forum_ {
	position:absolute;
	left:386px;
	top:132px;
	width:210px;
	height:208px;
}
 
#site_ {
	position:absolute;
	left:673px;
	top:132px;
	width:207px;
	height:208px;
}
 
#tuto_ {
	position:absolute;
	left:102px;
	top:133px;
	width:208px;
	height:208px;
}
 
#tete_ {
	position:absolute;
	left:566px;
	top:563px;
	width:434px;
	height:331px;
}
 
#foot_ {
	position:absolute;
	left:0px;
	top:894px;
	width:1000px;
	height:106px;
}
 
-->
</style>
<!-- End ImageReady Styles -->

Ce n'était pas comme ça ?

13/01/2008, 02h41
Kerod

Tu as modifié le CSS de ton body ? :roll:

Et non ce n'est pas ça. Quand je dis rajoute le margin:0 à ton body c'est pas à global
13/01/2008, 02h49
kaalat
Donc il faut que je crée une balise dans le css ?
Code:

1 2 3 4 5 #body { margin:0; padding :0; }
13/01/2008, 02h54
Kerod
non non.
Pas comme ça.
Code:

1 2 3 4 5 6 body { margin : 0; padding: 0; text-align: center; }
Ca aura pour effet de supprimer le blanc autour de ta page. Tu me diras que le fond est blanc mais si tu regardes ton footer tu verras qu'il n'est pas collé au bord de la page. Le text-align centrera (tout) le contenu de ta page.

C'est pour ça que tu dois réinitialiser dans global le text-align à left. le margin:auto de global aura pour but de positionner ton global au centre.
Code:

1 2 3 4 5 6 7 #global { height:1000px; margin:auto; position:relative; width:1000px; text-align: left; }
Avec tout ça ton problème devrait être résolu
13/01/2008, 03h02
kaalat

Ca ne fonctionne pas, désolé.
13/01/2008, 03h02
Kerod

Code !?

Tu es sur que l'on parle de la même page ? La page en ligne ne correspond pas au code que tu donnes ici. Tu me sors des #global alors que j'en vois nullepart.

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
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles -->
<style type="text/css">
<!--
 
#body
{
   margin : 0;
   padding: 0;
   text-align: center;
}
 
 
#global {
height:1000px;
margin:auto;
position:relative;
width:1000px;
text-align: left; 
}
 
 
#akolite_ {
	position:absolute;
	left:22px;
	top:34px;
	width:333px;
	height:39px;
}
 
#forum_ {
	position:absolute;
	left:386px;
	top:132px;
	width:210px;
	height:208px;
}
 
#site_ {
	position:absolute;
	left:673px;
	top:132px;
	width:207px;
	height:208px;
}
 
#tuto_ {
	position:absolute;
	left:102px;
	top:133px;
	width:208px;
	height:208px;
}
 
#tete_ {
	position:absolute;
	left:566px;
	top:563px;
	width:434px;
	height:331px;
}
 
#foot_ {
	position:absolute;
	left:0px;
	top:894px;
	width:1000px;
	height:106px;
}
 
-->
</style>
<!-- End ImageReady Styles -->

13/01/2008, 03h09
Kerod
Il faudrait écouter ce que je dis sinon tu vas jamais avancer.
1. Ce n'est pas #body mais body. body n'est pas un identifiant mais un élément HTML.
2. Selon le code que je vois en ligne ce n'est pas #global (d'ailleurs je sais pas d'où sort ce global) mais #Tableau_01

Nan je comprends bien, pas d'inquiétude mais bizarrement le code source sous FF n'etait pas du tout celui qui avait été uploadé...

Avec le changement de code que vous m'avez donné cela fonctionne sous IE et FF ( tout est centré ) mais tous les links images ne fonctionnent plus.

"En faite j'avais renommé tableau_01 ==> global sur le .html et 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
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles -->
<style type="text/css">
<!--
 
body
{
   margin : 0;
   padding: 0;
   text-align: center;
}
 
 
#Tableau_01 {
height:1000px;
margin:auto;
position:relative;
width:1000px;
text-align: left; 
}
 
 
#akolite_ {
	position:absolute;
	left:22px;
	top:34px;
	width:333px;
	height:39px;
}
 
#forum_ {
	position:absolute;
	left:386px;
	top:132px;
	width:210px;
	height:208px;
}
 
#site_ {
	position:absolute;
	left:673px;
	top:132px;
	width:207px;
	height:208px;
}
 
#tuto_ {
	position:absolute;
	left:102px;
	top:133px;
	width:208px;
	height:208px;
}
 
#tete_ {
	position:absolute;
	left:566px;
	top:563px;
	width:434px;
	height:331px;
}
 
#foot_ {
	position:absolute;
	left:0px;
	top:894px;
	width:1000px;
	height:106px;
}
 
-->
</style>
<!-- End ImageReady Styles -->

13/01/2008, 03h30
Kerod

Là j'y peux rien. Il faut vérifier le chemin de tes images. Car visiblement ce n'est pas le bon. même en demandant d'afficher juste l'image avec l'url il ne la trouve pas

Tu renommes tes images et tu gardes l'ancien nom dans ton html.

Citation:

http://charles.bettle.free.fr/icons/image2.gif index_03.gif 12-Jan-2008 22:12 1k
http://charles.bettle.free.fr/icons/image2.gif index_07.gif 12-Jan-2008 22:12 27k
http://charles.bettle.free.fr/icons/image2.gif index_09.gif 12-Jan-2008 22:12 22k
http://charles.bettle.free.fr/icons/image2.gif index_12.gif 12-Jan-2008 22:12 18k
http://charles.bettle.free.fr/icons/image2.gif index_18.gif 12-Jan-2008 22:12 34k
http://charles.bettle.free.fr/icons/image2.gif index_19.gif

Normal que ça fonctionne pas
13/01/2008, 03h37
kaalat

Oui la je suis désolé je pensais que l'ancien dossier image avait été ecrasé ://

Sinon tout fonctionne parfaitement et je vous remercie pour votre patience et votre pédagogie.

Je voudrais savoir aussi s'il était possible de mettre un effet de luminance sur les cases ( forum/site et tuto ) au survol de la souris ? Même si je pense qu'il faille passer par du flash ou js.

Merci.

Tu veux dire un effet d'opacité ??

Si c'est bien ce que tu veux. Oui.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 a.image { filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; } a.image:hover { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
Et tu attribues la classe image à tes liens.

Donc je dois intégrer ce code à mon css de cette façon ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#forum_ {
	position:absolute;
	left:386px;
	top:132px;
	width:210px;
	height:208px;
}
 
a.image
{
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
}
 
a.image:hover
{
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}

Je dois premplacer "a.image" par "a.forum" ?
et dans mon html j'ai :

Code:

1
2
3
4
 
	<div id="forum_">
		<img id="forum" src="images/forum.gif" width="210" height="208" alt="" />
	</div>

Le code est t-il href mais vers le css ?

Voir 40 message(s) de cette discussion en une page