Les Créations de Klo

• Accueil
• Livre d'or
• Liens

CSS Evangeline Lilly

/* Mise en page

 

Quelques informations sur les balises :

- a : lien

- a:hover : lien survolé

- img : image

- p : paragraphe

- h1 : titre (ici, sections du menu)

- h3 : titre (ici, affichage de la catégorie visitée)

- ul : menu (contient des listes)

- li : listes (à l'intérieur d'un ul)

*/

 

 

/* Propriétés générales de la page */

body {

margin:0;

padding:0;

background-color:#ADE2F6;

font:12px "Verdana" ,Arial, Verdana, Geneva, Trebuchet MS, Helvetica, sans-serif;

}

 

/* HAUT DE PAGE */

 

/* Bannière */

div#top {

margin:0;

padding:0;

position:absolute;

width:780px;

height:400px;

background-image:url(http://img206.imageshack.us/img206/8980/evlel5.jpg);

margin-left:50%;

left:-390px;

border:2px solid #065BA4;

}

 

/* Logo */

div#logo {

margin:0;

padding:0;

position:absolute;

font-family:comic sans ms;

font-size:15px;

left:280px;

}

div#logo a {

text-decoration:none;

color:#FFFFFF;

}

 

/* Pub */

div#pub {

margin:0;

padding:0;

position:absolute;

bottom:1px;

left:1px;

}

div#pub img {

border:none;

}

 

/* Nom du blog */

p.name {

margin:165px 0px 0px 150px;

padding:0;

font-family:comic sans MS;

font-style:italic;

font-size:23px;

color:#4D4C6F;

}

p.name a {

text-decoration:none;

color:#4D4C6F;

}

p.name a:hover {

text-decoration:italic;

}

 

/* Formulaire de Newsletter */

div#newsletter {

margin:0;

padding:0;

position:absolute;

right:5px;

top:370px;

color:#FFFFFF;

}

input.champnl, input.subnl, form.newsletter p {

margin:0;

padding:0;

border:1px solid #065BA4;

}

 

/* MENU DE DROITE */

 

/* Conteneur qui comprend le menu de droite et les articles */

div#conteneur {

position:absolute;

width:780px;

margin-left:50%;

left:-390px;

top:410px;

}

 

/* Menu de droite */

div#menu {

margin:0;

padding:0;

width:200px;

float:right;

border:2px solid #065BA4;

background-color:#AEBDF6;

background-image:url(http://img99.imageshack.us/img99/4853/fontcoteelke8.jpg);

font-family:Trebuchet MS;

font-size:13px;

color:#4D4C6F;

text-align:center;

}

 

/* Avatar */

div#avatar {

padding:0;

margin:0;

width:200px;

text-align:center;

margin-top:10px;

}

div#menu p {

margin:0;

padding:5px;

padding-top:10px;

padding-bottom:10px;

color:#4D4C6F;

}

div#menu h3 {

margin:0;

padding:0;

font-family:comic sans ms;

font-size:16px;

width:190px;

text-align:center;

color:#788AF8;

}

div#menu ul {

padding:0;

margin:0;

padding-top:10px;

padding-bottom:10px;

padding-left:5px;

color:#4D4C6F;

}

div#menu li {

padding:0;

margin:0;

list-style-type:none;

}

div#menu a {

text-decoration:none;

color:#4D4C6F;

}

div#menu a:hover {

text-decoration:underline;

}

div#menu img {

border:none;

}

 

/* Skyscraper (pub) dans le menu de droite */

div#pubsky {

width:200px;

text-align:center;

padding-top:10px;

}

 

/* Pied du menu de droite */

div#foot {

text-align:center;

}

 

/* Lien de prévention d'un abus */

a.prevent {

text-decoration:none;

padding-left:5px;

color:#4D4C6F;

font-weight:bold;

}

 

/* CONTENEUR GAUCHE (articles) */

 

/* Conteneur des articles */

div#contenu {

float:left;

width:570px;

margin-top:15px;

color:#FFFFFF;

}

div#contenu h3 {

text-align:center;

color:#FFFFFF;

padding-top:3px;

}

div#contenu img {

border:none;

}

h1.titrerub, h1.titrealb {

font-size:14px;

margin:0;

padding:0;

color:#FFFFFF;

}

p.descrrub, p.descralb {

color:#FFFFFF;

}

 

/* Menu pour accéder aux pages */

div.menupage {

width:570px;

text-align:center;

font:12px Tahoma;

}

div.menupage a {

text-decoration:none;

color:#065BA4;

margin-top:3px;

}

div.menupage a:hover {

text-decoration:underline;

}

