/** * Build-System design * * CODE IS AN EXAMPLE - EVERYTHING CAN BE MODIFIED BUT PLEASE KEEP ORIGINAL COMMENTS WHEN POSSIBLE * * DO NOT use reset.css * * In this stylesheet, any use of "standard html tag" (like h1, p, a, img, ...) must be made within a div container to not interfere with standard user's content's style. * (For these standard tags, see "contenu.css") * This stylesheet is used to design site's structure, but not the user's standard content. * * The structure of this site : * #bodyWrapper * #headerWrapper * #header / General site header, static * #infoSite / Informations about the site, generally site name and a slogan * #navWrapper * #nav / Navigation : this is where are included imbricated ul (plan 3 levels) defining the sitemap * #pageWrapper * #pageHeader / Static header for user's content * #pageBody / This is where user's content is included * #pageFooter / Static footer for user's content * #footerWrapper * #footer / General site footer, static * * This structure can modified to fit the design's needs, but should stay close, unnecessary divs should be kept empty. * (If you are not sure, please contact us to validate) * * @colordef #94c01e; vert * @colordef #1a171b; noir * @colordef #ed6c05; orange * * @fontdef 'titillium', Arial, sans-serif; police par dŽfaut */ html, body { margin:0; padding:0; height:100%; } /** * If we setup a background on , design is broken when the admin menu is displayed. * To avoid this, the background is done in a wrapper. * @section wrapper * @tree #bodyWrapper */ #bodyWrapper { background: url('/BuildSystems/local/images/publicationBg.jpg') no-repeat center 28px; } #bodyWrapperHome { background: url('/BuildSystems/local/images/homeBg.jpg') no-repeat center 35px; } /** * @section header * @tree #bodyWrapper > #headerWrapper */ #headerWrapper { width:100%; margin:0 auto; border-top:40px solid #94c01e; } /** * @tree #bodyWrapper > #headerWrapper > #header */ #header { position:relative; margin:0 auto; height:120px; width:960px; } /** * @tree #bodyWrapper > #headerWrapper > #header > #infoSite */ #infoSite h1 { /* h1 displays the site's name */ border:none; padding:0; margin:0; } #infoSite h1 a { /* link to the home page : site's name is replaced by the logo */ display:block; width:192px; height:80px; position:absolute; left:20px; top:40px; background:url('/BuildSystems/local/images/logo.png') no-repeat; } #infoSite h1 a span { /* hide the site's name */ display:none; } #infoSite h2 { /* Can be used to display additional content like a slogan */ color:#1a171b; font-size:20px; font-weight:normal; margin:0; padding:0; position:absolute; top:69px; left:260px; } /** * Navigation * @section nav * @tree #bodyWrapper > #navWrapper */ #navWrapper { width:960px; margin:0 auto; position:relative; } /** * @tree #bodyWrapper > #navWrapper > #nav */ #nav { position:absolute; right:17px; top:15px; } /** * First level : horizontal navig */ #nav ul { list-style:none; margin:0; padding:0; } #nav ul li { display:block; float:left; border-right:1px solid #ed6c05; padding:2px 0 0 0; } #nav ul li a { text-decoration:none; color:#ed6c05; margin:0 15px 0 50px; font-size: 15px; } #nav ul li.ouvert a { color:#1a171b; } #nav ul li.ferme a { } #nav ul li.ferme a:hover { text-decoration:underline; } /** * Page * @section page * @tree #bodyWrapper > #pageWrapper */ #pageWrapper { width:100%; margin:100px 0 0 0; } /** * @tree #bodyWrapper > #pageWrapper > #pageHeader, #pageBody, #pageFooter */ #pageHeader, #pageBody, #pageFooter { width:960px; margin:0 auto; } /** * Footer * @section footer * @tree #bodyWrapper > #footerWrapper */ #footerWrapper { width:100%; height:100%; background:#94c01e; } /** * @tree #bodyWrapper > #footerWrapper > #footer */ #footer { width:960px; margin:30px auto 0; height:85px; } #footer p { float:left; vertical-align: top; padding:0 100px 0 0; } #footer a { color:#1a171b; text-decoration:none; padding:0 15px; } #footer a:hover { text-decoration:underline; } /** * NOTES : * previous section coded the site's global structure and design * in this design "#bodyWrapper > #pageWrapper > #page > #pageBody" will be filled with various type of presentations : publications, tab-lists, ul-list, ... * ("publication" is necessary, others depend on the site's needs) * next section setup these different types of presentations */ /** * @section #PAGpublication, #PAGpublicationFull */ #PAGpublication { position: relative; } /** * Setup publication's content. * Generally done in "contenu.css". * The difference is : here, we'll generally code tags that aren't used by the user to preview his content in backoffice * (like automaticaly generated forms) * @section PAGpublication * @tree #bodyWrapper > #pageWrapper > #page > #pageBody > #PAGpublication */ #PAGpublication fieldset { border:none; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; position:relative; top:1em; margin:0 0 20px 0; padding:10px; } #PAGpublication fieldset legend { font-weight:bold; font-size:14px; position:absolute; top:-21px; } #PAGpublication fieldset p span { width:180px; display:block; float:left; } #PAGpublication label span { display:block; clear:both; } #PAGpublication input { width:500px; } #PAGpublication input.booleen { width:auto; } #PAGpublication input[type="submit"] { width:auto; } #PAGpublication textarea { width:500px; } #PAGpublication p.PACtype_libelle { font-weight:bold; } /** * Standard ul li list * @section PLLliste * @tree #bodyWrapper > #pageWrapper > #page > #pageBody > #PLLliste */ #PLLliste ul { padding:0; margin:0; list-style:none; } #PLLliste ul li { border-bottom:1px solid #e2e2e2; margin-bottom:10px; } /** * Classes particulires **/ #bodyWrapperHome #pageWrapper { margin-top:700px; } #homeSlogan { display: block; width:310px; position:absolute; left:610px; top:-600px; } #homeSlogan h2 { color:#ffffff; font-size:24px; font-weight:100; opacity: 0.9; } #homeSlogan h2 strong { font-weight: 400; } .losange { display: block; width:251px; height:64px; padding-top:20px; background: url('/BuildSystems/local/images/losange.png') no-repeat; text-align: center; font-weight:700; } #losange1 { position: absolute; top:-180px; right:-10px; } #losange2 { position: absolute; top:-140px; right:130px; } #losange3 { position: absolute; top:-100px; right:-10px; } #bodyWrapper #pageWrapper { margin:300px 0 60px 0; } .titre1 h1 { position:absolute; top:-220px; right:0; font-size:36px; font-weight: 400; margin-right:40px; color:#ed6c05; text-align: right; } .titre2 h2 { font-size:24px; font-weight: 300; color:#ffffff; background: #94c01e url('/BuildSystems/local/images/arrondi.png') no-repeat left center; margin:0; padding:3px 50px 3px 20px; position:absolute; right:-10px; top:-70px; } .bloc { display: block; width:220px; height: 130px; float:left; padding:10px 50px; } .bloc img { display:block; margin:0 auto; padding:0; } .bloc h3 { margin:0; text-align: center; } .bloc p { margin:10px 0; text-align: center; } .blocGauche { float:left; display:block; width: 240px; margin:0 0 0 40px; } .blocGauche p { font-size: 24px; margin-top:0; padding:5px; } .blocDroit { float:right; display:block; width: 600px; margin:0 40px 0 0; } .blocDroit p { margin-top:0; padding:5px; } .blocDroit p.inverse { color:#ffffff; background:#ed6c05; }