CSS - Modifications (suite)
Suite de mes modifications personnelles...
Mes modifications sur #conteneur et #rubrique
Dans la régle du #conteneur, j'ai simplement mis la bordure à 0px et la couleur du fond en transparent .
En rouge mes modifications :
border: 0px solid #415680;
width: 768px;
margin: 0 auto;
padding: 0 0 0 0;
text-align: left;
background: transparent;
}
Le bloc #rubriques s'étend sous le module rubrique mais également sous la partie où seront rédigés les articles avec le composeur, l'emplacement de la rédaction des commentaires et des liens. Le reste de la page est le pied de page géré par la régle #footer.
float: right;
width: 530px;
margin: 20px 10px 0 0;
padding: 5px 10px 5px 10px;
background: #000066;
text-align: left;
color: #00FFFF;
font: 12pt;
font-family: "Comic Sans MS", Arial;
}
En rouge mes modifications :
- padding - modifié pour dégager une marge intérieure.
- background - créé pour différencier du #conteneur et des fonds de mes articles.
- text-align - alignement du texte à gauche pour éviter l'héritage d'une autre régle, même raison pour les 3 éléments suivants.
- color - couleur du texte.
- font - taille des caractères
- font-family - les polices de caractères
Cette régle gére le titre qui se place dans une barre noir avec un relief. Sur cette page par exemple c'est en couleur orange "Mes modifications sur #conteneur et #rubrique"
background: url(img5/rub.jpg) no-repeat;
margin: 10px 0 10px 0;
width: 530px;
padding: 10px 0 15px 30px;
font: bold 11pt Comic Sans MS;
color: #FFFF00;
}
En rouge mes modifications :
- width - largeur 450px agrandie à 530px .
- padding - marge intérieure 50px ramenée à 30px.
- font - changement de police des caractères
- color - couleur du texte changée.
Création d'une nouvelle règle sur la base du titre de l'article #rubriques h3 ce qui va me permettre de faire des titres intermédiaires dans le corps de mes articles en mettant dans le code source HTML les balises suivantes : <h3>autour du titre<h3> ... Ceci me laisse toute latitude de faire une présentation différente en cours de mes articles avec éventuellement une image différente de celle du modèle de base "img5/rub.jpg".
background: url(img5/rub.jpg) no-repeat;
margin: 10px 0 10px 0;
width: 530px;
padding: 10px 0 15px 15px;
font: bold 11pt Comic Sans MS;
color: #FBB420;
}
En rouge mes modifications :
Par rapport la régle précédente j'ai simplement modifié la marge intérieure gauche 15px et la couleur des caractères
Je précise que la règle ci-dessus sera utilisée que si l'on crée dans le code HTML un bloc avec les balises suivantes :<DIV ID="article"> ... entre ces 2 balises rédaction de l'article <DIV>
C'est la première fois que je parle de faire une modification du code source, jusque là mes modifications se faisaient uniquement sur la feuille de style CSS.
La suite de mes articles imposera de rentrer du HTML, en créant au début des blocs pour mieux présenter les articles comme je le fais actuellement en publiant mes articles sur les modifications de mon modèle de base. A suivre...
Les 3 règles suivantes sans changement :
- .space - règle qui met le pied de page toujours en fin de page.
- #footer - gestion du pied de page.
- td - Je pense qu'elle gère la taille des caractères en général si rien n'est précisé.
.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;
}
