CSS - Liens Conteneur Head (1)
Suite aux articles sur le CSS pour gérer le fond des pages
CSS - Liens Conteneur Head
Correspondance dans le designer DIZ Perso : #haut = #head et #cadre = #conteneur
Attention !!! toujours faire une copie de votre feuille de style, avant modification tout simplement dans le bloc notes ou autre éditeur texte. Par la suite je donnerai des liens pour certains outils que j'utilise régulièrement...Après l'installation d'un fond d'écran ou arrière plan des pages du blog, faisant suite à mes articles CSS - fond d'écran (1 - 2 - 3) dans lesquels je donne mes idées sur la première règle : body { background: url(adresse image) .......} , c'est simplement le résultat de mes diverses recherches et nombreux essais, que je mets, sans engagement ni responsabilité, à la disposition des visiteurs de mon Bric à Brac. Une aide par l'exemple car mon blog, s'appuyant sur le modèle graphique N°5, ne ressemble presque plus à l'original, toute la présentation provient des règles, de la feuille de style, modifiées ou créées. Je n'ai pas cherché à faire un graphisme artistique, ce n'est pas mon but, j'essaie progressivement d'employer les possibilités du CSS. Pour ceux qui souhaitent avoir toujours une bonne documentation j'indique ce [lien] direct sur les propriétés d'arrière plan.
Dans un premier temps je fais en sorte qu'il ne soit pas nécessaire de retoucher le code HTML mais le besoin, arrivera très vite, de se lancer dans le code. Je suggère donc à ceux qui seront intéressés et qui ne sont pas équipés de télécharger Kompozer, de regarder ce gratuit en français qui permet de créer des sites en Html et en même temps créer ou modifier une feuille de style en CSS, donc très utile pour vous aider à construire vos pages sans être en ligne, actuellement c'est dans ce logiciel que j'écris mes articles. Une fois bien en place et bien organisé on gagne du temps pour écrire les articles, Kompozer est un éditeur WYSIWYG , c'est comme un traitement de texte et cerise sur le gâteau, il contient également une aide en français, même la possibilité de créer des modèles ce qui permet de gagner encore plus de temps pour se consacrer à la rédaction.
Les 4 règles suivantes sont pratiquement liées, selon la couleur choisie comme fond du #conteneur car c'est ce bloc qui contient tous les éléments de la page, bandeau haut page, les menus haut et gauche, corps de l'article, commentaire et pied de page. Dans la version gratuite le reste est réservé à la publicité, d'après ce que j'ai pu constater.
Les 2 premières règles gérent la couleur des textes contenant un lien et le changement lors du survol de la souris, elles agissent la balise HTML Ex: <a href= adresse >ici texte visible du lien</a>.
Dans le CSS les commentaires sont mis entre /* texte commentaire */ et ne seront pas affichés, ils sont très utiles, voire nécessaires pour les programmeurs et la maintenance d'un site.a {
text-decoration: underline; /* soulignement du lien */
color: #000; /* code couleur blanc */
a:hover {
text-decoration: none; /* pas de soulignement */
color: #000; /* code couleur blanc */
} Dans Bric à Brac j'ai choisi des couleurs différentes du noir ou du blanc et c'est plus le fond qui joue un rôle et la surbrillance du texte en laissant le soulignement. Pour choisir des variantes de la même couleur et se rendre compte du résultat à l'écran suivre ce[lien].
D'autres modifications peuvent être ajoutées mettre des caractères différents ou plus grands.
Il est possible également de faire une règle pour les liens actifs ou dèjà visités. J'ai trouvé un exemple pour voir le résultat, plus facile de se rendre compte, suivre ce [lien].
La troisième règle, déjà expliquée ci-dessus, pour le conteneur, il y en a un seul dans une page, le # devant indique celà et dans le code source il est reprèsenté par ID (identifiant) ...
#conteneur {
border: 1px solid #43689F; /* bordure de l'ensemble d'un blog */
width: 768px; /* largeur à mon avis pas changer& */
margin: 0 auto; /* marge extérieure : 0 pour le en haut */
/* et auto pour le reste */
padding: 0 0 0 0; /* marge intérieure 0 */
/* le contenu réglera par margin */
text-align: left; /* texte aligné à gauche */
background: #FFF; /* code couleur du fond du conteneur */}
Sur cette page je teste un système de changement de couleur des blocs actifs, je pense possible d'adapter cette astuce en mettant le texte en surbrillance ou d'une couleur plus foncée ou plus claire sur des fonds transparents. Pour l'instant je reste sur le plus classique mais je crois ue je vais m'y intéresser. A suivre...
La quatrième règle permet les modifications sur la partie haute des pages, c'est dans cette partie que viendra se loger, le titre du blog, la bannière ou le logo mais il sera possible de changer le fond, la présentation.
#head {
background: url(img1/head.jpg) no-repeat; /* image par défaut */
height: 100px; /*hauteur du bloc */
padding: 0 0 0 0; /* marge intérieure nulle */
margin: 0 0 0 0; /* marge extérieure nulle */
} 
