Page web qui reste sur le bord gauche haut

Rasty · Message par **Rasty** » 12 déc. 2012, 21:51

Bonjour tout le monde.

J'ai besoin d'un coup de pouce SVP.

Je viens de faire une page web pour mon club et pour moi c'est une première, je n'ai aucune expérience en langage jave CSS etc, mais si on m'explique pas de problème.

Donc comme vous le pouvez le constater le site ne se trouve pas au milieu de l’écran mais se situe sur le haut gauche.

http://www.la-petite-reine-de-sion.net/index.html

Comment y remédier????

Merci

annexe code html

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Index</title>
<style type="text/css"></style>
<style type="text/css">.ct {font:6pt;text-align:center;margin:0px}.ct img{border:0} .ct a,.ct a:visited{color:silver;text-decoration:none}.ct a:hover{color:gray;text-decoration:underline}</style>
<style type="text/css">.ct {font:6pt;text-align:center;margin:0px}.ct img{border:0} .ct a,.ct a:visited{color:silver;text-decoration:none}.ct a:hover{color:gray;text-decoration:underline}</style>
</head>
<body
style="border-style: groove; border-width: 0.3cm; background-image: url(images/Pages-web/comunicati.jpg); background-position: center; background-repeat: no-repeat; margin-left: auto; margin-right: auto; width: 1500px; height: 900px; top: 3px; padding-top: 0cm; margin-top: 30px;">
<br>
<div style="text-align: center;">
<div style="text-align: left; height: 900px;">
<div style="text-align: center;">
<div style="text-align: center; width: 1500px;"><span
style="font-family: Arial Unicode MS; font-size: 110px; color: black;">La
Petite Reine de Sion</span>
<div style="text-align: left;">   
<br>
    
              
     <br>
</div>
</div>
</div>
<div
style="text-align: center; position: absolute; left: 1001px; top: 645px; width: 570px; height: 1px;">
<table
style="margin: auto; text-align: left; display: table; width: 522px; height: 170px; position: static;"
border="0" cellpadding="0" cellspacing="2">
<tbody style="float: right;">
<tr>
<td
style="vertical-align: middle; background-color: transparent; text-align: center; font-family: "Times New Roman",Times,serif; font-size: 15px; line-height: 22px; color: rgb(51, 51, 255);"><big><big><big
style="color: rgb(51, 51, 255);"><big><big> </big></big></big></big></big><big><big
style="color: rgb(51, 51, 255);"><big><big><big><span
style="font-style: italic;">News</span></big></big></big></big></big><br>
<big><big style="color: rgb(51, 51, 255);"><big><big> <small
style="font-style: italic;"><small
style="text-decoration: blink; text-align: center;"><a
style="color: rgb(51, 51, 153);" href="Photos.html" target="_blank">Nouvelle
galerie photo</a><br>
</small></small><small><span style="text-decoration: underline;"></span></small></big></big></big></big><big><big
style="color: rgb(51, 51, 255);"><big><big><small><small>Sortie à
Rimini<br>
<span style="font-style: italic;">du 11 au 26 Mai 2013</span></small></small></big></big></big></big><br>
<big><big style="color: rgb(51, 51, 255);"><big><big><small><span
style="text-decoration: underline;"></span><small
style="text-decoration: underline;"><a style="text-align: center;"
href="http://www.la-petite-reine-de-sion.net/ ... Rimini.zip"
target="_blank">téléchargement</a></small></small></big></big></big></big>
<big><big><big style="color: rgb(51, 51, 255);"> </big></big></big></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-left: 40px; font-size: 14px;"><small><small><a
style="color: black;"
href="http://www.la-petite-reine-de-sion.net/ ... ></big></a>
<br>
<br>
</small></small><small><small>
<a target="_blank"
href="http://www.la-petite-reine-de-sion.net/ ... u-club.pdf"
style="color: black;"><big><big><big><big>Statuts</big></big></big></big></a></small></small><br>
<br>
<small><small>
<a href="http://www.la-petite-reine-de-sion.net/Comit%C3%A9.html"
style="color: black;"><big><big><big><big>Comité</big></big></big></big></a></small></small><br>
<small><small>
</small></small><br>
<small><small>
<a href="http://www.la-petite-reine-de-sion.net/Membres.html"
style="color: black;"><big><big><big><big>Membres</big></big></big></big></a></small></small><br>
<small><small>
</small></small><br>
<small><small>
<a style="color: black;"
href="http://www.la-petite-reine-de-sion.net/ ... /small><br>
<br>
<a style="color: black;"
href="http:///www.la-petite-reine-de-sion.net/Phatologies%20du%20cycliste.html"><small><small><small><small><small><big><big><big><big><big><big><big>Phathologies
du cycliste</big></big></big></big></big></big></big></small></small></small></small></small></a><br>
<br>
<a style="color: black;"
href="http://www.la-petite-reine-de-sion.net/ ... <big><span
style="text-decoration: underline;"></span>Téléchargements</big></big></a><br>
<small><small>
</small></small><br>
<small><small>
<a style="color: black;"
href="http://www.la-petite-reine-de-sion.net/ ... g><big>Big
Sorties 2013</big></big></big></big></a>
</small></small><br>
<small><small><big>
</big></small></small><br>
<small><small>
<a style="color: black;"
href="http://www.la-petite-reine-de-sion.net/ ... ig>Sorties
2013</big></big></big></big></a></small></small><br>
<small>
</small><br>
<small><small>
<a style="color: black;"
href="http://www.la-petite-reine-de-sion.net/ ... /small><br>
<small><small>
</small></small><br>
<small><small>
<a style="color: black;"
href="http://www.la-petite-reine-de-sion.net/ ... /small><br>
<small><small>
</small></small><br>
<small><small>
<a style="color: black;" href="Sites%20web%20preferes.html"><big><big><big><big>Liens</big></big></big></big></a></small></small><br>
<br>
<small><small><small><small><small><big><big><big><big><big><big><big><span
style="color: black;"><a target="_blank" style="color: black;"
href="http://www.landi.ch/meteo/fra/niedersch ... téo</a><br>
</span></big></big></big></big></big></big></big><small> <br>
</small></small></small></small></small></small></div>
<div style="text-align: center;"><big><big
style="color: black; font-style: italic;"><big><big><big>Un club pour
tous!!</big></big></big></big></big>
<br>
</div>
<div style="text-align: left; margin-left: 0px; width: 1500px;"><big><span
style="font-weight: bold; font-style: italic; text-decoration: underline;"></span></big>
<div style="text-align: left; width: 1500px;">
<div style="text-align: center;"><br>
</div>
<div style="text-align: center;"><big><span
style="font-weight: bold; font-style: italic; text-decoration: underline;">Veuillez
utiliser le browser <a
href="http://www.mozilla.org/fr/download/?pro ... Firefox</a>
pour une vision parfaite du site 1500x900 </span><span
style="font-weight: bold; font-style: italic;"> <span
style="color: red;">web creator: Loris Falcinelli alias "Giclettte"</span></span></big></div>
</div>
</div>
</div>
</div>
</body>
</html>

