Problème de centrage d'une image

Version imprimable

Bonjour à tous !

Je reviens avec un problème sans aucun doute très simple :mrgreen:

J'ai publié hier dans la nuit un site qui, une fois terminé, contiendra des centaines de tutos concernant tout les domaines... Le site étant en conception actuellement (juste l'index de publié), j'ai mis une image appropriée. Je voudrais la centrer au milieu de la page, mais mon <div> du menu sur la gauche m'en empêche, en effet, le navigateur considère que la page (l'écran) commence après le <div> :aie:

Voilà l'adresse du site, suivant votre écran l'image sera décalée par rapport à la bannière :

http://megatutos.zxq.net/

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MegaTutos</title>
<meta name="generator" content="Bluefish 2.0.3" >
<meta name="author" content="Martin" >
<meta name="date" content="2011-09-26T23:20:38+0100" >
<meta name="keywords" content="MegaTutos, tutos, informatique, facile, mécanique, débutants, noob, programmation">
<meta name="description" content="MegaTutos c'est un site spécialement conçu pour vous aider à avancer dans des centaines de choses ! Des tutos sur l'informatique comme sur la mécanique, et bien plus !">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link rel="Stylesheet" media="screen" href="style.css" />
</head>
<body>
<div align="center">
<img src="clavier.png" alt="Cette image ne peut &ecirc;tre affich&eacute;e !" title="clavier.png" />
</div>
<div class="menu_gauche">
<p>Site</p>
<li><a href="index.html">Accueil</a></li>
<li><a href="#newletter.html">News Letter</a></li>
<li><a href="#contacter.html">Nous contacter</a></li>
<li><a href="#idees.html">Poster vos id&eacute;es</a></li>
 
<p>Tutos</p>
<li><a href="#tuto1">Tuto 1</a></li>
<li><a href="#tuto2">Tuto 2</a></li>
<li><a href="#tuto3">Tuto 3</a></li>
</div>
<div class="corps"> 
<br>
	<br>
<img src="travaux.jpeg" width="400" height="300" alt="Cette image ne peut &ecirc;tre affich&eacute;e !" hspace="190" />
<p align="center">MegaTutos est en chantier ! La sortie officielle du site est pr&eacute;vue pour 2012. D'ici l&agrave;, vous pouvez participer &agrave; son &eacute;laboration en postant vos id&eacute;es !</p>
</div>
</body>
</html>

Voilà, merci à ceux qui pourront m'aider :)

PS : Si vous remarquez des choses étranges ou invalides HTML 4.01 dans mon code, dites le moi.

Tu a essayer de faire ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div class="corps"> 
<center>
<br>
	<br>
<img src="travaux.jpeg" width="400" height="300" alt="Cette image ne peut &ecirc;tre affich&eacute;e !" hspace="190" />
 
</center>
 
<p align="center">MegaTutos est en chantier ! La sortie officielle du site est pr&eacute;vue pour 2012. D'ici l&agrave;, vous pouvez participer &agrave; son &eacute;laboration en postant vos id&eacute;es !</p>
 
</div>

Rajouté la balise <center>

27/09/2011, 19h36
Bovino

Citation:

Envoyé par tydoo34

Rajouté la balise <center>

D'une part, la balise <center> est dépréciée donc à éviter, d'autre part, ça ne changera rien au fait que le centrage se fera par rapport à cette balise et non par rapport à la page entière et donc décalée de la largeur du menu gauche...

@proinfo : si ton menu gauche a une largeur fixe, tu peux essayer d'appliquer un margin-left négatif de la moitié de la largeur du menu pour la recentrer.
27/09/2011, 19h39
tydoo34

Citation:

Envoyé par Bovino

@proinfo : si ton menu gauche a une largeur fixe, tu peux essayer d'appliquer un margin-left négatif de la moitié de la largeur du menu pour la recentrer.

Le probléme avec ca, c'est que si tu est en 800x600 ou en 1920x1080, ca ne serras pas au meme endroi par raport à la page.

Sinon tu met un

Code:

<div class="corps" style="text-align:center;">

sur ton div

Bonsoir,
une approche différente, légèrement, du problème est de mettre le menu gauche et l'image dans une DIV commune.
Ces deux éléments pourrait avoir le CSS suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
.menu_gauche{
  position : absolute;
  left : 0;
  z-index : 10; /* maintien le menu sur l'image */
}
.img_travaux {
  width : 400px;
  margin : auto;
  padding-top : 20px; /* evite le hspace dans la balise IMG */
  z-index : 0;
}

pour le code suivant

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
<div style="text-align:center;">
  <img src="clavier.png" alt="Cette image ne peut &ecirc;tre affich&eacute;e !" title="clavier.png">
</div>
<div style="position:relative">
  <div class="menu_gauche">
    <p>Site</p>
    <ul>
      <li><a href="index.html">Accueil</a></li>
      <li><a href="#newletter.html">News Letter</a></li>
      <li><a href="#contacter.html">Nous contacter</a></li>
      <li><a href="#idees.html">Poster vos id&eacute;es</a></li>
    </ul>
    <p>Tutos</p>
    <ul>
      <li><a href="#tuto1">Tuto 1</a></li>
      <li><a href="#tuto2">Tuto 2</a></li>
      <li><a href="#tuto3">Tuto 3</a></li>
    </ul>
  </div>
  <div class="img_travaux">
    <img src="travaux.jpeg" width="400" height="300" alt="Cette image ne peut &ecirc;tre affich&eacute;e !">
  </div>
  <p style="text-align:center">MegaTutos est en chantier ! La sortie officielle du site est pr&eacute;vue pour 2012. D'ici l&agrave;, vous pouvez participer &agrave; son &eacute;laboration en postant vos id&eacute;es !</p>
</div>

au passage il faut construire correctement les listes

Code:

1
2
3
4
<ul>
  <li>item 1</li>
  <li>item 2</li>
</ul>

supprimes des / en fin de balise non fermante ou change de DOCTYPE