[Div] Centrer les <div> avec une image en ba
Kou
-
dindoun Messages postés 1028 Date d'inscription Statut Membre Dernière intervention -
dindoun Messages postés 1028 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
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
https://imageshack.com/
Et ici le bug
https://imageshack.com/
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 :
<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 style="margin:0 auto 0 auto;">
<div class="section" id="menu" style="background-image:url(images/menu.gif) ; background-repeat:no-repeat; visibility:visible float:">
<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>
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
https://imageshack.com/
Et ici le bug
https://imageshack.com/
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 :
<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 style="margin:0 auto 0 auto;">
<div class="section" id="menu" style="background-image:url(images/menu.gif) ; background-repeat:no-repeat; visibility:visible float:">
<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>
A voir également:
- [Div] Centrer les <div> avec une image en ba
- Image iso - Guide
- Légender une image - Guide
- Transformer une image en icone - Guide
- Mettre une image en filigrane sur word - Guide
- Couper une image en 3 instagram - Guide
8 réponses
salut, s y je comprend bien le problème c'est les deux rectanglas à gauche un noir en haut un blanc en bas
si c'est le cas essaie
https://imageshack.com/
et ca
http://img185.imageshack.us/img185/346/bugga2.jpg
https://imageshack.com/
http://img185.imageshack.us/img185/346/bugokcm9.jpg
clairement c est ton image bugga2.jpg qui est mauvaise
si c'est le cas essaie
https://imageshack.com/
et ca
http://img185.imageshack.us/img185/346/bugga2.jpg
https://imageshack.com/
http://img185.imageshack.us/img185/346/bugokcm9.jpg
clairement c est ton image bugga2.jpg qui est mauvaise
hello
essaie ce code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
<div align="center">
<body bgcolor="black" link="#000000" vlink="#000000" alink="#910000">
<div style="margin:0 auto 0 auto;">
<div class="section" id="menu" style="background-image:url(images/menu.gif) ; background-repeat:no-repeat; visibility:visible float:">
<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>
</div>
</body>
</html>
essaie ce code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
<div align="center">
<body bgcolor="black" link="#000000" vlink="#000000" alink="#910000">
<div style="margin:0 auto 0 auto;">
<div class="section" id="menu" style="background-image:url(images/menu.gif) ; background-repeat:no-repeat; visibility:visible float:">
<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>
</div>
</body>
</html>
bonjour
ceci est un forum d'entraide, l'accès y est bien sur totalement libre,
mis ... être inscrit serait la moindre des politesses, ne serait-ce que par égard pour les membres qui vont essayer de vous répondre !
ne restez donc pas anonyme, inscrivez-vous
merci
@mitiés
b g
ceci est un forum d'entraide, l'accès y est bien sur totalement libre,
mis ... être inscrit serait la moindre des politesses, ne serait-ce que par égard pour les membres qui vont essayer de vous répondre !
ne restez donc pas anonyme, inscrivez-vous
merci
@mitiés
b g
Bonjour,
Je viens de m'inscrire mais je préfère toujours, et ce après quelques visites de forums vides ou "hostiles" voir un peu le style de réponse que je reçois avant de m'inscrire.
Pour Dindoun, je ne comprends absolument pas ton post, désolé :(
Pour Taz, j'ai essayé ton code (que j'avais déjà essayé auparavant) et le résultat est le même : les DIV avec un background reste à gauche :/
On me parle sans arrêt des DIV comme étant le must, mais si cela m'empêche de centrer bêtement un site je ne vois pas trop l'intérêt :/ Ce que je ne comprends pas, c'est que je ne suis quand même pas le seul à essayer de centrer un site avec des DIV si? :(
Je suis vraiment perdu et découragé.
Je viens de m'inscrire mais je préfère toujours, et ce après quelques visites de forums vides ou "hostiles" voir un peu le style de réponse que je reçois avant de m'inscrire.
Pour Dindoun, je ne comprends absolument pas ton post, désolé :(
Pour Taz, j'ai essayé ton code (que j'avais déjà essayé auparavant) et le résultat est le même : les DIV avec un background reste à gauche :/
On me parle sans arrêt des DIV comme étant le must, mais si cela m'empêche de centrer bêtement un site je ne vois pas trop l'intérêt :/ Ce que je ne comprends pas, c'est que je ne suis quand même pas le seul à essayer de centrer un site avec des DIV si? :(
Je suis vraiment perdu et découragé.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question