Essai de design pour le blog de thierry
EN COURS
couleur du fond des modules: #1e90ff (menu du site)
liens: blanc, noir au survol
voir à caler correctement les modules dans leur boîte.
mettre titres articles en #1e90ff (pas en titre des modules, sinon invisibles!)
voir pour textes commentaires: fond en #1e90ff
CSS provisoire:
/* ---------- Elements Principaux ------------- */
body {
margin:0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size:x-small;
background: transparent;
color: #000000;
}
#top h1 {
color: #000000;
font-size: 20px;
}
/*-- Titre des modules --*/
.article h1, .article h2 {
color: #000000;
font-size: 15px;
}
h3 {
color: #000000;
font-size: 12px;
}
/* liens */
a {
color: #000000;
text-decoration: underline;
font-size:110%;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}
legend {
color:#000000;
padding-left:5px;
padding-right:5px;
}
/* listes */
li {
list-style-type:none;
}
/* image */
img { border:0px; }
/* elements de formulaire */
input {
border-left:2px solid #FFFFFF;
border-right:2px solid #9E9E9E;
border-top:2px solid #FFFFFF;
border-bottom:2px solid #9E9E9E;
font-size:100%;
background:transparent;
color:#0000FF;
}
/* Boutons incription a la newsletter, rechercher */
#email, #recherche {
border-left: 2px solid #FFFFFF;
border-right: 2px solid #9E9E9E;
font-size: 100%;
background: transparent;
color: #0000FF;
}
/* ---------- Structure ------- */
/* - La class main correspond a la structure global du blog*/
/* - le numero apres 'main' correspond au type de structure (1 2 ou trois colonne) */
/* Pour les stuctures avec 2 colonnes */
#main1 { text-align:left; margin:0px auto 50px auto; }
/* colonne de droite */
#main1 #rightnav { padding:10px; width:220px; }
/* colonne de gauche */
#main1 #leftnav { padding:10px; width:220px; }
/* colonne principale */
#main1 #content { padding:10px; border-left:2px solid #FFFFFF; border-right:2px solid #9E9E9E; }
/* titre des articles */
#main1 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; color:#000000}
/* Pour les stuctures avec une colonne a droite */
#main2 { text-align:left; margin:0px auto 50px auto; }
/* colonne de droite */
#main2 #rightnav { padding:10px; width:220px; }
/* colonne principale */
#main2 #content { padding:10px; border-left:2px solid #FFFFFF; border-right:2px solid #9E9E9E; }
/* titre des articles */
#main2 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; color:#000000}
/* Pour les stuctures avec une colonne a gauche */
#main3 { text-align:left; margin:0px auto 50px auto; }
/* colonne de gauche */
#main3 #leftnav { padding:10px; width:220px; }
/* colonne principale */
#main3 #content { padding:10px; border-left:2px solid #FFFFFF; border-right:2px solid #9E9E9E; }
/* titre des articles */
#main3 h2 { margin:0px 0px 10px 0px; padding:0px; font-size:130%; color:#000000}
#MainTab { margin:0px; width: 100%}
#MainTab td { vertical-align:top; }
/* entete */
#top { padding:5px; background: transparent; color:#0000FF;
border-bottom: 2px solid #9E9E9E; }
#top h1 { padding:0px; margin:0px; color:#0000FF;}
/* Bas de page */
#footer { clear:both; padding:10px; background: transparent; color:#0000FF;
border-top: 2px solid #FFFFFF;
border-bottom: 2px solid #9E9E9E; }
#footer p { margin:0px; padding: 10px; background: transparent; color:#0000FF;}
#footer a, #top a { text-decoration:underline; color:#0000FF; font-size:110%; }
#footer a:hover, #top a:hover { text-decoration:none; color:#0000FF}
.cleaner {clear:both;}
/* --------- Modules -------- */
/* Texte libre de gauche */
#LeftPart { }
/* Texte libre de droite */
#RightPart { }
/* Calendrier */
#Calendrier { }
/* Liens */
#Lien { }
/* Articles recents */
#ArticleRecent { }
/* Categories */
#Categorie { }
/* Archives */
#Archive { }
/* Recommander */
#Recommander { }
/* Album */
#Album { }
/* W3C */
#W3C { }
/* Recherche */
#Recherche { }
/* Commentaires */
#CommentRecent { }
.box {
width:100%;
margin-bottom:10px;
color:transparent;
border: solid black 1px;
}
.box h2 {
color:#0000FF;
font-weight:bold;
border-bottom: solid transparent 2px;
}
.box-top {
background: transparent;
border-left: none 0px;
border-bottom: none 0px;
border-right: none 0px;
border-top: solid #FFFFFF 2px;
}
.box-left {
background:transparent;
margin:0px;
border-right: none 0px;
border-bottom: none 0px;
border-top: none 0px;
border-left: solid #FFFFFF 2px;
}
.box-right {
margin:0px;
background: transparent;
border-left: none 0px;
border-bottom: none 0px;
border-top: none 0px;
border-right: solid #9E9E9E 2px;
}
.box-bottom {
background:transparent;
border-left: none 0px;
border-right: none 0px;
border-top: none 0px;
border-bottom: solid #9E9E9E 2px;
}
.box-topLeft {
padding-left:20px;
background:transparent;
}
.box-topRight {
padding:3px;
background:transparent;
}
.box-bottomLeft {
margin:0px;
background:transparent;
}
.box-bottomRight {
padding:0px;
background:transparent;
}
.box-content {
background:#1e90ff;
overflow:hidden;
padding:10px 10px 10px 10px;
border-left: solid #9E9E9E 2px;
border-bottom: solid #FFFFFF 2px;
border-top: solid #9E9E9E 2px;
border-right: solid #FFFFFF 2px;
}
.box-content p { margin:0px 0px 0px 0px; padding:0px; }
.box-content ul { margin:0px 10px 0px 0px; padding:0px; }
.box-content li { list-style:square; color:transparent; margin:3px; padding:5px; }
/* ---------- Recherche --- */
#Recherche { padding:0px; }
#WForm { margin:0px; border:solid 1px #D8D7D7; padding:10px; background: #F3F7FC; }
#WForm input { border:solid 1px #D8D7D7; font-size:100%; background:#f4f4f4; color:#5675A4; }
#WForm input:hover { border:solid 1px #5675A4; background:#fff; }
.RNum { font-weight:bold; }
.RDesc { padding:10px; }
.ROut { font-style:italic; color:#A0B8CB; }
.RSize { color:#BFBFBF; }
a.RTitle { text-decoration:none; color:#00275E; }
a.RTitle:hover { text-decoration:none; color:#834141; }
#GGResults { text-align:left; margin:0px; color:#000000; }
.Result1 { padding:4px; background:#F7FAFD; }
.Result2 { padding:4px; background:#FBFBFB; }
/* Articles */
.article, .articleSeul {
margin-top:0px;
padding:0px;
background: transparent;
color: #000000;
}
.article p, .articleSeul p {
padding:0px 0px 5px 5px;
margin:0px
}
.Date {
padding:0px 0px 5px 0px;
margin:5px 0px 5px 0px;
border-bottom:1px solid #FFFFFF;
width:100%;
}
.Option {
padding:5px 0px 0px 0px;
margin:0px 0px 20px 0px;
border-top:1px dashed #FFFFFF;
width:100%;
text-align:right;
font-size:85%;
color:#808080
}
/* Commentaires */
#comment { }
.commentMessage {
padding:5px;
border:1px dotted #999999;
background:#0000FF;
margin:0px;
color: #999999;
}
.commentOption {
text-align:right;
font-size:85%;
color:#808080;
margin-bottom:10px
}
/* Trackback */
#addTrackback {
background:#0000FF;
color: #6699CC;
padding:5px;
border-bottom: solid #9E9E9E 2px;
border-right: solid #9E9E9E 2px;
border-left: solid #FFFFFF 2px;
border-top: solid #FFFFFF 2px;
}
/* Calendrier */
.calendarTop1 {
font-family: Verdana, Arial, Helvetica;
font-size: 10px;
font-style: normal;
color:#000000;
font-weight: bold;
background-color:#1e90ff;
} /*entete*/
.calendarToday1 { font-family: Verdana, Arial, Helvetica; font-size: 10px; font-weight: bold; color:#0000FF; background-color:#1e90ff;} /*
Aujourd'hui */
.calendarDays1 { width:40px; height:15px; font-family:Verdana, Arial, Helvetica; font-size: 10px; font-style: normal; color:white;
background-color: #1e90ff; text-align:center;}
.calendarHeader1{ font-family: Verdana, Arial, Helvetica; font-size: 10px; background-color:#000000; color:#0000FF;} /* lettre de la
semaine */
.calendarTable1 { background-color:#0000FF;border:0px solid #000000;} /* contour du calendrier */.alignC { text-align:center; }
.basLien { } /*ne change rien au style actuel*/
.basLien:hover { } /*ne change rien au style actuel*/
.titreArticle{text-decoration:none; color: #000000;}/*évite le soulignement du lien*/
.titreArticle:hover {text-decoration:none; color: #000000;}
.topLien{text-decoration:none;}/*évite le soulignement du lien*/
.topLien:hover {text-decoration:none;}/*évite le soulignement du lien survolé*/
/* Fenetres ajout de commentaire, de trackback, recommander */
#formComment, #divTrackBack, #divRecommander, #divNewsletter {
color: #000000;
border: 1px 2px #FFFFFF;
margin-top: 10px;
}
.newsletter {
margin: 0px;
padding-left: 20px;
}
/*= Specifique ecran =*/
#divRecommander {
width: 650px;
height: 550px;
}
#divNewsletter ul {
text-align: left;
list-style-type: none;
}
#divRecommander fieldset {
border: none 0px;
}
#divRecommander table {
width: auto;
margin: auto;
}
#formComment {
width: 390px;
height: 430px;
}
#divTrackBack {
width: 470px;
height: 470px;
}
#divNewsletter form p {
font-size: 0.8em;
text-align: left;
margin-left: 10px;
margin-right: 10px;
bottom: 10px;
position: relative;
padding: 10px;
}
/*= Titre page =*/
#formComment h2, #divTrackBack h2,
#divRecommander legend, #divNewsletter h2 {
font-family: cursive;
font-size: 16px;
text-decoration: underline;
margin-bottom: 40px;
}
/*= Contenu =*/
#formComment form {
text-align: center;
}
#divTrackBack table {
margin-bottom: 25px;
}
/*= Libelles =*/
#divTrackBack td, #formComment label,
#divRecommander table.txt strong, #divNewsletter label {
position: relative;
font-weight: bold;
font-family: Verdana, Arial, Helvetica;
font-size: 12px;
left: 10px;
}
#formComment label {
float: left;
clear: both;
}
/*= Champs de saisie =*/
#divTrackBack input, #formComment input,
#formComment textarea, #divRecommander input,
#divRecommander textarea, #divNewsletter input {
background: #0000FF;
border: inset 1px #9E9E9E;
padding-bottom: 5px;
color: #000000;
font-size: 10px;
font-family: Verdana, Arial, Helvetica;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 2px;
}
/* saisie texte */
#formComment input[type="text"], #formComment textarea {
float: right;
margin-right: 30px;
margin-bottom: 1px;
margin-top: 2px;
}
#divNewsletter input {
margin-left: 15px;
}
.txt td {
border: 0px none;
vertical-align: top;
padding-right: 10px
}
/* case a cocher */
#formComment input[type="checkbox"]{
float: left;
margin-left: 20px;
}
/* boutons */
#divTrackBack input[type="submit"], #formComment input[type="submit"],
#divRecommander input.submit {
background: #0000FF;
color: #000000;
border: 1px outset ;
}
#divRecommander input.submit {
float: right;
margin-right: 12px;
right: 30px;
bottom: 15px;
}
/* Album photos */
#generalAlbum {
width: 100%;
}
/* Gallerie d albums */
.AccAlbum {
width: 80%;
position: relative;
margin: 0 auto 0 auto;
}
/* Vignettes d'album*/
.thumbAccAlbum {
position: relative;
float: left;
padding: 5px;
}
/* Pied de page d'album */
#piedAlbum {
clear: both;
text-align: center;
}
/* Détail d'album */
/* Navigation dans l'album, groupe de vignettes, nom de la photo, photo */
.quickNavAlbum, #centrethumbsAlbum, .nomPhotoAlbum, .photoAlbum {
position: relative;
margin: 0 auto 0 auto;
width: 80%;
text-align: center;
}
/* Navigation : Photo suivante */
.suivAlbum { float: right; }
/* Navigation : Photo précédente */
.precAlbum { float: left; }
/* Vignettes */
.thumbAlbum, .thumbCouranteAlbum {
position: relative;
float: left;
margin: 5px;
padding: 2px;
border: dashed 1px;
}
/* Vignette courante */
.thumbCouranteAlbum {
border: solid 1px;
}


LOCALISATION : FRANCE - BELGIQUE : Société Euromove
Indispensable pour évacuer des personnes par les escaliers dans les cas suivants :
Lévacuation est fluide et adapté à tout plan dévacuation.
Philippe (Alias Handimob)
Commentaires