Centrer un DIV contenant une image de background?

**Maitrekou** · 08/10/2008, 18h24

Bonjour à tous,

J'ai un problème que personne ne sait résoudre alors je me tourne vers vous.

Je suis en train de créer un site amateur et il me reste un problème de taille : lorsque mon site est aligné à gauche (automatique) tout va bien, mais lorsque je veux le centrer ça foire.

Les DIV ayant une image se centre bien ainsi que le contenu des autres DIV.

Les autres DIV (où j'ai mis une image de fond), cette image de fond ne s'aligne pas au centre alors que le contenu si.

Que dois-je faire pour centrer ces DIV récalcitrantes?

Voici le screen quand aligné à gauche et que tout fonctionne
http://img185.imageshack.us/my.php?image=bugokcm9.jpg

Et ici le bug
http://img185.imageshack.us/my.php?image=bugga2.jpg

Ceci arrive quand je mets simplement <center> au début du body.

Merci d'avance

PS : Je précise que pour le moment je n'ai pas de fichier .css (pour la simple et bonne raison que je dois faire un site brut, puis l'améliorer par après : css => php).

Voici le code de ma page principale :

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
 
<html>
 
<head>
<title>Battlefield Heroes :: La communauté francophone ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
 
<body bgcolor="black" link="#000000" vlink="#000000" alink="#910000">
 
<div class="section" id="menu" style="background-image:url(images/menu.gif) ; background-repeat:no-repeat; visibility:visible>
<table width="584" border="0">
<tr>
<td> </td>
<td> </td>
<td width="50px" height="21" valign="bottom"><a href="index.html"><img src="images/accueil_rouge.gif" border="0" onmouseover="this.src='images/accueil_noir.gif'" onmouseout="this.src='images/accueil_rouge.gif'" ></a></td>
<td width="50px" height="21" valign="bottom"><img src="images/lejeu_noir.gif" onmouseover="this.src='images/lejeu_rouge.gif'" onmouseout="this.src='images/lejeu_noir.gif'"></td>
<td width="50px" height="21" valign="bottom"><img src="images/media_noir.gif" onmouseover="this.src='images/media_rouge.gif'" onmouseout="this.src='images/media_noir.gif'"></td>
<td width="50px" height="21" valign="bottom"><img src="images/forum_noir.gif" onmouseover="this.src='images/forum_rouge.gif'" onmouseout="this.src='images/forum_noir.gif'"></td>
</tr>
</table>
</div>
 
<div class="section" id="header"><a href="index.html"><img src="images/header.gif" width="584" height="271" border="0"></a></div>
 
<div class="section" id="chemin" style="background-image:url(images/chemin.gif) ; background-repeat:no-repeat; visibility:visible">
<table width="584" border="0">
<tr>
<td width="10" height="15"></td>
<td height="15" valign="top"><font face="verdana" size=1><b>Accueil</b></font></td>
</tr>
</table>
</div>
 
<div class="section" id="corps" style="background-image:url(images/corps.gif) ; background-repeat:no-repeat; visibility:visible">
<table width"584" border="0">
<tr>
<td height="1" colspan="4"></td>
</tr>
<tr>
<td width="12" height="125" rowspan="2"></td>
<td width="100" height="125" rowspan="2"><a href="news3.htm"><img src="images/news3.gif" border="0"></a></td>
<td width="1"></td>
<td width="400" height="125"><font face="verdana" size=2><b>Dossier : la personnalisation, les points et les missions</b><br>
Il y a quelques temps, deux personnes travaillant sur Battlefield Heroes ont dévoilés, via le blog officiel, de plus amples détails sur la personnalisation des personnages, les points et missions.<br> A découvrir dans la suite. <a href="news3.htm" style="text-decoration:none;">[...]</a></td>
 
