[résolu] Centrer ma page/taille de la fenêtre

Epicurien7 · Message par **Epicurien7** » 26 mai 2008, 17:25

Bonjour,
Je galère avec le centrage de ma page.
Je souhaite centrer ce que j'ai déjà créé, par rapport à la taille de la fenêtre du navigateur.
J'ai choisi de travailler sur une taille 800 X 600 pour que ça s'adapte partout.
J'aimerais que pour les plus grand écran tout se centre horizontalement.
Merci d'avance

Voici mon code HTML

Code : Tout sélectionner

<!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>page accueil</title>
<style type="text/css">
</style>
</head>
<body
style="background-color: rgb(214, 212, 201); font-family: Papyrus;">
<div
style="position: fixed; top: 75px; left: 215px; background-image: url(../images_site/fond3G.jpg); width: 585px; height: 474px;"></div>
<div
style="position: fixed; top: 3px; left: 250px; float: left; text-align: center; font-size: 50px; opacity: 1; font-family: Papyrus; height: 50px; background-color: rgb(155, 255, 255);">
Lez'Arts Migrateurs</div>
<div style="font-family: Papyrus; height: 550px;"></div>
<div
style="border: 2px outset black; position: fixed; text-align: justify; top: 100px; left: 15px; float: left; background-image: url(../images_site/fond1.jpg); background-position: center; background-repeat: no-repeat; opacity: 1; height: 435px; width: 190px;">
<a href="Accueil.html"><img
style="border: 1px solid ; width: 70px; height: 70px;"
alt="Théâtre" src="../images_site/lam7.png"
align="middle">Accueil<br>
</a><a href="Ateliers.html"><img none=""
style="border: 1px solid ; width: 70px; height: 70px;"
alt="Les ateliers" src="../images_site/lam1.png"
align="middle">Lez'Ateliers</a>
<br>
<a href="Theatre.html"><img
style="border: 1px solid ; width: 70px; height: 70px;"
alt="Théâtre" src="../images_site/lam3.png"
align="middle">Théâtre</a>
<br>
<a href="Video.html"><img
style="border: 1px solid ; width: 70px; height: 70px;"
alt="Vidéo" src="../images_site/lam4.png" align="middle">Vidéo</a>
<br>
<a href="Autres_projets.html"><img
style="border: 1px solid ; width: 70px; height: 70px;"
alt="Autres projets" src="../images_site/lam5.png"
align="middle">Autres projets</a>
<br>
<a href="Actu_et_contact.html"><img
style="border: 1px solid ; width: 70px; height: 70px;"
alt="Actualité de l'asso" src="../images_site/lam6.png"
align="middle">Actu et contact</a>
</div>
<div
style="margin: 80px 115px 15px 210px; padding: 5px; position: absolute; font-family: papyrus; text-align: justify; overflow: auto; width: 572px; top: 0px; height: 456px;">
<div style="background-repeat: no-repeat; height: 504px;"><big
style="font-family: Papyrus;"><big style="color: red;">A</big>u
départ <br>
<big style="color: red;">L</big>a création pour la
création <br>
<big style="color: red;">R</big>éaliser une oeuvre
<br>
<big style="color: red;">N</big>ous voulons
imaginer.<br>
<big style="color: red;">C</big>e fonctionnement
symbiotique.<br>
<big style="color: red;">L</big>e théâtre et la
vidéo
</big></div>
</div>
</body>
</html>

A bientôt. ToMa.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9b5) Gecko/2008032619 Firefox/3.0b5

Message par **chinon37** » 26 mai 2008, 17:50

Bonjour,

Je me suis permis de modifier le code pour centrer la page...
Mais n'ayant pas les images, j'ai probablement changer un peu la mise en page.
Fais un copier-coller de ce code dans l'onglet source de KompoZer dans un nouveau fichier pour voir ce que cela donne...
Globalement, il y avait trop de positions absolues qui posaient problème.
Quand c'est possible, garder un positionnement dans le flux est le plus simple (position: non définie ou relative)

Code : Tout sélectionner

<!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>
      page accueil
    </title>
  </head>
  <body style="background-color: rgb(214, 212, 201); font-family: Papyrus; position: relative; margin-right: auto; margin-left: auto; width: 800px; height: 600px; text-align: center;">
    <div style="top: 3px; left: 250px; text-align: center; font-size: 50px; opacity: 1; font-family: Papyrus; background-color: rgb(155, 255, 255); height: 70px; width: 500px; margin-right: auto; margin-left: auto;">
      Lez'Arts Migrateurs
    </div>
    <div style="border: 2px outset black; text-align: justify; float: left; background-image: url(../images_site/fond1.jpg); background-position: center; background-repeat: no-repeat; opacity: 1; width: 190px; margin-top: 10px;">
      <a href="Accueil.html"><img style="border: 1px solid ; width: 70px; height: 70px;" alt="Théâtre" src="../images_site/lam7.png" align="middle">Accueil<br></a><a href="Ateliers.html"><img none="" style="border: 1px solid ; width: 70px; height: 70px;" alt="Les ateliers" src="../images_site/lam1.png" align="middle">Lez'Ateliers</a><br>
      <a href="Theatre.html"><img style="border: 1px solid ; width: 70px; height: 70px;" alt="Théâtre" src="../images_site/lam3.png" align="middle">Théâtre</a><br>
      <a href="Video.html"><img style="border: 1px solid ; width: 70px; height: 70px;" alt="Vidéo" src="../images_site/lam4.png" align="middle">Vidéo</a><br>
      <a href="Autres_projets.html"><img style="border: 1px solid ; width: 70px; height: 70px;" alt="Autres projets" src="../images_site/lam5.png" align="middle">Autres projets</a><br>
      <a href="Actu_et_contact.html"><img style="border: 1px solid ; width: 70px; height: 70px;" alt="Actualité de l'asso" src="../images_site/lam6.png" align="middle">Actu et contact</a>
    </div>
    <div style="padding: 5px; font-family: papyrus; text-align: justify; overflow: auto; width: 572px; top: 0px; height: 456px; margin-top: 10px;">
      <div style="background-repeat: no-repeat; height: 504px;">
        <big style="font-family: Papyrus;"><big style="color: red;">A</big>u départ<br>
        <big style="color: red;">L</big>a création pour la création<br>
        <big style="color: red;">R</big>éaliser une oeuvre<br>
        <big style="color: red;">N</big>ous voulons imaginer.<br>
        <big style="color: red;">C</big>e fonctionnement symbiotique.<br>
        <big style="color: red;">L</big>e théâtre et la vidéo</big>
      </div>
    </div>
  </body>
</html>

Epicurien7 · Message par **Epicurien7** » 26 mai 2008, 17:58

Merci , ça marche!!!
Je débute donc, absolue, relative etc... c'est pas encore la maitrise!
A bientôt et encore merci
TomA

Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; fr; rv:1.9b5) Gecko/2008032619 Firefox/3.0b5

Geckozone

[résolu] Centrer ma page/taille de la fenêtre

[résolu] Centrer ma page/taille de la fenêtre

Qui est en ligne ?