18041 sujets

Questions générales et questions de débutants

Centrer + décoller du haut

Bonjour

Je suis débutante, mille excuses. Deux problèmes urgents à résoudre :

1/ Le tableau dans lequel je construit ma page n'est pas impeccablement centré (léger décalage à droite). Où est l'erreur ?

2/ Comment décoller mon tableau du haut de la fenêtre ? J'aimerais le faire descendre d'environ 30 ou 50 px.

Si quelqu'un de gentil pouvait me tuyauter simplement, ce serait adorable. (merci de ne pas, par exemple, me dire de tout refaire sans tableau, avec un autre logiciel, etc... Du basique pour niaiseux, je ne comprends que cela ! Smiley biggrin
Voici le code de la page en cours :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>chat</title>
<style type="text/css">
<!--
body {background-color: #B30037;
	background-repeat: no-repeat;}
#container{width:900px;
        height:630px;
        top:50%;
        left:50%;
        position:absolute;
		margin-top:-315px;
        margin-left:-450px;
}
a:link {	text-decoration: none;}
.menuGauche {
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	line-height: 18px;
	vertical-align: top;
	padding-top: 20px;
	padding-right: 70px;
}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
.menuDroite {
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	line-height: 18px;
	vertical-align: top;
	padding-top: 20px;
	padding-left: 70px;
}
-->
</style>
</head>
<body>
<div align="center">
  <table width="900" height="630" border="0" cellpadding="0" cellspacing="0" background="IMAGES2010/AnglesRouges.jpg">
    <tr>
      <td width="300" height="126" align="right" valign="top" class="menuGauche">&eacute;dition (1)<br />
        &eacute;dition (2)<br />
        annonce-presse, affiche<br />
        packaging, PLV, jaquette<br />
        logo</td>
      <td width="300" align="center" valign="middle" bgcolor="#777777">&nbsp;</td>
      <td width="300" align="center" valign="top"><div align="left" class="menuDroite">illustration<br />
        illustration jeunesse<br />
        retouche photo<br />
        montage narratif<br />
        contact</div></td>
    </tr>
    <tr>
      <td height="294" align="center" valign="top">&nbsp;</td>
      <td align="center" valign="top">&nbsp;</td>
      <td align="center" valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td align="center" valign="top">&nbsp;</td>
      <td align="center" valign="top">&nbsp;</td>
      <td align="center" valign="top">&nbsp;</td>
    </tr>
  </table>
</div>
</body>
</html>
Bonjour,

Voici la solution :


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>chat</title>

<style type="text/css">

<!--

body {background-color: #B30037;

	background-repeat: no-repeat;}

#container {
	margin-top: 50px;
}

a:link {	text-decoration: none;}

.menuGauche {

	font-family: "Courier New", Courier, monospace;

	font-size: 14px;

	line-height: 18px;

	vertical-align: top;

	padding-top: 20px;
	
	text-align: right;

}

a:visited {text-decoration: none;}

a:hover {text-decoration: none;}

a:active {text-decoration: none;}

.menuDroite {

	font-family: "Courier New", Courier, monospace;

	font-size: 14px;

	line-height: 18px;

	vertical-align: top;

	padding-top: 20px;
	
	text-align: left;

}

-->

</style>

</head>

<body>
<div id="container">
    <div align="center">
    
      <table width="900" height="630" border="0" cellpadding="0" cellspacing="0" background="IMAGES2010/AnglesRouges.jpg">
    
        <tr>
    
          <td width="300" height="126" align="right" valign="top" class="menuGauche">&eacute;dition (1)<br />
    
            &eacute;dition (2)<br />
    
            annonce-presse, affiche<br />
    
            packaging, PLV, jaquette<br />
    
            logo</td>
    
          <td width="300" align="center" valign="middle" bgcolor="#777777">&nbsp;</td>
    
          <td width="300" align="center" valign="top"><div align="left" class="menuDroite">illustration<br />
    
            illustration jeunesse<br />
    
            retouche photo<br />
    
            montage narratif<br />
    
            contact</div></td>
    
        </tr>
    
        <tr>
    
          <td height="294" align="center" valign="top">&nbsp;</td>
    
          <td align="center" valign="top">&nbsp;</td>
    
          <td align="center" valign="top">&nbsp;</td>
    
        </tr>
    
        <tr>
    
          <td align="center" valign="top">&nbsp;</td>
    
          <td align="center" valign="top">&nbsp;</td>
    
          <td align="center" valign="top">&nbsp;</td>
    
        </tr>
    
      </table>
    
    </div>
</div>

</body>

</html>

Modifié par Make In Design (19 Oct 2010 - 16:31)
Merci d'essayer de m'aider. Mais...Eh non... Marche pas. Tout est toujours collé en haut, et en plus, glissement vers la gauche.

Ceci dit, pour ce qui est du problème horizontal, le bug venait d'un style de texte qui interferait avec la largeur de la colonne de gauche (?). Le centrage est corrigé.

Mais reste à décoller le site du haut de la fenêtre ? Une histoire de padding quelquepart ?
Ce n'est pas une question de navigateur, je viens d'essayer sur internet explorer, chrome, mozilla et opéra, le cadre est bien centré, et il est bien décollé du haut.

As-tu ré-actualisé ta page ?
Modifié par Make In Design (19 Oct 2010 - 16:50)
Sujet clos
Aller à