Comment center son design
The s
-
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 ^^
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:
- Comment center son design
- Control center 4 - Télécharger - Divers Utilitaires
- Copytrans control center - Télécharger - Divers Utilitaires
- Catalyst control center - Télécharger - Pilotes & Matériel
- Family center - Guide
- Etd control center - Forum Virus
6 réponses
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.
body
{
margin : auto;
}
En fait ça permet de centrer n'importe quel élément (block) au milieu de la page.
The s
Dans quelle ligne dois-je le placer ? (j'ai peine commencer dans ce domaine Y_Y)
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 !
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 !
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>
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>
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question