Blog4ever - BRIC A BRAC

Articles

Photos

Forum

Sondage

Comment trouves-tu mon site/blog
Intéressant
avec une bonne navigation
avec une mise à jour fréquente
contenant une approche différente à ce qui existe
sans intérêt
Tous les sondages

Liens/Partenaires

Statistiques

Total : 25738 visiteurs
Aujourd'hui : 44 visites
En ce moment : 3 visiteurs
Mis à jour le 27-06-2008
Créé le 08-05-2005

Je viens de mettre en ligne un nouveau blog "DizTest" dédié au DizPerso, cliquez sur le lien en haut de la page d'accueil. Ce blog est un outil que j'utiliserai comme support pour mes réponses aux demandes des bloggeurs sur le forum d'aide. Pour ceux qui s'intéressent au CSS, ils trouveront des astuces, des idées pour personnaliser leur blog.
N'oubliez pas sur mes pages... survolez les textes avec votre souris pour les lire, la transparence parfois les rend moins lisibles.
Consultez "Quoi de Neuf" ou "Sommaire des articles" puis bons surfs...

PapyClic....

Envoyer un mail à PapyClic le webmaster de Bric à Brac

Houba !!! Houba !!! cliques pour remonter

DizPerso par PapyClic
dans DizTest

Cliquez la liste ci-dessous
Tous les articles

Votre navigateur n'est pas compatible avec le <a href="http://www.i-tchat.com" onClick="window.open(this.href+'?51840');">tchat</a>, cliquez ici pour voir le <a href="http://www.i-tchat.com" onClick="window.open(this.href+'?51840');">tchat gratuit</a>.
Ouvrir le tchat dans une popup.

CSS - Sommaire

Blog4ever - CSS Modèle 5

Etude de la feuille de style et les modifications à lui apporter sans toucher au code source HTML.

Table des matières

Modèle graphique de base N°5

body {
background: url(img5/fond.jpg) #344566;
margin: 15px 0 15px 0;
padding: 0 0 0 0;
font: 10pt trebuchet MS;
text-align: center;
color: #FFF;
}

a {
text-decoration: underline;
color: #E5ECF7;
}

a:hover {
text-decoration: none;
color: #FDC415;
}

#conteneur {
border: 1px solid #415680;
width: 768px;
margin: 0 auto;
padding: 0 0 0 0;
text-align: left;
background: #000;
}

#head {
background: url(img5/head.jpg) no-repeat;
height: 100px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

#menu_haut {
        border-top: 1px solid #415680;
        width: 768px;
padding: 0 0 0 0;
margin: -30px 0 0 0;
        float: left;
}

ul {
list-style-type: none;
width: 100%; /* précision pour Opera */
}

.menuhaut li {
float: left;
}

.menuhaut a {
margin: 0 2px;
width: 100px;
height: 23px;
display: block;
text-align: center;
border: 1px solid #415680;
text-decoration: none;
color: #fff;
background: #0E1A32;
font: bold 11pt Trebuchet MS;
}

.menuhaut a:hover {
background: #344566;
border: 1px solid #415680;
}

.menuhaut a:active {
background: #344566;
border: 1px solid #415680;
color: #344566;
}

#menu_gauche {
float: left;
margin: 10px 0 0 0;
padding: 0 0 0 0;
width: 170px;
}

html > body #menu_gauche {
float: left;
margin: 35px 0 10px 10px;
}

#menu_gauche ul{
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type : none;
}

#menu_gauche ul li{
margin: -1px 0 0 0;
padding: 0 0 0 0;
        border: 1px solid #415680;
        background: #0E1A32;
        width: 170px;
}

#menu_gauche ul li a{
background: #0E1A32;
padding: 3px 0 3px 0;
margin: 0 0 0 0;
width: 170px;
line-height: 25px;
text-decoration: none;
font: 10pt Trebuchet MS;
}

html > body #menu_gauche ul li a{
display: block;
width: 170px;
}

#menu_gauche ul li a:hover{
background: #61778B;
margin: 0 0 0 0;
line-height: 25px;
padding: 3px 0 3px 0;
font: 10pt Trebuchet MS;
}

#menu_gauche h2{
margin: 0 0 0 0;
background: #344566;
border: 1px solid #415680;
color: #FFF;
width: 170px;
text-align: center;
font: bold 11pt Trebuchet MS;
padding: 5px 0 5px 0;
}

* html #menu_gauche h2{
width: 172px;
}

#rubriques {
float: right;
width: 530px;
margin: 20px 10px 0 0;
padding: 0 0 0 0;

}

#rubriques h3{
background: url(img5/rub.jpg) no-repeat;
margin: 10px 0 10px 0;
width: 450px;
padding: 10px 0 15px 50px;
font: bold 11pt Trebuchet MS;
color: #FFF;
}

.space {
clear: both;
height: 20px;
}

#footer {
margin: 0 0 0 0 ;
padding: 0 10px 0 10px;
text-align: right;
        background: #344566;
        border-top: 1px solid #415680;
        font: bold 10pt Trebuchet MS;

}

td {
font-size:10pt;
}

CSS après modifications

La feuille de style ci-dessous est celle utilisée avant de faire la présentation de Noël et sans les effets de transparence ainsi que les changement de couleur des divers blocs au survol de la souris.
Les modifications pour obtenir la version actuelle seront l'objet de la deuxième partie de mon étude du modèle graphique avec les créations de blocs dans le code source HTML et mes astuces de présentation, de navigation comme sur cette page, une table des matières ou sur toutes les pages la possibilité de circuler de page en page.

