centrer ma page web sur tous types d'écran

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

BIGOIN
Arias
Messages : 3
Inscription : 19 janv. 2008, 23:08

centrer ma page web sur tous types d'écran

Message par BIGOIN »

Bonsoir : :D
Voilà mon souci :

J'aimerai que ma page web soit centré sur tous type d'écran

Voilà le début du HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>index</title></head>
<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(images_drageeembal/couleurfond.JPG); margin-left: 0px; width:


Par avance un grand Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Beau pays Breton ou il ne pleut jamais "sourire"
BIGOIN
Arias
Messages : 3
Inscription : 19 janv. 2008, 23:08

Message par BIGOIN »

j'ai trouvé une solution :idea: à mon problème :

Si autre je suis preneur, Merçi

<html>
<head><title>
</title>
</head>
<body>

<center>
<table width=900 height=600 border=1>
<tr>
<td align=center>

<table width=800 height=1500 border=1>
<tr>
<td align=center>

...//contenu

</td>
</tr>

</td>
</tr>
</table>
</center>
</body>

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Beau pays Breton ou il ne pleut jamais "sourire"
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Bonjour
Un tableau doit servir à présenter des données "tabulaires": résultats de matchs de foot, cours de la bourse, évolution des quantités de réactifs dans une réaction d'estérification,... mais pas à organiser la mise en page.
D'autre part, la balise <center> doit être considérée comme obsolète:
http://css.alsacreations.com/Tutoriels- ... -obsoletes
A ma connaissance, KompoZer ne l'utilise d'ailleurs pas.

Ci-dessous une solution plus simple et plus conforme avec les standards:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>le titre</title>
  <style type="text/css">
body {margin: auto; width: 750px;}
  </style>
</head>
<body>
bla bla bla
</body>
</html>
Quelqu'un peut-il confirmer que cela fonctionne sous IE ?
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Fabrice.Tres.Net
Tyrannosaurus Rex
Messages : 2390
Inscription : 26 juin 2006, 12:50

Message par Fabrice.Tres.Net »

Cela marche sous IE7, mais je ne suis pas sûr que cela marche sur IE 6.

Edité: c'est OK sous IE 6

sous IE 5.5 : non, il faudrait ajouter un text-align center au body,
et un div dans lequel on peut réaligner le texte à gauche ...
Cela donnerait :

Code : Tout sélectionner

 ... <style type="text/css">
body {margin: auto; width: 750px; text-align:center;}
#page { text-align: left; }
  </style>
</head>
<body>
<div id="page">
bla bla bla 
</div>
...
Je teste avec http://browsershots.org/
GihefBey
Salamandre
Messages : 22
Inscription : 16 janv. 2008, 22:47

Message par GihefBey »

Bonjour,

Pour un début, c'est un début restreint.
On ne peut pas en faire grand-chose.

Essaye quand-même ça :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #aab;
      color : #344979;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 80%;
   /* la height, c'est juste pour voir quelque chose quand c'est vide */
      height: 460px;
      text-align: left;
      border : 1px solid #fff;
      background-color: #fff;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      }
    </style>
</head>
<body>
  <div id="conteneur">
    <p>et le site est là-dedans…</p>
  </div>
</body>
</html>


Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X; fr) AppleWebKit/523.12 (KHTML, like Gecko) Safari/419.3
BIGOIN
Arias
Messages : 3
Inscription : 19 janv. 2008, 23:08

Message par BIGOIN »

J'ai bien pris note de vos explications

Concernant la balise center à ne plus utiliser mon travail est donc à reprendre

j'ai juste mis le début car j'étais bloqué sur le centrage automatique de la page quel que soit l'écran. Maintenant au vu de vos explications tous est OK


Encore Merci :D

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Beau pays Breton ou il ne pleut jamais "sourire"
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités