Comment center son design

The s -  
 The s -
Bonjour a tous ^^

J'ai créer un design pour un site web ou plutôt dire un Kit Graphique j'ai passé par le découpage et tous...
mais le problème est comment le centrer je ne suis pas doué en CSS ou Xhtml...
S'il y a quelqu'un qui peut m'aider je suis vraiment bloqué

Voici ma page :

<html>
<head>
<title>psyren-psycher1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- ImageReady Styles (psyren-psycher1.psd) -->
<style type="text/css">
<!--

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:1000px;
}

#psyren-psycher123-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:12px;
}

#psyren-psycher123-02 {
position:absolute;
left:0px;
top:12px;
width:16px;
height:988px;
}

#header {
position:absolute;
left:16px;
top:12px;
width:770px;
height:208px;
}

#psyren-psycher123-04 {
position:absolute;
left:786px;
top:12px;
width:14px;
height:988px;
}

#psyren-psycher123-05 {
position:absolute;
left:16px;
top:220px;
width:557px;
height:19px;
}

#index {
position:absolute;
left:573px;
top:220px;
width:57px;
height:19px;
}

#psyren-psycher123-07 {
position:absolute;
left:630px;
top:220px;
width:156px;
height:2px;
}

#psyren-psycher123-08 {
position:absolute;
left:630px;
top:222px;
width:3px;
height:778px;
}

#forum {
position:absolute;
left:633px;
top:222px;
width:63px;
height:17px;
}

#psyren-psycher123-10 {
position:absolute;
left:696px;
top:222px;
width:2px;
height:778px;
}

#Top-site {
position:absolute;
left:698px;
top:222px;
width:88px;
height:17px;
}

#psyren-psycher123-12 {
position:absolute;
left:16px;
top:239px;
width:167px;
height:71px;
}

#psyren-psycher123-13 {
position:absolute;
left:183px;
top:239px;
width:447px;
height:761px;
}

#psyren-psycher123-14 {
position:absolute;
left:633px;
top:239px;
width:63px;
height:761px;
}

#psyren-psycher123-15 {
position:absolute;
left:698px;
top:239px;
width:88px;
height:761px;
}

#psyren-psycher123-16 {
position:absolute;
left:16px;
top:310px;
width:167px;
height:690px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (psyren-psycher1.psd) -->
<div id="Table_01">
<div id="psyren-psycher123-01">
<img src="images/psyren-psycher123_01.gif" width="800" height="12" alt="">
</div>
<div id="psyren-psycher123-02">
<img src="images/psyren-psycher123_02.gif" width="16" height="988" alt="">
</div>
<div id="header">
<img src="images/header.gif" width="770" height="208" alt="">
</div>
<div id="psyren-psycher123-04">
<img src="images/psyren-psycher123_04.gif" width="14" height="988" alt="">
</div>
<div id="psyren-psycher123-05">
<img src="images/psyren-psycher123_05.gif" width="557" height="19" alt="">
</div>
<div id="index">
<img src="images/index.gif" width="57" height="19" alt="">
</div>
<div id="psyren-psycher123-07">
<img src="images/psyren-psycher123_07.gif" width="156" height="2" alt="">
</div>
<div id="psyren-psycher123-08">
<img src="images/psyren-psycher123_08.gif" width="3" height="778" alt="">
</div>
<div id="forum">
<a href="https://psyren.forumth.com/login" target="_blank">
<img src="images/forum.gif" width="63" height="17" border="0" alt=""></a>
</div>
<div id="psyren-psycher123-10">
<img src="images/psyren-psycher123_10.gif" width="2" height="778" alt="">
</div>
<div id="Top-site">
<img src="images/Top-site.gif" width="88" height="17" alt="">
</div>
<div id="psyren-psycher123-12">
<img src="images/psyren-psycher123_12.gif" width="167" height="71" alt="">
</div>
<div id="psyren-psycher123-13">
<img src="images/psyren-psycher123_13.gif" width="447" height="761" alt="">
</div>
<div id="psyren-psycher123-14">
<img src="images/psyren-psycher123_14.gif" width="63" height="761" alt="">
</div>
<div id="psyren-psycher123-15">
<img src="images/psyren-psycher123_15.gif" width="88" height="761" alt="">
</div>
<div id="psyren-psycher123-16">
<img src="images/psyren-psycher123_16.gif" width="167" height="690" alt="">
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>



Merci d'avance ^^
A voir également:

6 réponses

LeYaude Messages postés 304 Date d'inscription   Statut Membre Dernière intervention   46
 