Message par **chinon37** » 13 déc. 2012, 13:19

Bonjour,

Malgré l'aspect très sympa de ton site, il serait nécessaire de revoir le code, très lourd. Mais cela nécessite quelques connaissances en Css qui viendront avec le temps.

Pour le problème qui te préoccupe, il suffit, pour la balise <body>, de mettre des marges auto à droite et à gauche:
clic droit sur body dans la barre de tâches en bas de l'écran > styles internes > boite > marges

Mais il serait souhaitable de faire une feuille de style Css au lieu de mêler tous les styles au code html

Un peu d'aide ici: http://josar.free.fr/tutoKompozer/index.html ou ici: http://info.sio2.be/kpz/

Rasty · Message par **Rasty** » 14 déc. 2012, 06:25

Merci!!!!!!!!!!!!!!!!!! J'ai passé des heures pour chercher.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0

Message par **chinon37** » 14 déc. 2012, 10:14

De rien

Quelques petits conseils tout de même:
-Il faut éviter d'utiliser les outils "plus grand" et "plus petit" qui donnent des codes très lourds et aberrants exemple:

Code : Tout sélectionner

</big></big></big></big></big></big><small><small><small>

Il est préférable d'utiliser les fonctions css qui permettent de définir précisément la taille des polices.
exemple: à la place de :

Code : Tout sélectionner

<div style="text-align: center; width: 1502px;"><big><big><big><big><big><big style="color: black;"><span style="font-family: Arial Unicode MS;">La
Petite Reine de Sion</span></big></big></big></big></big></big><small><small><small><span style="color: black;"></span></small></small></small><br>

, on peut mettre:

Code : Tout sélectionner

<div style="text-align: center; width: 1502px;"><span style="font-family: Arial Unicode MS; font-size: 70px; color: black;">La
Petite Reine de Sion</span>

C'est tout de même plus simple!
- De même, plutôt que jouer de la touche entrée ou de la barre d'espacement pour positionner les différents éléments, il est préférable de donner des tailles et positions aux différents blocs.

Un petit passage par les tutos cités ci-dessus devrait t'aider.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0

Rasty · Message par **Rasty** » 14 déc. 2012, 12:38

Merci beaucoup, je vais remédier à cela, je profite de votre gentillesse un peu plus.

Comment faire pour fixer mon tableau News dans la page?
En effet lorsque j'utilise le zoom celui-ci ne suit pas le reste de la page et il part du coté opposé.

Merci encore.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0

Geckozone

Page web qui reste sur le bord gauche haut

Page web qui reste sur le bord gauche haut

Re: Page web qui reste sur le bord gauche haut

Re: Page web qui reste sur le bord gauche haut resolu

Re: Page web qui reste sur le bord gauche haut résolu

Re: Page web qui reste sur le bord gauche haut

Qui est en ligne ?