body {
background: url(http://img135.imageshack.us/img135/6339/fond3hz0.jpg) top center no-repeat fixed #344566;
width: 1024px;
height: 768px;
margin: 0 0 0 0;
padding: 0 0 0 0;
font: 12pt trebuchet MS;
text-align: center;
color: #FFF;
}
a {
text-decoration: underline;
color: #E1793E;
background: #ACEDFB;
padding: 0px 2px 2px 2px;
font: bold 11pt;
}
a:hover {
text-decoration: none;
color: #F23115;
background: #FDD5A8;
padding: 0px 2px 2px 2px;
font: bold 13pt;
cursor: url("http://notreespace.neuf.fr/images/harrow.cur");
}
/*
====================================================
Pour modifier le bloc qui contient tous les éléments
sauf l'image de fond d'écran
----------------------------------------------------
*/
#conteneur {
border: 0px solid #415680;
width: 768px;
margin: 0 auto;
padding: 0 0 0 0;
text-align: left;
background: #FFD600;
}
/*
====================================================
Bloc du titre, logo ou bannière du blog
----------------------------------------------------
*/
#head {
background: transparent;
width: 100%;
height: 100px;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
#head h1{
padding: 0 0 0 0;
margin: 0 0 0 0;
font-size: 35pt;
color: #fff;
text-align: center;
}
/*
====================================================
Bloc du menu horizontal du haut
----------------------------------------------------
*/
#menu_haut {
border-top: 0px solid #415680;
background: transparent;
width: 768px;
padding: 0 0 0 0;
margin: -30px 0 0 0;
float: left;
}
ul {
list-style-type: none;
width: 100%;                  /* précision pour Opera */
}
.menuhaut li {
float: left;
background: transparent;
}
.menuhaut a {
margin: 0 2px;
width: 100px;
height: 23px;
display: block;
text-align: center;
border: 0px solid #FBB420;
text-decoration: none;
color: #fff;
background: #0E1A32;
font: bold 12pt Trebuchet MS;
}
.menuhaut a:hover {
background: #344566;
border: 1px solid #FBB420;
color: #EE8320;
}
.menuhaut a:active {
background: #344566;
border: 1px solid #FBB420;
color: #EE8320;
}
/*
====================================================
Bloc du menu vertical de gauche
----------------------------------------------------
*/
#menu_gauche {
float: left;
margin: 10px 0 0 0;
padding: 0 0 0 0;
width: 170px;
}
html > body #menu_gauche {
float: left;
margin: 35px 0 10px 10px;
}
#menu_gauche ul{
margin: 0 0 0 0;
padding: 0 0 0 2px;
list-style-type : none;
}
#menu_gauche ul li{
margin: 0 0 0 0;
padding: 0 0 0 2px;
border: 1px solid #415680;
background: #0E1A32;
width: 170px;
}
#menu_gauche ul li a{
background: #0E1A32;
padding: 3px 0 3px 2px;
margin: 0 0 0 0;
width: 170px;
line-height: 25px;
text-decoration: none;
font: 10pt Trebuchet MS;
}
html > body #menu_gauche ul li a{
display: block;
width: 170px;
}
#menu_gauche ul li a:hover{
background: #FDD5A8;
margin: 0 0 0 5px;
line-height: 25px;
padding: 3px 0 3px 0;
font: 11pt Comic Sans MS;
}
#menu_gauche h2{      /* les titres */
margin: 0 0 0 2px;
background: #FCFE9C;
border: 1px solid #415680;
color: #FF6600;
width: 172px;
text-align: center;
font: bold 12pt Comic Sans MS;
padding: 5px 0 5px 3px;
}
* html #menu_gauche h2{
width: 172px;
}
/*
====================================================
Bloc des rubriques
----------------------------------------------------
*/
#rubriques {
float: right;
width: 530px;
margin: 20px 10px 0 0;
padding: 5px 10px 5px 10px;
text-align: left;
color: #00FFFF;
background: #000066;
font: 12pt;
font-family: "Comic Sans MS", Arial;
}
#rubriques h3{
background: url(img5/rub.jpg) no-repeat;
margin: 10px 0 10px 0;
width: 530px;
padding: 10px 0 15px 30px;
font: bold 12pt Comic Sans MS;
color: #FFFF00;
}
/*
====================================================
Règle pour maintenir le pied de page en fin de page
----------------------------------------------------
*/
.space {
clear: both;
height: 20px;
}
/*
====================================================
Règle du pied de page
----------------------------------------------------
*/
#footer {
margin: 0 0 0 0 ;
padding: 0 10px 0 10px;
text-align: right;
background: #344566;
border-top: 1px solid #415680;
font: bold 12pt Trebuchet MS;
color: navy;
}
td {
font-size:10pt;
}

Je serai très heureux d'avoir vos réactions en me mettant des commentaires ou en ouvrant un sujet sur le forum dans la catégorie CSS dans Blog4ever. bonne lecture...
J'attends surtout vos idées pour encore améliorer avec une aide de votre part car je ne suis pas un "PRO" des corrections et des conseils seront les bien venus.
D'avance merci

Article ajouté le 2007-12-18 , consulté 364 fois