Pour centrer toute la page sur l'écran, tu peux essayer en CSS :

body
{
margin : auto;
}

En fait ça permet de centrer n'importe quel élément (block) au milieu de la page.
0
The s
 
Dans quelle ligne dois-je le placer ? (j'ai peine commencer dans ce domaine Y_Y)
0
LeYaude Messages postés 304 Date d'inscription   Statut Membre Dernière intervention   46
 
Par exemple au tout début du fichier CSS, c'est l'usage de placer les propriétés "générales" des "grosses" balises au début, mais d'un point de vue purement technique tu peux le placer là où tu veux.

En fait tu le sais peut-être, mais la synthaxe du CSS fonctionne de la manière suivante :

nom_de_la_balise
{
ici on met les propriétés de la balise
}


autre_balise
{
propriétés
}

etc...


Et si tu veux aller un peu plus loin dans l'apprentissage (simple) du html et du css : https://openclassrooms.com/fr/courses

Bon courage pour ton site !
0
The s
 
Merci pour ta reponse ^^

J'ai placer le code au debut du code CSS mais rien n'est passer :s
peux-tu me corriger voici ce que j'ai fait :

<html>
<head>
<title>psyren-psycher1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- ImageReady Styles (psyren-psycher1.psd) -->
<style type="text/css">
<!--

body
{
margin : auto;
}

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:1000px;
}

#essey-01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:12px;
}

#essey-02 {
position:absolute;
left:0px;
top:12px;
width:16px;
height:988px;
}

#header {
position:absolute;
left:16px;
top:12px;
width:770px;
height:208px;
}

#essey-04 {
position:absolute;
left:786px;
top:12px;
width:14px;
height:988px;
}

#essey-05 {
position:absolute;
left:16px;
top:220px;
width:557px;
height:19px;
}

#index {
position:absolute;
left:573px;
top:220px;
width:57px;
height:19px;
}

#essey-07 {
position:absolute;
left:630px;
top:220px;
width:156px;
height:2px;
}

#essey-08 {
position:absolute;
left:630px;
top:222px;
width:3px;
height:17px;
}

#forum {
position:absolute;
left:633px;
top:222px;
width:63px;
height:17px;
}

#essey-10 {
position:absolute;
left:696px;
top:222px;
width:2px;
height:17px;
}

#Top-site {
position:absolute;
left:698px;
top:222px;
width:88px;
height:17px;
}

#essey-12 {
position:absolute;
left:16px;
top:239px;
width:167px;
height:71px;
}

#essey-13 {
position:absolute;
left:183px;
top:239px;
width:30px;
height:114px;
}

#Last-releases {
position:absolute;
left:213px;
top:239px;
width:560px;
height:71px;
}

#essey-15 {
position:absolute;
left:773px;
top:239px;
width:13px;
height:761px;
}

#essey-16 {
position:absolute;
left:16px;
top:310px;
width:167px;
height:43px;
}

#essey-17 {
position:absolute;
left:213px;
top:310px;
width:560px;
height:33px;
}

#essey-18 {
position:absolute;
left:213px;
top:343px;
width:413px;
height:10px;
}

#Main-Navigation {
position:absolute;
left:626px;
top:343px;
width:147px;
height:630px;
}

#essey-20 {
position:absolute;
left:16px;
top:353px;
width:16px;
height:647px;
}

#actus---news {
position:absolute;
left:32px;
top:353px;
width:560px;
height:589px;
}

#essey-22 {
position:absolute;
left:592px;
top:353px;
width:34px;
height:647px;
}

#essey-23 {
position:absolute;
left:32px;
top:942px;
width:560px;
height:58px;
}

#essey-24 {
position:absolute;
left:626px;
top:973px;
width:147px;
height:27px;
}

-->
</style>
0
LeYaude Messages postés 304 Date d'inscription   Statut Membre Dernière intervention   46
 
Bizarre, le CSS se comporte bizarrement des fois, d'ailleurs je suis en train de faire un design et je me suis bien arraché les cheveux hier ! lol.
Essaie de retirer les caractères "<!--" au début, et "-->" à la fin de ton CSS, ce sont des commentaires HTML qui je pense n'ont rien à faire au milieu d'une feuille de style.
0
The s
 
J'ai essayé ce que tu m'a dit mais sans succé Y_Y

Ça fait presque deux jour que ce problème me torture
0
The s
 
S'il vous plait aidez moi, je suis vraiment bloqué
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
The s
 
Y'a quelqu'un ici qui peux m'aider u_u
0
The s
 
up
0