CSS - Sommaire
Etude de la feuille de style et les modifications à lui apporter sans toucher au code source HTML.
Table des matières
- Fond d'écran (1)
- Fond d'écran (2)
- Fond d'écran (3)
- Liens conteneur HEAD (1)
- Liens conteneur HEAD (2)
- Menu horizontal du haut
- Menu vertical de gauche
- Mes modifications menu gauche
- Mes modifications du CSS (suite)
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
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.
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://patmax.info/curseurs/main4.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