div.menupage p {

padding:0;

margin:0;

color:#788AF8;

}

 

/* Article */

div.article {

border:2px solid #065BA4;

background-color:#AEBDF6;

background-image:url(http://img99.imageshack.us/img99/2480/fonartelyh0.jpg);

color:#4D4C6F;

width:550px;

}

div.article p {

margin:0;

padding:0;

font:13px Arial;

color:#4D4C6F;

}

blockquote {

border:1px solid #ffffff;

padding:10px;

}

 

/* Titre et pied d'article */

div.title {

color:#788AF8;

margin:7px;

padding:3px;

text-align:center;

font-family:comic sans ms;

}

div.title a {

text-decoration:none;

color:#788AF8;

}

div.title a:hover {

text-decoration:underline;

}

div.title h1, div.title h2 {

display:inline;

color:#788AF8;

font-size:16px;

}

div.footer {

color:#788AF8;

margin:7px;

text-align:center;

}

div.footer a:hover {

text-decoration:underline;

}

div.title p {

margin:0;

padding:0;

padding-left:7px;

font:14px comic sans ms;

color:#788AF8;

}

div.footer p {

margin:0;

padding:0;

padding-right:7px;

text-align:center;

color:#788AF8;

}

div.footer a {

text-decoration:none;

color:#788AF8;

font:16px comic sans ms;

}

 

/* Contenu de l'article */

div.content {

margin:7px;

}

div.content a {

color:#C9EEF7;

}

div.content a:hover {

text-decoration:none;

}

 

div.spacer {

height:1px;

clear:both;

}

.inter

{

height:150px;

background-image:url(http://img45.imageshack.us/img45/8920/evlentrecu9.jpg);

background-repeat:no-repeat;

background-position:center;

 

/* Image alignée à gauche */

.imgleft img {

float:left;

clear:both;

margin-right:7px;

margin-left:1px;

}

 

/* Image alignée à droite */

.imgright img {

float:right;

clear:both;

margin-left:7px;

margin-right:1px;

}

 

/* Image alignée au milieu */

div.imgcenter {

text-align:center;

}

 

/* Formulaire d'identification pour les rubriques privées */

.bigpass {

text-align:center;

font-size:32px;

width:200px;

margin-top:5px;

}

 

/* Tableau d'affichage des albums photos */

table.album {

width:570px;

text-align:center;

}

table.album td {

padding:10px;

width:250px;

background-color:#75A2CF;

-moz-border-radius-topleft:10px;

-moz-border-radius-topright:10px;

-moz-border-radius-bottomleft:10px;

-moz-border-radius-bottomright:10px;

text-align:center;

}

table.album img {

border:none;

opacity:0.8;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);

}

table.album a:hover img {

opacity:1;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

}

 

ul.detailsimg {

padding:0;

margin:0;

color:#FFFFFF;

}

ul.detailsimg li {

list-style-type:none;

}

ul.detailsimg .titre {

font-weight:bold;

}

ul.detailsimg .poids {

font-size:10px;

font-style:italic;

color:#FFFFFF;

display:inline;

}

ul.detailsimg .dimensions {

font-size:10px;

font-style:italic;

color:#FFFFFF;

display:inline;

}

ul.detailsimg .dimensions:before {

content: "- ";

}

 

ul.rsslist .nouveauxarticles {

background:url(http://www.lexodev8.com/style/icones/rss.gif) bottom left no-repeat;

padding-left:20px !important;

height:16px;

}

.current {

font-weight:bold;

}

 

/* Les commentaires */

table.tablosigna {

width:90%;

border:2px solid #065BA4;

background-image:url(http://img99.imageshack.us/img99/2480/fonartelyh0.jpg);

}

table.tablosigna td {

padding:7px;

font-family:comic sans ms;

font-size:12px;

color:#4D4C6F;

}

td.firstd {

width:68px;

}

table.tablosigna a {

color:#065BA4;

text-decoration:none;

}

table.tablosigna a:hover {

text-decoration:underline;

}

 

/* Pied de page */

 

div#pieddepage {

display:none;

}

span.date {

            padding-left:5px;

}

---

1. anyouchka Le 06/09/2006 à 12:30

j'aimerai prendre cette css pour mon blog elle est tro belle
www.anyouchka.bloxode.com

---

2. cecile72 Le 30/06/2007 à 19:58

moi ossi svp je voudrais cette css pour mon blog qui www.cecile72.bloxode.com
merci

Vous

Votre nom :

E-mail (optionnel) :

URL de votre site (facultatif) :

Votre message

Message :

Plus de smileys

Champ de sécurité

Veuillez recopier les caractères de l'image :

• Accueil
• Livre d'or
• Liens