<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[(site_name)] | [*longtitle*]</title> <meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" /> <meta name="keywords" content="[*introtext*]" /> <meta name="description" content="[*description*]" /> <base href="[(site_url)]"></base> <link rel="stylesheet" href="assets/templates/modxhost/layout.css" type="text/css" media="screen" /> <link rel="stylesheet" href="assets/templates/modxhost/modxmenu.css" type="text/css" media="screen" /> <link rel="stylesheet" href="assets/templates/modxhost/form.css" type="text/css" media="screen" /> <link rel="stylesheet" href="assets/templates/modxhost/modx.css" type="text/css" media="screen" /> <link rel="stylesheet" href="assets/templates/modxhost/print.css" type="text/css" media="print" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="[(site_url)][~11~]" /> <script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script> <script src="assets/templates/modxhost/drop_down_menu.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <div id="minHeight"></div> <div id="outer"> <div id="inner"> <div id="derriere"> <div id="right"> <div id="haut-droit"> </div> <div id="right-inner"> <h1 style="text-indent: -5000px;padding: 0px; margin:0px; font-size: 1px;">[(site_name)]</h1> <div id="sidebar"> <div id="content"> <div class="post"> [*#content*] </div> <!-- close .post (main column content) --> </div> <!-- close #content --> </div> <!-- close #sidebar --> </div> <div id="bas-droit"> </div> <!-- end right inner--> </div> <!-- end right --> <div id="left"> <div id="haut-gauche"> </div> <div id="left-inner"><img src="assets/templates/modxhost/images/left2.jpg" border="0" /> </div> <div id="formulaire">{{form_fr}} </div> <div id="menu-gauche"><img src="assets/templates/modxhost/images/left_bas.jpg" border="0" /> </div> <div id="bas-gauche"> </div> <!-- end left-inner --> </div> <!-- end left --> </div> <!-- end inner --> </div> <div id="clearfooter"></div> <div id="header"> <h1><a id="logo" href="[~[(site_start)]~]" title="[(site_name)]">[(site_name)]</a></h1><div id="flag">[[YAMS? &get=`repeat` ¤ttpl=`currentFlagItemTpl` &repeattpl=`otherflagItemTpl` ]]</div> <div id="ajaxmenu">[[Wayfinder?startId=`0` &outerTpl=`mh.OuterTpl` &innerTpl=`mh.InnerTpl` &rowTpl=`mh.RowTpl` &innerRowTpl=`mh.InnerRowTpl` &firstClass=`first` &hereClass=``]] </div> <!-- end topmenu --> </div> <!-- end header --> <br style="clear:both;height:0;font-size: 1px" /> <div id="footer">{{footer_valcenis}} </div> <!-- end footer --> </div> <!-- end outer div --> </div> <!-- end wrapper --> </body> </html>
/* commented backslash hides from ie5mac \*/ html{ height:100%; margin:0; padding:0 } /* end hack */ html,body { padding:0; margin:0; /*background-color: #FFFFFF;*/ font-size: 11px; font-family: "Trebuchet MS", verdana, sans-serif; } body{ text-align:left; min-width:1000px;/* for mozilla*/ background-color: #FFFFFF; height:100%; background-image:url(images/fond.jpg); /*background: url(images/fond.jpg) no-repeat center top;*/ background-repeat:no-repeat; background-attachment:fixed; } #wrapper { background: url(images/foot_4x82.jpg) repeat-x left bottom; _height: 82px; } #outer{ height:99.9%; min-height:100%; width:1000px; text-align:left; margin:auto; position:relative; overflow:visible; /*background: url(images/inner_776x1.jpg) repeat-y left top;*/ } /* mac hide \*/ * html #outer{ width:1000px } /* end hide*/ html>body #outer{ height:auto; } /*for mozilla as IE treats height as min-height anyway*/ #inner{ width:100%; padding-top:143px;/*needed to make room for header*/ } #header{ position:absolute; top:0px; left:0px; width:1000px; height:93px; z-index:74; background: url(images/top-header_776x93_2.png) no-repeat left top; } #flag{ width:90px; float:right; } #ajaxmenu{ position:absolute; top:93px; left:0px; width:1000px; height:43px; z-index:1000; /* background: url(images/header_776x43.png) no-repeat left top;*/ } #logo { position:absolute; top:26px; left:10px; width:237px; height:63px; text-indent: -5000px; z-index:300; background: url(images/logo_237x63.gif) no-repeat left top; } /* mac hide \*/ * html #outer, * html #header {width:1000px} /* end hide*/ #footer { color: #ffffff; width:1000px; clear:both; height:82px; text-align:left; left:0px; bottom:0px; position: absolute; /*background: url(images/foot_776x82_2.jpg) no-repeat left top;*/ } #footer p { margin-top: 10px; } #footer p a { text-decoration: none; color: #ffffff; } * html #footer{ margin-bottom:-1px }/* ie rounding bug*/ /* mac hide \*/ * html #footer { /*only ie gets this style*/ height:82px; /* for ie*/ } /* end hide*/ div,p { margin-top:0px; }/*clear top margin for mozilla*/ #haut-gauche{ height:29px; background: url(images/coin1.png) no-repeat right top; } #haut-droit{ height:29px; background: url(images/coin2.png) no-repeat right top; } #bas-droit{ height:29px; background: url(images/coin3.png) no-repeat right bottom; } #bas-gauche{ height:29px; background: url(images/coin4.png) no-repeat right top; } #formulaire{ height:40px; background-color:#ece4d5; padding-left:15px; } #menu-gauche{ background-color:#ece4d5; } #right { width:794px; float:right; overflow:hidden; /*z-index: 55;*/ /*background-color: #FFFFFF;*/ /*height:485px;*/ } #right-inner { padding-left: 9px; padding-right: 9px; text-align: left; background-color:#FFFFFF; /*z-index: 54;*/ } #right-inner h2 { font-size: 15px; color:#00d4f6; } #left { position:relative;/*ie needs this to show float */ width:206px; float:left; /*padding-left: 7px;*/ z-index: 56; /*height:485px;*/ /*background-color:#ece4d5;*/ } #left-inner { width: 206px; height:80px; /*padding-left: 9px; padding-right: 9px;*/ text-align: left; z-index: 57; /*height:470px;*/ /*background: url(images/left.jpg) no-repeat center top;*/ } #derriere { background-color:#993333; } #clearfooter { width:100%; height:82px; clear:both; } /* to clear footer */ html>body #minHeight{ float:left; width:0px; height:100%; margin-bottom:-82px; } /*safari wrapper */ #content { z-index: 300; padding-bottom: 7px; } #content h2 { font-size: 15px; /*color: #618200;*/ /*background: url(images/bullet_17x21.gif) no-repeat left top;*/ padding-left: 19px; line-height: 24px; position: relative; z-index: 999; } h3#post- { font-size: 12px; color: #00d4f6; background: url() no-repeat left top; padding-left: 0px; } #content p { font-size: 12px; color: #444444; line-height: 18px; _line-height: 16px; } #content p a { color: #000000; } #content p a:hover { background-color: #00d4f6; color: #ffffff; } #footer p { padding: 8px; } .FSF_searchResults { font-size: 12px; color: #444444; line-height: 18px; _line-height: 16px; } .FSF_extract { font-size: 12px; color: #444444; line-height: 18px; _line-height: 16px; } .FSF_resultLink { color: #00d4f6; } .FSF_extract { font-size: 12px; color: #444444; line-height: 18px; _line-height: 16px; } .highlight { font-size: 12px; background-color: #f2f2f2; color: #00d4f6; font-weight: bold; /* line-height: 18px; _line-height: 16px;*/ } img { /*border: dotted 1px #444444;*/ border: none; } #content ul li{ list-style-image: url(images/bullet_11x8.gif); margin-bottom: 0.5em; font-size: 110%; } .LIn_shortMode { list-style-type: none; margin: 0; padding: 0; } .LIn_desc { display: none; } .LIn_date { font-style: italic; margin-left: 5px; } #content a, #sidebar a { color: rgb(97, 130, 0); } #content a:hover, #sidebar a:hover { background-color: rgb(97, 130, 0); color: rgb(255, 255, 255); } .style1 {color: #FFFFFF} a img { border: none;} /*#hg { background:url(images/coin1.png) no-repeat top left; }*/ /*#hd { background: url(images/coin2.png) no-repeat right bottom; }*/ /*#bd { background:url(images/coin3.png) no-repeat bottom right; }*/ /*#bg { background:url(images/coin4.png) no-repeat bottom left; }*/
<body> <div id="conteneur-colonnes"> <div id="col-gauche">colonne gauche</div> <div id="col-droite"> <p>colonne droite</p> <p>fezf</p> <p>fezf</p> </div> <div class="clearBoth"> </div> </div>
@charset "utf-8"; /* CSS Document */ #conteneur-colonnes { width:400px; } #col-gauche { float:left; width:200px; background-color:#0099FF; } #col-droite { float:left; width:200px; background-color:#CCFF00; } .clearBot{clear:both;}
@charset "utf-8"; /* CSS Document */ #conteneur-colonnes { width:400px; background:#fff url(./ton-background.jpg) left top repeat-y; } #col-gauche { float:left; width:200px; } #col-droite { float:left; width:200px; } .clearBot{clear:both;}