28173 sujets

CSS et mise en forme, CSS3

Fond de page qui se grigniote de chaque côté...

Bonsoir,

je galère sur une connerie depuis 1h ...
www.stg.free.fr/test.php

Voici une page avec un simple fond d'écran, lorsque vous réduisez la page qui est à l'origine en 1280px, j'aimerais que le fond d'écran se centre.
C'est assez dur à exprimer : mais plutôt qu'il reste aligné à gauche et qu'il se réduise à droite lorsque l'on réduit la fenêtre, j'aimerais qu'il se réduise des 2 côtés en même temps afin que mon image soit comme centré mais en fond..

Quelqu'un a - t - il une idée? Merci


voici le code:

<!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>Document sans titre</title>
<style type="text/css">
body {
	margin-top:0px;
	margin-bottom:0px;
	background-color: #000000;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
	background-position: left;
}
.tabmidel {
background:url(gfx/ban_png.png);
background-repeat: no-repeat;
}
</style>
</head>

<body>
<div align="center">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tabmidel">
    <tr>
      <td><p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
    </tr>
  </table>
</div>
</body>
</html>

Modifié par chromatia.fr (07 Jun 2007 - 20:28)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
dsl pour le code voilà qui est rectifié!

J'ai déjà tenté de rechercher via vos tutaux, surtout du côté des css, malheureusement je n'arrive pas à résoudre mon souci.
background-position:center;


mais je ne sais pas si ça marche sur tous les navigateurs.

ou mets ton fond dans un div dont la taille est exprimée en %.

maintenant si tu veux reduire ton image quand le navigateur est plus petit qu'elle.... là c'est plus dur. peut-etre en js mais au-dela de mes competences actuelles
Modifié par CPascal (07 Jun 2007 - 20:53)
Bonjour,

Si tu rajoutes ceci :
.tabmidel {
	background-position: center top;
}

tu y es.

Par contre, j'ai du mal à comprendre le pourquoi de ce tableau (à priori parfaitement inutile) et du div qui l'englobe (à priori inutile également). Smiley hmm
Bon bhé les cocos!

Merci? Smiley cligne ca fonctionne tout simplement avec un :

body {
	background:url(gfx/ban_png.png);
	background-repeat: no-repeat;
	margin-top:0px;
	margin-bottom:0px;
	background-color: #000000;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
	background-position: top center;
}


pour mes tests j'avais utilisé le position left et pas center :s

merci !!!
Administrateur
Bravo Smiley smile
Tu considères que ce sujet est [Résolu] ? Smiley cligne

Ps : n'oublie pas la remarque judicieuse de Florent à propos de ton tableau inutile.
Sujet clos
Aller à