Je ne suis même pas débutante, j'en suis aux balbutiements, et je demande votre aide et votre clémence.
Je m'essaye sur un CMS (GPeasy) et je suis complètement bloquée.
J'aimerai centrer le background
J'aimerai aussi centrer le header et le background du header
J'ai tout essayé, ça fait 3 jours que je peine, j'ai besoin d'un coup de pouce
Une bonne âme ? Merci par avance.
Aline.
Et voici le code:
/**
* name: style.css (default)
* author: Paulo Nunes (Jimmy) http://proj.syndicate-fx.com/gpthemes
* date: 31.08.2011
* use: Cobalt - template for gpeasy 2.0+
*/
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-weight:400;font-style:normal;font-size:100%;line-height:1;font-family:inherit;margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{liststyle:none;}
q:before,q:after,blockquote:before,blockquote:after{content:"";}
.clearfix{zoom:1px;}
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;font-weight:400;line-height:18px;color:#d6d6d6;text-rendering:optimizeLegibility;margin:0;}
a{color:#91BACF;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#C0C7D6;}
p{font-size:13px;font-weight:400;line-height:18px;margin-bottom:9px;}
p small{font-size:11px;}
h1,h2,h3,h4,h5,h6{font-weight:700;color:#E5E3E1;text-shadow:0 1px 1px #000;clear:both}
h1{margin-bottom:18px;font-size:30px;line-height:36px;}
h2{font-size:24px;line-height:36px;}h3,h4,h5,h6{line-height:36px;}
h4{font-size:16px;}
h4 small{font-size:12px;}
h6{font-size:13px;color:#bfbfbf;text-transform:uppercase;}
ul,ol{margin:0 0 18px 25px;}
ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
ul{list-style:disc;}
ol{list-style:decimal;}
ul.unstyled{list-style:none;margin-left:0;}
dl{margin-bottom:18px;}
dl dt{font-weight:700;}
dl dd{margin-left:9px;}
hr{border:0;border-bottom:1px solid #eee;margin:0 0 19px;}
strong{font-style:inherit;font-weight:700;line-height:inherit;}
em{font-style:italic;font-weight:inherit;line-height:inherit;}
.muted{color:#e6e6e6;}
blockquote{margin-bottom:18px;border-left:5px solid #eee;padding-left:15px;}
blockquote p{font-size:14px;font-weight:300;line-height:18px;margin-bottom:0;}
blockquote small{display:block;font-size:12px;font-weight:300;line-height:18px;color:#bfbfbf;}
blockquote small:before{content:'\2014 \00A0';}
address{display:block;line-height:18px;margin-bottom:18px;}
code,pre{font-family:Monaco, Andale Mono, Courier New, monospace;font-size:12px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:0 3px 2px;}
code{background-color:#fee9cc;color:rgba(0, 0, 0, 0.75);padding:1px 3px;}
pre{width:90%;background-color:#f5f5f5;display:block;line-height:18px;font-size:12px;border:1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:pre-wrap;margin:0 0 18px;padding:17px;}
h1 small,h3{font-size:18px;}
h2 small,h3 small,h5{font-size:14px;}li,dl dt,dl dd{line-height:18px;}
::-moz-selection{background:#22A0CE;color:#fff;}
::selection{background:#22A0CE;color:#fff;}
/*------------------------------------------
******Form Elements for Content Only********
------------------------------------------*/
#content form{margin-bottom:18px;}
#content form fieldset{margin-bottom:18px;padding-top:18px;}
#content form fieldset legend{display:block;margin-left:150px;font-size:20px;margin:0 0 5px 145px;line-height:1.5;color:#404040;}
#content form label,#content form input,#content form select,#content form textarea{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:13px;font-weight:normal;line-height:normal;}
#content form label{font-size:13px;line-height:18px;color:#404040;}
#content form input[type=checkbox],#content form input[type=radio]{cursor:pointer;}
#content form input[type=text],#content form input[type=password],#content form textarea,#content form select{font-size:13px;line-height:18px;height:18px;background:#252C34;color:#d6d6d6;border:1px solid #252C34;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
#content form select,#content form input[type=file]{height:27px;line-height:27px;}
#content form textarea{height:auto;}
#content form input[type=text],#content form input[type=password],#content form select,#content form textarea{-webkit-transition:border linear 0.2s, box-shadow linear 0.2s;-moz-transition:border linear 0.2s, box-shadow linear 0.2s;transition:border linear 0.2s, box-shadow linear 0.2s;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);}
#content form input[type=text]:focus,#content form input[type=password]:focus,#content form textarea:focus{outline:none;background:#2A313A;border-color:rgba(47, 74, 94, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(52, 94, 124, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(52, 94, 124, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(52, 94, 124, 0.6);}
.btn,#content input[type=submit]{cursor:pointer;display:inline-block;background-color:#394C62;background-repeat:no-repeat;background-image:linear-gradient(#252D36, #252D36 0.25, #394C62);padding:4px 14px;text-shadow:0 1px 1px #252C34;color:#d6d6d6;font-size:13px;line-height:18px;border:1px solid #252C34;border-bottom-color:#222;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;transition:0.1s linear all;}
.btn:hover,#content input[type=submit]:hover{background-position:0 -15px;color:#eee;text-decoration:none;}
#content button.btn::-moz-focus-inner,#content input[type=submit]::-moz-focus-inner{padding:0;border:0;}
/***********************************
------------THEME LAYOUT------------
***********************************/
body{
background:#00FFFF url(pat.png);
background-position:center;}
border-top :100px solid #00FFFF;
#header,#content,#footer{width:930px;padding:20px 10px;margin:0 auto;zoom:1}
#header:before,#header:after,#content:before,#content:after,#footer:before,#footer:after{display:table;content: ""}
#header:after,#content:after,#footer:after{clear:both}
/*---Header Section---*/
#header{background:url(header.png) 0 0% repeat;height:250px;border-bottom:0px solid #1A2128;padding-top:0;position:center;}
#header div{float:center;width:460px;margin-left:0px;position:center;}
#header div:first-child{margin-left:0;}
#header h1{font-family:'Lobster Two', cursive;font-size:36px;margin:10px 0 5px 0}
#header h1 a:hover{color:#fff}
#header h4{color:#B19B5F}
/*---Main Navigation---*/
.nav{background:#3E546D;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#3E546D), to(#252C34));background-image:-moz-linear-gradient(#3E546D, #252C34);background-image:-ms-linear-gradient(#3E546D, #252C34);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #3E546D), color-stop(100%, #252C34));background-image:-webkit-linear-gradient(#3E546D, #252C34);background-image:-o-linear-gradient(#3E546D, #252C34);background-image:linear-gradient(#3E546D, #252C34);-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);background-position:center;}
.nav a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}
.nav ul{display:block;float:left;margin:0 10px 0 0;position:relative;z-index:2}
.nav ul li{display:block;float:left;font-size:13px;}
.nav ul li a{display:block;float:none;padding:10px 10px 11px;line-height:19px;text-decoration:none;}
.nav ul li a:hover{background:#252C34;background-color:rgba(0, 0, 0, 0.5);color:#fff;text-decoration:none;}
.nav ul li a.selected{background-color:#1A2128;color:#fff;cursor:default;}
.nav ul li:first-child a.selected{-webkit-border-radius:0 0 0 5px;-moz-border-radius:0 0 0 5px;border-radius:0 0 0 5px;}
.nav ul li ul{background-color:#252C34;float:center;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:0;text-align:left;border:0;zoom:1;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);background-position:center;}
.nav ul li ul li{float:none;clear:both;display:block;background:none;position:center;font-size:12px;border-top:1px solid #353F49;border-bottom:1px solid #1A2128;}
.nav ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}
.nav ul li ul li a:hover{background-color:#1A2128;color:#fff;}
.nav ul li ul li:last-child a.selected,.nav ul li ul li:last-child a:hover{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}
.nav ul li:hover ul{display:block}
/*---Content Section---*/
#content{border-top:1px solid #353F49;border-bottom:1px solid #1A2128;background-position:center;}
#content img{border:5px solid #252C34;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}
#content a img:hover{border:5px solid #f5f5f5;}
#content p img{float:left;margin:0 10px 0 0;}
.page{float:left;width:650px;margin-left:0;}
.sidebar{float:left;width:220px;background:#1A2128;border:5px solid #252C34;color:#aaa;margin-left:0px;padding:10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}
.sidebar h1,.sidebar h2,.sidebar h3,.sidebar h4,.sidebar h5{color:#B19B5F}
.sidebar ul.menu_top li{list-style:none}
/*---Footer Section---*/
#footer{border-top:1px solid #353F49;}
#footer div{float:left;width:280px;margin-left:20px;}
#footer div:first-child{margin-left:0;}
#footer h1,#footer h2,#footer h3,#footer h4,#footer h5{color:#B19B5F}
/***********************************
------------gpEASY STUFF------------
***********************************/
.admin p{font-size:11px;text-align:center;margin-top:20px}
#loginform,#loginform label{background:none!important;border:none!important;color:#d6d6d6!important}
#loginform p label{float:none;}
#loginform input[type=text],#loginform input[type=password]{color:#d6d6d6!important}
.contactform label{color:#d6d6d6!important;}
.contactform .submit{width:72%;}
/****************/
.gp_gallery{clear:both;margin:25px 0 25px 25px;padding:0;}
.gp_gallery li{float:left;width:114px;height:114px;overflow:hidden;list-style:none;display:inline-block;margin:0 20px 15px 0;padding:0;background:none;border:none;color:#d6d6d6;position:relative;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
.gp_gallery div{text-align:center;padding:5px;margin:110px 0 0 0;}
.gp_gallery img{top:0;left:0;position:absolute;margin:0;}
.gp_gallery .caption{display:none;}
.gp_galleries li{width:114px;height:195px;background:none}
.gp_galleries img{width:100px;height:100px;}
/***********/
.gpArea_Simple_Search:before,.gpArea_Simple_Search:after{display:table;content: ""}
.gpArea_Simple_Search:after{clear:both}
.gpArea_Simple_Search form input.text{width:150px!important;float:left;}
.gpArea_Simple_Search form input.submit{float:right;width:60px;}
/************/
.simple_blog_info{font-size:11px;text-align:right}
.gpArea_Simple_Blog .simple_blog_abbrev{padding-bottom:30px;}
.gpArea_Simple_Blog h3 a{color:#B19B5F}
.comment_container{border-top:1px solid #252C34}
.comment_container h3{color:#B19B5F}
.comment_container .comment_area{width:80%;background:#252C34;padding:5px;margin:15px 0}
.comment_container .comment_area .name{border-bottom:1px #2D343C solid;padding-bottom:5px}
.comment_container .comment_area .name span{float:right;font-size:11px}
.comment_container .comment_area .comment{margin:10px 0;}
.comment_container div,.comment_container input.submit{margin:5px 0;}
bon nombre de personne s'en servent s'en savoir ce qu'ils en font, il est bon de connaître la base du javascript avant cela ... de plus les navigateurs devenant de plus en plus cohérent, il y a plus léger que jQuery comme Lib ... enfin, ceci n'est qu'un avis ^^ 