</tr></table>
<table width"584" border="0">
<tr>
<td width="12" height="125" rowspan="2"></td>
<td width="100" height="125" rowspan="2"><a href="news2.htm"><img src="images/news2.gif" border="0"></a></td>
<td width="1"></td>
<td width="400" height="125"><font face="verdana" size=2><b>Nouvelle vidéo : Victory Village</b><br>
Il y a quelques temps maintenant, EA Inc. et Dice ont sorti un trailer présentant la map “Victory Village” ainsi que quelques customisations plutôt loufoques
<br><br>
Retrouvez la vidéo dans la suite de cette news. <a href="news2.htm" style="text-decoration:none;">[...]</a></td>
 
</tr></table>
<table width"584" border="0">
<tr>
<td width="12" height="125" rowspan="2"></td>
<td width="100" height="125" rowspan="2"><a href="news1.htm"><img src="images/news1.gif" border="0"></a></td>
<td width="1"></td>
<td width="400" height="125"><font face="verdana" size=2><b>Ouverture du site</b><br>
Bienvenue à tous sur le nouveau site francophone traitant de Battlefield Heroes, le jeu gratuit développé par Dice et EA Inc.
<br><br>
Le site se voudra informatif de part ses différentes pages et news, mais aussi communautaire grâce à son forum. <a href="news1.htm" style="text-decoration:none;">[...]</a></td>
 
</tr>
</table>
<table width"584" border="0">
<tr>
<td height="2"></td>
</tr>
</table>
</div>
<div class="section" id="copyright"><img src="images/copyright.gif" width="584" height="14"></div>
</div>
</body>
</html>

**HiRoN** · 08/10/2008, 18h31

Salut,

Pense à utiliser la balise [CODE] (#), pour que tout cela soit + lisible pour les autres (+ indentation car là...).

La ligne suivante contient une erreur dans le style (bien que cela n'est pas en rapport avec le problème en question, du moins je ne pense pas) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="section" id="menu" style="background-image:url(images/menu.gif) ; background-repeat:no-repeat; visibility:visible float:">

Ici > visibility:visible float:

De plus, un code contenant seulement la structure générale de ton site serait sûrement plus utile que toutes ces lignes... (cf : les règles)

EDIT :

PS : Je précise que pour le moment je n'ai pas de fichier .css (pour la simple et bonne raison que je dois faire un site brut, puis l'améliorer par après : css => php).

Bah, c'est peut-être le bon moment, ça t'aiderait sûrement à résoudre ton problème...

Reprendre la structure générale, "externaliser" le css, ça en ferait des lignes en moins pour détecter l'erreur... En enlevant les <font> pour l'inclure dans le CSS, rajouter les attributs "alt", "title" aux bonnes balises, en mettant (ou pas) les valeurs height & width en pixels et non 1 fois sur 2...

**Maitrekou** · 08/10/2008, 18h57

Je sais mais pour le moment je veux laisser le code brut comme cela car cela va servir pour mes cours.

Sinon, concrètement, comment faire? Pourquoi est-ce que les div contenant une image de background ne se centrent pas? Tout le monde me dit de faire en DIV car c'est l'avenir etc... mais bon si on ne sait pas centrer un site c'est moyen quoi :/

Je ne suis quand même pas le seul au monde à vouloir centrer un tel DIV si?

Désolé pour ma perte de patience mais cela fait des jours que j'essaie, et que je désespère

Je vais finir par retourner à mes tableaux photoshop ou mes iframes :/

**Bovino** · 08/10/2008, 19h57

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="section" id="menu" style="background-image:url(images/menu.gif) ; background-position:center center; background-repeat:no-repeat; visibility:visible>

**Maitrekou** · 08/10/2008, 22h48

Bovino, tu es un dieu

Je ne connaissais pas du tout cette fonction du background qui est vraiment super simple en fait.

Merci beaucoup à tous

(ouf j'ai enfin trouvé un forum sympa, rapide et compétent. Je reste ^^)

Centrer un DIV contenant une image de background?

Centrer un élément en CSS

Discussions similaires

Partager

Partager