/* CSS "www.j-damville-j.com" - 06/2008 - */ /* -o- "CSS Damville par defaut" -o- */ /* IMPORTANT */ /* Ce design n'est pas un template. Vous ne pouvez pas le reproduire sans l'accord préalable de l'auteur. Cependant, libre à vous d'étudier ce CSS et d'employer par ailleurs les techniques utilisées. ----- This design is not a template. You cannot reproduce it without prior agreement of the author. However, free with you studied this CSS and to in addition employ the techniques used. */ /* Exemple d'ascenseur graphique (a droite de la page) : http://www.dreamshake.com/dream.php?dream_id=1 */ /* == COMMUN A TOUS LES ECRANS ========================================== ====================================================================== _________ __/ General \_________________________________________________________ */ * { margin: 0; padding: 0; } html {} body { margin: 0; padding: 0; background-color: #534D57; font-family: Arial,Tahoma,Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-weight: normal; font-size: 9pt; color: #FFF; text-align: left; } /* _______ __/ Liens \___________________________________________________________ */ /* a { color: #FFF; text-decoration: none; } a:link { color: #00F; text-decoration: none; } a:visited { color: #F00; text-decoration: underline; } a:hover { color: #88F; text-decoration: underline; border: 0; } a:active { color: #00F; text-decoration: underline; }*/ /* __________________________________ __/ Contenant de la page (container) \________________________________ */ #container { width:960px; margin: 0 auto; background: #FFF url(img/back.jpg) top center no-repeat; min-height: 680px; position: relative; } /* Hack pour IE6 :(( */ * html body #container { height: 960px; } /* ________ __/ Entete \__________________________________________________________ */ /* #zoneheader { height: 100px; border: 1px solid transparent; border: 0; } /* ---------- */ #logo { position: absolute; left: 20px; top: 5px; } #logo h1 a { display: block; width: 163px; height: 33px; background: transparent url(img/logo.jpg) top left no-repeat; } #logo h1 a:hover { background-image: url(img/logor.jpg); } #logo h1 a span { display: none; } /* #logo h2 { display: none; }*/ /* ________________ __/ Menu principal \__________________________________________________ */ #nav { position: absolute; top: 52px; left: 10px; z-index: 2; font-size: 1.5em; } #nav-ul, #nav-ul ul { padding: 0; margin: 0; list-style: none; /*line-height: 1;*/} #nav-ul a { display: block; width: 100%; text-indent: 0.5em; } /* -- Liste -- */ #nav-ul .nav-li { margin-right: 20px; float: left; height: 28px; line-height: 28px; /*width: 15em; /* width needed or else Opera goes nuts */} #nav-ul a.nav-a { margin-left: 7px; color: #AAB; background: transparent url(img/nav-puce_off.png) top left no-repeat; text-indent: 33px; font-variant: small-caps; font-weight: bold; text-decoration: none; } #nav-ul a.nav-a:hover { color: #FFF; background-image: url(img/nav-puce_roll.png); } #nav-ul a.nav-select { color: #FFF; } #nav-ul li.nav-li:hover ul, #nav-ul li.sfhover ul { /* lists nested under hovered list items */ left: auto; } /* -- Sous-Liste -- */ #nav-ul .nav-nav-ul { position: absolute; margin-left: 33px; left: -999em; background-color: #6A6772; /* using left instead of display to hide menus because display: none isn't read by screen readers */} #nav-ul .nav-nav-li { border-top: 1px solid #AAB; width: 12em; line-height: 1.3; font-size: 0.8em; /* width needed or else Opera goes nuts */} #nav-ul a.nav-nav-a { display: block; width: 100%; color: #AAB; text-decoration: none; } #nav-ul a.nav-nav-a:hover { color: #FFF; } /* ________________ __/ Corps du corps \__________________________________________________ */ #zonebody { position: absolute; top: 105px; left: 180px; width: 770px; height: 560px;/* overflow: auto;*/ } #zonebody h3 { height: 27px; line-height: 27px; text-indent: 5px; background: transparent url(img/h3_back.jpg) center left no-repeat; } #zonebody p { margin-bottom: 1em; } #zonebody a { color: #99B5C9; } /* ______________ __/ Pied de page \____________________________________________________ */ /* #zonefooter { display: none; }*/ /* ________ __/ Extras \__________________________________________________________ */ #extraDiv1, #extraDiv2, #extraDiv3 { display: none; } /* ________ __/ Divers \__________________________________________________________ */ .clear { clear: both; margin: 0;} .text_center { text-align: center; } .text_right { text-align: right; } .text_italic { font-style: italic; } hr { height: 1px; color: #000; background-color: #000; border: 0; } /* __________________________________________ __/ Messages d'informations | Erreurs | etc. \________________________ */ .alert { background: #FFF6BF url(img/exclamation.gif) 15px 50% no-repeat; padding: 5px 20px 5px 45px; border-top: 2px solid #FFD324; border-bottom: 2px solid #FFD324; color: #000; } /* == "PAGE EN CONSTRUCTION" ============================================ ====================================================================== */ #construct #container { background-color: #534D57; color: #FFF; } #construct #container #zonebody { font-size: 3em; text-align: center; margin-top: 5em; } /* == "INDEX" (home) ==================================================== ====================================================================== */ #home #container { background-image: url(img/home_back.jpg); height: 720px; font-size: 10pt; font-weight: bold; } /* ----- */ #home #nav { top: 0; left: 0; font-size: 1em; } #home #nav-ul .nav-li { position: absolute; line-height: 1.2; } #home #nav-ul .nav-li .nav-a { display: block; background: none; } #home #nav-ul .nav-li .nav-a span { display: none; } #home #nav-ul li.nav-li:hover ul, #home #nav-ul li.sfhover ul { background-color: transparent; } #home #nav-ul .nav-nav-ul { margin-top: -0.5em; margin-left: 0; background-color: transparent; } #home #nav-ul .nav-nav-li { border-top: 0; font-size: 1em; } #home #nav-actu { left: 702px; top: 324px; } #home #nav-actu a.nav-a { width: 176px; height: 31px; } #home #nav-actu a.nav-a:hover { background-image: url(img/home_actu_roll.jpg); } #home #nav-jacques { left: 69px; top: 225px; } #home #nav-jacques a.nav-a { width: 192px; height: 26px; } #home #nav-jacques a.nav-a:hover { background-image: url(img/home_jacques_roll.jpg); } #home #nav-juliette { left: 71px; top: 325px; } #home #nav-juliette a.nav-a { width: 171px; height: 26px; } #home #nav-juliette a.nav-a:hover { background-image: url(img/home_juliette_roll.jpg); } #home #nav-commun { left: 684px; top: 225px; } #home #nav-commun a.nav-a { width: 197px; height: 26px; } #home #nav-commun a.nav-a:hover { background-image: url(img/home_commun_roll.jpg); } #home #nav-ul #nav-commun .nav-nav-ul { margin-left: 35px; } #home #nav-contact { left: 134px; top: 450px; } #home #nav-contact a.nav-a { width: 146px; height: 27px; } #home #nav-contact a.nav-a:hover { background-image: url(img/home_contact_roll.jpg); } /* ----- */ #home #zonefooter { text-align: center; font-size: 70%; position: absolute; top: 690px; left: 0; width: 100%; color: #AAA; } #home #zonefooter a { color: #FFF; } #home #zonefooter a:hover { text-decoration: underline overline; } /* == "ACTUALITES" ====================================================== ====================================================================== */ #actualites #actu-head, #actualites #actu-body, #actualites #actu-foot { width: 650px; margin-bottom: 2em; } #actualites #actu-body { overflow: auto; height: 350px; } #actualites #zonebody a:hover { color: #FFF; } /* == "THEME (Presentation) " =========================================== == "OEUVRE" ========================================================== ====================================================================== */ /*#theme #zonebody { position: relative; }*/ #theme #navcol, #oeuvre #navcol { list-style: none; padding: 4px; position: absolute; top: 27px; left: -170px; z-index: 3; background-color: #6A6772; } #theme #navcol .navcol-li, #oeuvre #navcol .navcol-li { width: 150px; line-height: 1.3; font-size: 1em; } #theme #navcol a, #oeuvre #navcol a { display: block; width: 100%; color: #AAB; text-decoration: none; } #theme #navcol a.navcol-select, #theme #navcol a:hover, #oeuvre #navcol a.navcol-select, #oeuvre #navcol a:hover { color: #FFF; } #theme #tdbandeauimg a { margin: 0; float:left; } #theme #tdbandeauimg a img { border: 2px solid #99B5C9; } #theme #tdbandeauimg img.shover, #theme #tdbandeauimg a:hover img { border-color: #FFF; } #theme #detail { margin-top: 1em; } #theme #detail .gdeimg { float: left; margin: 0 1em 1em 0; border: 2px solid #99B5C9; } /* == "THEME (Biographie) " ============================================= ====================================================================== */ #theme #bio { height: 550px; overflow: auto; } /* == "THEME (Oeuvres, etc.) " ========================================== == "OEUVRE" ========================================================== ====================================================================== */ #theme #tdbandeaurub, #oeuvre #tdbandeaurub { padding-left: 1em; vertical-align: top; } #theme #tdbandeaurub p, #oeuvre #tdbandeaurub p { margin: 0; } #theme #infos, #oeuvre #infos { position: absolute; top: 100px; left: -170px; width: 150px; } #theme #inforub, #oeuvre #inforub { margin-bottom: 1em; } /*#theme .gdeimg, #oeuvre .gdeimg { border: 2px solid #000; }*/ #theme #thumbnail, #oeuvre #thumbnail { position: relative; width: 600px; height: 66px; overflow: hidden; } #theme #tdbandeauimg #vignettelist, #oeuvre #tdbandeauimg #vignettelist { width: 6000px; position: absolute; left: 0px; top: 0px; } #theme #tdbandeaurub p, #oeuvre #tdbandeaurub p { display: block; clear: left;} #theme #tdbandeaurub .btnprec, #oeuvre #tdbandeaurub .btnprec { display: block; float: left; width: 14px; height: 25px; background-image: url(img/btnprec_off.gif); } #theme #tdbandeaurub .btnprec:hover, #oeuvre #tdbandeaurub .btnprec:hover { background-image: url(img/btnprec_roll.gif); } #theme #tdbandeaurub .btnprec span, #oeuvre #tdbandeaurub .btnprec span { display: none; } #theme #tdbandeaurub .btnsuiv, #oeuvre #tdbandeaurub .btnsuiv { display: block; float: left; width: 14px; height: 25px; background-image: url(img/btnsuiv_off.gif); margin-left: 5px;} #theme #tdbandeaurub .btnsuiv:hover, #oeuvre #tdbandeaurub .btnsuiv:hover { background-image: url(img/btnsuiv_roll.gif); } #theme #tdbandeaurub .btnsuiv span, #oeuvre #tdbandeaurub .btnsuiv span { display: none; } #theme #tdbandeaurub a.shover, #oeuvre #tdbandeaurub a.shover, #theme #tdbandeaurub a:hover, #oeuvre #tdbandeaurub a:hover { color: #FFF; } #menuOeuvreCommune { } #mOC-ul, #mOC-ul ul { padding: 0; margin: 0; list-style: none; /*line-height: 1;*/} #mOC-ul a { display: block; width: 100%; } /* -- Liste -- */ #mOC-ul .mOC-li { float: left; margin-right: 5px; /*width: 15em; /* width needed or else Opera goes nuts */} #mOC-ul a.mOC-a:hover img { border: 2px solid #FFF; } #mOC-ul li.mOC-li:hover ul, #mOC-ul li.sfhover ul { /* lists nested under hovered list items */ left: auto; } /* -- Sous-Liste -- */ #mOC-ul .mOC-mOC-ul { position: absolute; /*width: 92px; */left: -999em; background-color: #908A94; /* using left instead of display to hide menus because display: none isn't read by screen readers */} #mOC-ul .mOC-mOC-li { border-top: 1px solid #AAB; padding: 2px 4px; /* width needed or else Opera goes nuts */} #mOC-ul a.mOC-mOC-a { display: block; width: 100%; color: #6E6872; text-decoration: none; } #mOC-ul a.mOC-mOC-a:hover { color: #FFF; } .soustheme-nav { list-style: inside square; } /* == "THEME (Oeuvres, etc.) " ========================================== ====================================================================== */ #oeuvre #zonebody a { margin: 0; } #oeuvre #zonebody a img { border: 2px solid #99B5C9; } #oeuvre #zonebody img.shover, #oeuvre #zonebody a:hover img { border-color: #FFF; } #oeuvre #zonebody a:hover { color: #FFF; } #theme #infos a:hover { color: #FFF; } /* == "THEME (Biographie) " ============================================= ====================================================================== */ #contact #zonebody a:hover { color: #FFF; }