[HTML 4.0] Problème de centrage d'une image

proinfo · 27/09/2011, 18h22

Bonjour à tous !

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

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>

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

http://megatutos.zxq.net/

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

tydoo34 · 27/09/2011, 18h55

Tu a essayer de faire ca :

Code :

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

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>

Bovino · 27/09/2011, 19h36

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.

tydoo34 · 27/09/2011, 19h39

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 :

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

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

sur ton div

NoSmoking · 27/09/2011, 21h55

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

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

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

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

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

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