08/10/2012, 23:22:31
Voici le gabarit que j'utilise :
Feuille de style :
Code :
[== Indéfini ==]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
terrafirma1.0 by nodethirtythree design
http://www.nodethirtythree.com
-->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{literal}
<script type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
<!--[if IE]>
<script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}
</head>
<body>
<div id="outer">
<div id="upbg"></div>
<div id="inner">
<div id="header">
</div>
<div id="splash"></div>
<div id="menu">
{menu template='TerraFirma'}
</div>
<div id="primarycontent">
<!-- primary content start --> <b>{breadcrumbs starttext='Vous êtes ici' root='Home' delimiter='»'}</b> {content}
<!-- primary content end -->
</div>
<div id="footer">
Institut d'anatomie normale | <a href="http://www.unsa.org">Université de Nice Sophia-Antipolis</a> | <a href="http://medecine.unice.fr">Faculté de Médecine de nice</a> | Webmasters : Y. Walrave / P. Baqué
</div>
</div>
</div>
{literal}
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-5211636-1");
pageTracker._trackPageview();
} catch(err) {}</script>
{/literal}
</body>
</html>Feuille de style :
Code :
[== Indéfini ==]
/* Start of CMSMS style sheet 'TerraFirma: TerraFirma' */
/*terrafirma1.0 by nodethirtythree designhttp://www.nodethirtythree.com*/
* {
padding: 0px;
margin: 0px;
}
body {
background: #F9F9F7 url(uploads/TerraFirma/a1.gif) repeat-x;
font-size: 11px;
font-family: "trebuchet ms", helvetica, sans-serif;
color: #000000;
line-height: 18px;
}
a {
color: #FF7800;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
sup {
font-size: 0.5em;
}
p {
margin-bottom: 14px;
text-align: justify;
}
img.picA {
position: relative;
top: -2px;
background: url(uploads/TerraFirma/a47.gif) no-repeat;
width: 76px;
height: 74px;
padding: 8px;
}
img.picB {
position: relative;
top: -2px;
background: url(uploads/TerraFirma/a26.gif) no-repeat;
width: 146px;
height: 75px;
padding: 7px;
}
img.floatleft {
float: left;
margin: 0px 14px 3px 0px;
}
ul.linklist {
list-style: none;
}
ul.linklist li {
border-top: solid 1px #EEEEEE;
padding-top: 5px;
margin: 5px 0px 0px 0px;
}
ul.linklist li.first {
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
}
#upbg {
position: absolute;
top: 0px;
left: 0px;
background: #fff url(uploads/TerraFirma/upbg.gif) no-repeat;
width: 747px;
height: 264px;
z-index: 1;
}
#outer {
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url(uploads/TerraFirma/abg.gif) repeat-y;
}
#inner {
position: relative;
padding: 13px 30px 13px 30px;
z-index: 2;
}
#header {
position: absolute;
top: 0px;
left: -104px;
background: url(uploads/TerraFirma/a8.gif) no-repeat;
width: 180px;
height: 309px;
color: #fff;
padding-left: 20px;
}
#header span {
font-weight: normal;
}
#header h1 {
position: absolute;
font-size: 23px;
letter-spacing: -1px;
top: 30px;
height: 128px;
}
#header h2 {
position: absolute;
font-size: 10px;
font-weight: normal;
color: #FCE2CA;
top: 51px;
}
#header sup {
color: #FCE2CA;
}
#splash {
position: absolute;
right: 30px;
background: #EAEAE2 url(uploads/TerraFirma/a10.jpg) no-repeat;
width: 632px;
height: 128px;
}
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
#menu_vert {
margin-left: 1px;
margin-right: 1px;
font-size: 9pt
}
/* The wrapper clears the floating elements of the menu */
/* Fix for Opera 8 */
.clearb {
clear: both;
}
#menuwrapper {
/* Fix for Opera 8 */
/* overflow: hidden;
*/
position: relative;
display: block;
background: #46461F url("uploads/TerraFirma/a16.gif") repeat-x;
margin-top: 134px;
width: 100%;
z-index: 100;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 200px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: 28px;
}
#primary-nav ul ul {
position: absolute;
top: 0px;
left: 100%;
margin-top: 1px;
margin-left: -1px;
}
#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
color: #FFFFFF;
position: relative;
}
#primary-nav li a {
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background: #ff7800;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
/* just add #primary-nav li:hover ul ul, #primary-nav li.menuparenth ul ul ul, for fourth level */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul, #primary-nav li:hover ul ul ul, #primary-nav li:hover ul ul ul ul, #primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li.menuparenth ul ul ul {
display: none;
}
#primary-nav li.menuparenth ul ul ul ul {
display: none;
}
/* add #primary-nav ul ul ul li:hover ul, #primary-nav ul ul ul li.menuparenth ul, for fourth level*/
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul, #primary-nav ul ul ul li:hover ul, #primary-nav ul ul ul ul li:hover ul, #primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}
#primary-nav ul ul ul li.menuparenth ul {
display: block;
}
#primary-nav ul ul ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
#date {
position: absolute;
top: 0px;
line-height: 52px;
color: #BDBDA2;
right: 30px;
font-weight: bold;
font-size: 12px;
letter-spacing: -1px;
}
#secondarycontent {
position: relative;
width: 180px;
float: right;
}
#secondarycontent h3 {
position: relative;
top: 4px;
font-size: 16px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url(uploads/TerraFirma/a22.gif) bottom repeat-x;
padding: 0px 0px 10px 10px;
margin-bottom: 20px;
}
#secondarycontent .content {
padding: 0px 10px 0px 10px;
margin-bottom: 20px;
}
#primarycontent {
position: relative;
width: 692px;
float: left;
}
#primarycontent h3 {
position: relative;
top: 4px;
font-size: 18px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background: url(uploads/TerraFirma/a22.gif) bottom repeat-x;
padding: 0px 0px 10px 15px;
margin-bottom: 20px;
}
#primarycontent .content {
padding: 0px 15px 0px 15px;
margin-bottom: 20px;
}
#primarycontent .post {
margin-bottom: 30px;
}
#primarycontent .post .header {
position: relative;
}
#primarycontent .post .date {
position: absolute;
right: 15px;
top: 0px;
line-height: 35px;
color: #AFAFA4;
font-weight: bold;
}
#primarycontent .post .content {
margin-bottom: 0px;
}
#primarycontent .post .footer {
position: relative;
top: -10px;
background: url(uploads/TerraFirma/a33.gif) repeat-x;
height: 64px;
}
#primarycontent .post .footer ul {
list-style: none;
position: absolute;
right: 15px;
bottom: 15px;
}
#primarycontent .post .footer ul li {
display: inline;
line-height: 14px;
padding-left: 17px;
margin-left: 25px;
background-repeat: no-repeat;
background-position: 0px 2px;
}
#primarycontent .post .footer ul li.printerfriendly {
background-image: url(uploads/TerraFirma/a41.gif);
}
#primarycontent .post .footer ul li.comments {
background-image: url(uploads/TerraFirma/a36.gif);
}
#primarycontent .post .footer ul li.readmore {
background-image: url(uploads/TerraFirma/a38.gif);
}
#footer {
position: relative;
clear: both;
height: 66px;
text-align: center;
line-height: 66px;
background-image: url(uploads/TerraFirma/a50.gif);
color: #A8A88D;
}
#footer a {
color: #8C8C73;
}
/* End of 'TerraFirma: TerraFirma' */