Titre: centrer en CSS
Posté par: arnaudb le le 26-04-2005 a 12:06:48
Bonjour,
J'ai fais cette feuille de style pour la mise en forme de mon site et j'aimerais savoir comment centrer mon site sur la page?
body {
color: #000000;
background-image: url ("../images/background.jpg");
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-top: 05px;
margin-bottom: 05px;
}
#header {
position: absolute;
width: 980px;
height: 185px;
margin-left: auto;
margin-top: auto;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
}
#menuhaut {
position: absolute;
background-image: url(../images/menuhaut.gif);
background-repeat:no-repeat;
width: 979px;
height: 20px;
margin-left: auto;
margin-top: 186px;
border: 01px solid #000000;
}
#skyscrapper {
color: #000000;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
position: absolute;
background-color: #FFFFFF;
border: 01px solid #000000;
width: 120px;
height: 612px;
margin-top: 212px;
margin-left: 858px;
}
#menugauche {
position: absolute;
background-color: #FFFFFF;
border: 01px solid #000000;
width: 130px;
height: 612px;
margin-top: 212px;
margin-left: auto;
}
#googleads {
position: absolute;
background-color: #FFFFFF;
border: 01px solid #000000;
width: 715px;
height: 90px;
margin-top: 212px;
margin-left: 136px;
}
#contenu {
position: absolute;
background-color: #FFFFFF;
border: 01px solid #000000;
width: 715px;
height: 515px;
margin-top: 309px;
margin-left: 136px;
}
#footer {
position: absolute;
background-color: #FFFFFF;
background-image: url(../images/footer.gif);
background-repeat: no-repeat;
width: 980px;
height: 30px;
margin-top: 830px;
margin-left: auto;
border: 01px solid #000000;
}
INPUT {
color: #004F77;
border-width: 1px;
border-color: #000000;
background-color: #F6F6F6;
font-size: 12px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
SELECT {
color: #004F77;
border-width: 1px;
border-color: #000000;
background-color: #F6F6F6;
font-size: 12px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
Merci.
Arnaud |
Titre: Re:centrer en CSS
Posté par: dhjapan le le 26-04-2005 a 17:48:12
come je vois que personne n'a l'air de repondre j'vais m'essayer :
je mettrai :
html,body{width:100%;height:100%;text-align:center;vartical-align:middle;}
je crois que c'est la bonne syntaxe.
bonne chance |
Titre: Re:centrer en CSS
Posté par: arnaudb le le 26-04-2005 a 17:57:29
| J'ai esayer mais cela me deplace la page vers la droite ? |
Titre: Re:centrer en CSS
Posté par: dhjapan le le 26-04-2005 a 18:25:16
oui pour body,html il faut rajouter margin:0px;
.. et change 100% par 99% pour pas te retrouver avec une riducule bar de scroll sous firefox..
ca donne :
body,html {width:100%;height:99%;margin: 0px;}
div#centrezmoi{ text-align:center;border: solid 1px #FF0000;height:100%;vertical-align:center;}
... mais vertical-align marche pas...
si le contenu de ton site à une taille fix tu peux essayer ca :
http://www.cyberformateur.com/cours_css/exemples/centrage_image.htm
si quelqu'un à une idée pour centrer un objet de taille variable verticalement dans une page, je prends :)
merci |
Titre: Re:centrer en CSS
Posté par: arnaudb le le 26-04-2005 a 19:07:28
| Bon ben cela ne fonctionne toujours pas ??? |
Titre: Re:centrer en CSS
Posté par: jb_gfx le le 26-04-2005 a 19:45:18
pour centrer un bloc horizontalement sur les navigateurs récents ET IE5 Mac et Windows :
Code:
body {
margin:0; /* supprime les marges */
padding: 0; /* supprime les marges intérieures */
text-align: center; /* centrer horizontalement sous IE 5 */
}
#centre {
margin: auto; /* centre horizontalement sur les navigateurs conformes CSS */
text-align: left; /* rétablie l'alignement du texte (voir body) */
width: 700px; /* définir la largeur, obligatoire pour centrer le bloc */
}
|
|
Et c'est tout!
Pour centrer horizontalement ET verticallement tu devra plutot utiliser du javascript ou les marges négatives (cela ne fonctionne pas correctement sous IE5 mac).
Voir tuto ici :
http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS
PS: vertical-align fonctionne trés bien, c'est juste qu'il sert à aligner le TEXTE verticallement par rapport à la hauteur de LIGNE. Ce n'est pas du tout déstiné à centrer un bloc verticallement. |
Titre: Re:centrer en CSS
Posté par: arnaudb le le 26-04-2005 a 20:06:42
OK,
j'ai regardé le lien et j'ai donc rajouté position:relative;
comme j'ai des élements positionnés et cela marche très bien
Code:
body {
color: #000000;
background-image: url("../images/background.jpg");
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin:0;
padding: 0;
text-align: center;
} |
|
Code:
#pagetotal {
position: relative;
margin-left: auto;
margin-right: auto;
width: 960px;
text-align: left;
background-color: #FFFFFF;
} |
|
|
Titre: Re:centrer en CSS
Posté par: Madrileño le le 03-05-2005 a 12:26:49
Merci jb_gfx je cherchais ce lien sur Alsa ;D
Sinon vous avez d'autres sites (j'en profite) pour le css ? ;) |
Titre: Re:centrer en CSS
Posté par: _Mikl le le 03-05-2005 a 13:04:09
http://www.csszengarden.com/tr/francais/
http://www.openweb.eu.org/articles/initiation_css/
http://www.ifrance.com/maxpgratuit/web/css/index.html
http://mammouthland.free.fr/cours/css/index.php
http://www.trucsweb.com/Sites/sites.asp?type=12&sujet=1
http://perso.wanadoo.fr/arsene.perez-mas/html/css/sommaire_css.htm
http://www.richinstyle.com/bugs/table.html
http://dicolive.media-box.net/docCSS/css.php?orderByType=1
http://www.yoyodesign.org/doc/w3c/css2/cover.html
http://www.aidenet.com/css/
http://css-astuces.batraciens.net/
http://joueb.com/css/
http://www.infini-fr.com/Sciences/Informatique/Reseaux/Internet/WorldWideWeb/Css/
http://www.netalya.com/fr/Css-intro.asp
http://pompage.net/pompe/impression/
http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_49/
http://www.tuteurs.ens.fr/internet/web/html/css.html
http://www.neokraft.net/articles/les-standards-en-six-mois/
http://www.xhtml.net/xhtmlcss/
http://www.grappa.univ-lille3.fr/~torre/guide.php?id=tpcss
http://www.weblogger.ch/blog/archives/category/programmation-web/css/
http://www.cigogne.net/site4189.html
http://www.iutc3.unicaen.fr/~stincs/ged/x1568.html
http://www.weboutils.com/services/generateurcss.html
http://www.parinux.org/activites/conf/css/index.html
http://blog-and-blues.org/weblog/2004/08/15/274-utiliser-clip-pour-masquer-du-contenu-de-maniere-accessible
par exemple.... |
Titre: Re:centrer en CSS
Posté par: AliochaBada le le 14-05-2005 a 01:00:30
super les liens Mikl :)
Le site csszengarden meme si difficile d'acces pour un nephyte propose sur un meme theme une meme structure HTML plein de pages CSS differentes, ca fourmille d'idees et pour chaqu'un de ces exemples la page css est telechargeable et etudiable. Classe en tout cas comme idée :)
Et merci encore Mikl d'avoir regroupé tous ces liens |
Titre: Re:centrer en CSS
Posté par: _Mikl le le 14-05-2005 a 08:24:04
Zengarden est la preuve qu'on peut faire de très beaux sites sans y mettre obligatoirement du flash...
D'ailleurs on peut proposer sa version donc si l'inspiration te gagne...
Pour apprendre c'est clair que certains de ces liens sont un peu avancés mais ca permet de se faire une bonne idée du css et de ses possibilités...
Personnellement moi je suis conquis!
Bon amusement...
;) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|