page d'accueil + css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Une expérience de la blogosphère, Personnaliser son
Blog.
</title>
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" />
<meta http-equiv="content-language" content="<$BlogLanguage$>" />
<meta name="Description" content="<$BlogDescription$>" />
<meta name="Keywords" content="<$BlogKeywords$>" />
<meta name="generator" content="CanalBlog - http://www.canalblog.com" />
<BlogSiteFeed>
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedURL$>" />
</BlogSiteFeed>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$BlogEditURIURL$>" />
<!--<link rel="stylesheet" href="<$BlogCSSURL$>" type="text/css" />//-->
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: Minim/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
( Adaptation et modifications par l'auteur de ce blog )7
----------------------------------------------- */
.justify {
text-align:justify;
}
/* Menu deroulant
----------------------------------------------- */
dl, dd {
margin: 0;
padding: 0;
padding-bottom: 0;
list-style-type: none;
}
#menu {
width: 90%;
}
#menu dt {
cursor: pointer;
margin: 1.5em 0 0.75em;
font: bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
color: #666;
border-bottom: 1px dotted #999966;
}
#menu dl {
border-bottom: 1px dotted #999966;
}
/* Body et Liens
----------------------------------------------- */
body {
background: #cccc99 url(http://influenceurs.canalblog.com/images/papier_ecru_02.jpg);
margin: 0;
padding: 0 20px;
font: x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align: center;
color:#222;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: #666699;
text-decoration: none;
}
a:visited {
color: #996666;
text-decoration: none;
}
a:hover {
color: #666633;
text-decoration: underline;
}
a img {
border-width: 0;
}
/* Header
----------------------------------------------- */
@media all {
#header {
width: 790px;
height: 473px;
margin: 0 auto 2px;
border: 1px solid #999966;
background: #666633 url(http://influenceurs.canalblog.com/images/page_aiguebrun02.jpg) no-repeat;
}
}
@media handheld {
#header {
width: 90%;
}
}
#blog-title {
margin: 5px 5px 0;
padding: 393px 20px 0;
border: solid #999966;
border-width: 1px 1px 0;
font-size: 200%;
line-height:0.8em;
color: #333;
text-transform: uppercase;
letter-spacing: .2em;
}
#blog-title a {
color: #cccc99;
text-decoration: none;
}
#blog-title a:hover {
color: #ad9;
}
#description {
margin: 0 5px 5px;
padding: 10px 20px 20px;
border: solid #999966;
border-width: 0 1px 1px;
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
color: #777;
}
/* Content
----------------------------------------------- */
@media all {
#content {
width: 802px;
margin: 0 auto;
padding: 0;
text-align: left;
}
#main {
width: 590px;
float: right;
background: #fff url(http://influenceurs.canalblog.com/images/papier_ecru_clair01.jpg);
border: solid #999966;
border-width: 1px;
padding: 7px;
}
#sidebar {
width: 175px;
float: left;
background: #fff url(http://influenceurs.canalblog.com/images/papier_ecru_moyen01.jpg);
border: solid #999966;
border-width: 1px;
padding: 7px;
}
}
}
@media handheld {
#content {
width: 90%;
}
#main {
width: 100%;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}
/* Headings
----------------------------------------------- */
h2 {
margin: 1.5em 0 .75em;
font: bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
color: #666;
}
/* Posts
----------------------------------------------- */
@media all {
.date-header {
margin: 1.5em 0 .5em;
}
.post {
margin: .5em 0 1.5em;
border-bottom: 1px dotted #777;
padding-bottom: 1.5em;
}
}
@media handheld {
.date-header {
padding: 0 1.5em 0 1.5em;
color: #555;
}
.post {
padding: 0 1.5em 0 1.5em;
}
}
.post-title {
margin: .25em 0 0;
padding: 0 0 4px;
font-size: 140%;
line-height: 1.4em;
color: #663333;
}
.post-title a {
text-decoration:none;
color:#663300;
}
.post-title a:hover {
color: #660000;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin: -.25em 0 0;
color: #333;
}
.post-footer em, .comment-link {
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}
.post-footer em {
font-style: normal;
color: #777;
margin-right: .6em;
}
.comment-link {
margin-left: .6em;
}
.post img {
padding: 4px;
border: 1px solid #999;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
font: bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
color: #555;
}
.itemfooter em {
font-style: normal;
color: #777;
margin-right: .6em;
}
.itemfooter {
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin: 0 0 1.5em;
padding: 0 0 1.5em;
border-bottom: 1px dotted #999966;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0 0 .25em 15px;
text-indent: -15px;
line-height: 1.5em;
}
#sidebar p {
color: #999;
padding: 0 0 1.5em;
line-height: 1.5em;
border-bottom: 1px dotted #999966;
}
#calendar {
margin: 0 0 1.5em;
padding: 0 0 1.5em;
padding-top: 12px;
font-size: 85%;
color: #999;
}
#calendar table {
width: 170px;
padding: 2px;
border-collapse: collapse;
border-bottom: 1px dotted #999966;
}
#calendar th {
font-weight: normal;
text-align: center;
}
#calendar td {
text-align: center;
}
/* Footer
----------------------------------------------- */
#footer {
width: 800px;
clear: both;
margin: 0 auto;
}
#footer hr {
display: none;
}
#footer p {
margin:0;
padding-top: 15px;
font: 78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}
.code {
font-family: monospace;
font-family: "Courier New", Courier, mono;
border: 1px solid #cccccc;
font-size: 1.1em;
color: rgb(0, 153, 0);
padding: 0.5em 1em;
margin: 1em 0.5em;
width: 92%;
overflow: auto;
}a
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
( Adaptation et modifications par l'auteur de ce blog )7
----------------------------------------------- */
.justify {
text-align:justify;
}
/* Menu deroulant
----------------------------------------------- */
dl, dd {
margin: 0;
padding: 0;
padding-bottom: 0;
list-style-type: none;
}
#menu {
width: 90%;
}
#menu dt {
cursor: pointer;
margin: 1.5em 0 0.75em;
font: bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
color: #666;
border-bottom: 1px dotted #999966;
}
#menu dl {
border-bottom: 1px dotted #999966;
}
/* Body et Liens
----------------------------------------------- */
body {
background: #cccc99 url(http://influenceurs.canalblog.com/images/papier_ecru_02.jpg);
margin: 0;
padding: 0 20px;
font: x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
text-align: center;
color:#222;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: #666699;
text-decoration: none;
}
a:visited {
color: #996666;
text-decoration: none;
}
a:hover {
color: #666633;
text-decoration: underline;
}
a img {
border-width: 0;
}
/* Header
----------------------------------------------- */
@media all {
#header {
width: 790px;
height: 473px;
margin: 0 auto 2px;
border: 1px solid #999966;
background: #666633 url(http://influenceurs.canalblog.com/images/page_aiguebrun02.jpg) no-repeat;
}
}
@media handheld {
#header {
width: 90%;
}
}
#blog-title {
margin: 5px 5px 0;
padding: 393px 20px 0;
border: solid #999966;
border-width: 1px 1px 0;
font-size: 200%;
line-height:0.8em;
color: #333;
text-transform: uppercase;
letter-spacing: .2em;
}
#blog-title a {
color: #cccc99;
text-decoration: none;
}
#blog-title a:hover {
color: #ad9;
}
#description {
margin: 0 5px 5px;
padding: 10px 20px 20px;
border: solid #999966;
border-width: 0 1px 1px;
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
color: #777;
}
/* Content
----------------------------------------------- */
@media all {
#content {
width: 800px;
margin: 0 auto;
padding: 0;
text-align: left;
}
#main {
width: 590px;
float: right;
background: #fff url(http://influenceurs.canalblog.com/images/papier_ecru_clair01.jpg);
border: solid #999966;
border-width: 1px;
padding: 7px;
}
#sidebar {
width: 174px;
float: left;
background: #fff url(http://influenceurs.canalblog.com/images/papier_ecru_moyen01.jpg);
border: solid #999966;
border-width: 1px;
padding: 7px;
}
}
}
@media handheld {
#content {
width: 90%;
}
#main {
width: 100%;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}
/* Headings
----------------------------------------------- */
h2 {
margin: 1.5em 0 .75em;
font: bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
color: #666;
}
/* Posts
----------------------------------------------- */
@media all {
.date-header {
margin: 1.5em 0 .5em;
}
.post {
margin: .5em 0 1.5em;
border-bottom: 1px dotted #777;
padding-bottom: 1.5em;
}
}
@media handheld {
.date-header {
padding: 0 1.5em 0 1.5em;
color: #555;
}
.post {
padding: 0 1.5em 0 1.5em;
}
}
.post-title {
margin: .25em 0 0;
padding: 0 0 4px;
font-size: 140%;
line-height: 1.4em;
color: #663333;
}
.post-title a {
text-decoration:none;
color:#663300;
}
.post-title a:hover {
color: #660000;
}
.post div {
margin:0 0 .75em;
line-height:1.6em;
}
p.post-footer {
margin: -.25em 0 0;
color: #333;
}
.post-footer em, .comment-link {
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}
.post-footer em {
font-style: normal;
color: #777;
margin-right: .6em;
}
.comment-link {
margin-left: .6em;
}
.post img {
padding: 4px;
border: 1px solid #999;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
font: bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .2em;
color: #555;
}
.itemfooter em {
font-style: normal;
color: #777;
margin-right: .6em;
}
.itemfooter {
font: 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin: 0 0 1.5em;
padding: 0 0 1.5em;
border-bottom: 1px dotted #999966;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0 0 .25em 15px;
text-indent: -15px;
line-height: 1.5em;
}
#sidebar p {
color: #999;
padding: 0 0 1.5em;
line-height: 1.5em;
border-bottom: 1px dotted #999966;
}
#calendar {
margin: 0 0 1.5em;
padding: 0 0 1.5em;
padding-top: 12px;
font-size: 85%;
color: #999;
}
#calendar table {
width: 80px;
padding: 2px;
border-collapse: collapse;
border: 1px dotted #999966;
}
#calendar th {
font-weight: normal;
text-align: center;
}
#calendar td {
text-align: center;
}
/* Footer
----------------------------------------------- */
#footer {
width: 800px;
clear: both;
margin: 0 auto;
}
#footer hr {
display: none;
}
#footer p {
margin:0;
padding-top: 15px;
font: 78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
}
.code {
font-family: monospace;
font-family: "Courier New", Courier, mono;
border: 1px solid #cccccc;
font-size: 1.1em;
color: rgb(0, 153, 0);
padding: 0.5em 1em;
margin: 1em 0.5em;
width: 85%;
overflow: auto;
}
</style>
</head>
<!--debut du corps de la page par la balise ouvrante <body>
-->
<body>
<div style="width:100%; height:40px;">
</div>
<div id="header">
<h1 id="blog-title">
<a href="<$BlogURL$>"><$BlogTitle$></a>
</h1>
<p id="description">Symphonie de l'univers des Blogs</p>
</div>
<!-- Begin #content -->
<div id="content">
<div id="main">
<h2>bonjour</h2>
<Blogger>
<BlogDateHeader>
<h2 class="date-header">
<$BlogDateHeaderDate$>
</h2>
</BlogDateHeader>
<!-- Begin .post -->
<div class="post">
<a name="<$BlogItemNumber$>"></a>
<BlogItemTitle>
<h3 class="post-title">
<$BlogItemTitle$>
</h3>
</BlogItemTitle>
<div class="post-body">
<div class="justify">
<div style="clear: both;">
</div>
<$BlogItemBody$>
<div style="clear: both; padding-bottom: 0.25em;">
</div>
</div>
</div>
<p class="post-footer">
<em><$BlogItemAuthorNickname$> - <$BlogItemDateTime$></em>
<BlogItemCategories>
- <a class="comment-link" href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"> <$BlogItemCategoryName$></a>
</BlogItemCategories>
<BlogItemComments>
- <a class="comment-link" href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires <$BlogItemCommentsCount$></a>
</BlogItemComments>
<BlogItemTrackBacks>
- <a class="comment-link" href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens <$BlogItemTrackBacksCount$></a>
</BlogItemTrackBacks>
- <em>Permalien</em> <a class="comment-link" href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>
</p>
</div>
<!-- End .post -->
</Blogger>
<$CBControlNavLinks$>
</div>
<div id="sidebar">
<BloggerFriendLinks>
<BlogFriendLinkHeader>
<h2><$BlogFriendLinkCategoryName$></h2>
<ul>
</BlogFriendLinkHeader>
<li><a href="<$BlogFriendLinkURL$>"><$BlogFriendLinkName$></a></li>
<BlogFriendLinkFooter>
</ul>
</BlogFriendLinkFooter> </BloggerFriendLinks>
<!-- debut menu deroulant -->
<h2>- Menu -</h2>
<dl id="menu">
<dt onclick="javascript:montre('smenu1');">RUBRIQUES</dt>
<dd id="smenu1">
<ul>
<CBCategories>
<li><a onclick="javascript:montre('smenu1');" href="<$BlogCategoryURL$>"><$BlogCategoryName$></a></li>
</CBCategories>
</ul>
</dd>
<dt onclick="javascript:montre('smenu2');">Derniers messages</dt>
<dd id="smenu2">
<ul>
<CBLastPosts>
<li><a onclick="javascript:montre('smenu2');" href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastPosts>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Archives</dt>
<dd id="smenu3">
<ul>
<BloggerArchives>
<li><a onclick="javascript:montre('smenu3');" href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
</BloggerArchives>
<li><a onclick="javascript:montre('smenu3');" href="<$BlogArchiveFileName$>">Toutes les archives</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Derniers commentaires</dt>
<dd id="smenu4">
<ul>
<CBLastComments>
<li><a onclick="javascript:montre('smenu4');" href="<$BlogCommentURL$>"><$BlogCommentTitle$></a> sur <a href="<$BlogItemURL$>"><$BlogItemTitle$></a></li>
</CBLastComments>
</ul>
</dd>
</dl>
<!-- fin menu deroulant -->
<p><script src="http://post-it.apidom.com/js/hkaufman1.js" type="text/javascript"></script></p>
<!-- <h2>Auteurs</h2>
<ul>
<CBMembers>
<li><a href="<$BlogMemberProfileURL$>"><$BlogMemberAuthorNickName$></a></li>
</CBMembers>
</ul>
<CBCalendar>
<$BlogCalendar$>
</CBCalendar>
-->
<p></p>
<BlogSiteFeed>
<ul>
<li><a href="<$BlogSiteFeedURL$>" title="Syndiquez ce blog">Version XML</a></li>
</ul>
</BlogSiteFeed>
<!--
<h2>Albums photos</h2>
<ul>
<CBAlbum>
<li><a href="<$BlogAlbumURL$>"><img src="<$BlogAlbumCoverURL$>" width="75" height="75" alt="<$BlogAlbumTitle$>" /></a><br /><a href="<$BlogAlbumURL$>"><$BlogAlbumTitle$></a></li>
</CBAlbum>
</ul>
<CBOwner>
<BlogOwnerPictureURL>
<div class="image">
<a href="<$BlogOwnerProfileURL$>"><img src="<$BlogOwnerPictureURL$>" border="0" /></a>
</div>
</BlogOwnerPictureURL>
</CBOwner>
<CBFeeds>
<BlogFeedHeader>
<div class="title"><a href="<$BlogFeedURL$>"><$BlogFeedTitle$></a>
</div>
</BlogFeedHeader><$BlogFeedHeadLines$>
</CBFeeds>
-->
<div style="clear: both; padding-bottom: 0.25em;">
</div>
</div>
</div>
<!-- end #content -->
<!-- Begin #footer -->
<div id="footer"><hr />
<p><!--This is an optional footer. If you want text here, place it inside these tags, and remove this comment. --> </p>
</div>
<!-- End #footer -->
</body>
<!--fin du corps de la page par la balise fermante </body>
-->
</html>