Sommaire CSS décortiqué

1- Structure du blog sur Over-Blog
2- Qu'est-ce que le CSS ?
3- Modifier l'entête / Mettre une bannière en place
4- Formatage du texte
5- Mettre un fond d'écran
6- Créer une page d'accueil
7- Modifier le fond des articles et modules
8- Et le html dans tout ça ?
9- Modifier la largeur de votre blog, des colonnes articles et modules
10- Personnaliser le style des commentaires
11- Propriétés et valeurs des CSS les plus courantes
 12- Avoir un style différent pour chaque module
13- Un favicon dans la barre de navigation
par ๑۩۞۩๑ [dd] ๑۩۞۩๑ publié dans : Le CSS décortiqué communauté : BLOGS, en parler ...
ajouter un commentaire commentaires (7)    recommander

Structure du blog

On va commencer par le début.
Voici votre blog (avec ou sans les colonnes droite et gauche) :

miseenpage.gif
Il est divisé en trois structures principales :

miseenpage3parties.gif
#ln_0 représente votre entête (comprenant le titre de votre blog et/ou votre bannière)
#ln_1 représente les articles et éventuelle(s) colonne(s)
#ln_2 représente votre pied de page


 Il est aussi divisé ainsi (les sous-structures) :

miseenpagedetail.gif

La partie #cl_0_0 est une sous-structure de #ln_0
Les parties #cl_1_0, #cl_1_1 et #cl_1_2 sont des sous-structures de #ln_1
La partie #cl_2_0 est une sous-structure de #ln_2


Ces diverses appellations nous serviront plus tard
à modifier le fichier CSS de votre blog.
par ๑۩۞۩๑ [dd] ๑۩۞۩๑ publié dans : Le CSS décortiqué communauté : BLOGS, en parler ...
ajouter un commentaire commentaires (3)    recommander

Changer son entête / Mettre une bannière

Comment mettre en place une bannière?

La méthode la plus simple est dans : CONFIGURER -> MISE EN PAGE.

Le blog apparait sous forme de schéma. La partie qui nous interesse est le rectangle tout en haut, représentant l'entête. En survolant ce "bloc", trois icônes apparaissent. La 2émé, un marteau, va nous permettre de modifier le contenu de l'entête.

sch--ma.gif
On clique sur le marteau et on retrouve le même genre de fenêtre que lorsqu'on publie un article. D'ailleurs, c'est le même principe !

fenetreentete.jpg
On y choisit soit d'y écrire le titre de son blog (en selectionnant "Titre du blog"), soit d'y ajouter une bannière, au préalable enregistrée dans mes images et/où un texte (en sélectionnant "Contenu personnalisé").

REMARQUE : Selon le design que vous avez choisi pour votre blog, il se peut que l'image ajoutée pour l'entête ne couvre pas le "cadre" prévu initiallement. Je pense par exemple aux modèles "nacre" :
Nous verrons plus tard comment enlever dans le CSS cette image cadre initiallement prévue dans certains design.
 

 attention1.gif Si vous choisissez d'enregistrer votre bannière dans vos documents Over-Blog, cette dernière ne pourra pas faire plus de 500 pixels de large !!! Si à l'origine elle faisait plus de 500px, elle sera automatiquement réduite à 500 !!!


Pour regler ce problème il va falloir héberger votre bannière en dehors de Over-Blog (www.archive-host.com par exemple) puis passer en mode "source" dans contenu personnalisé en cliquant sur "Editer la source". Voici le code à y insérer en remplaçant ce qui est écrit en bleu :
<div align="left">
<a href="http://adresse_de_votre_blog">
<img border="none" src="http://adresse_de_votre_banniere" alt="" />
</a>
</div>
 
par ๑۩۞۩๑ [dd] ๑۩۞۩๑ publié dans : Le CSS décortiqué communauté : BLOGS, en parler ...
ajouter un commentaire commentaires (6)    recommander

Qu'est-ce que le CSS ?

Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS.

 

Le principe des feuilles de style consiste à regrouper dans un même document des caractéristiques de mise en forme associées à des groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi possible de créer un groupe de titres en police Arial, de couleur verte et en italique.

 

Les feuilles de style ont été mises au point afin de compenser les manques du langage HTML en ce qui concerne la mise en page et la présentation. En effet, le HTML offre un certain nombre de balises permettant de mettre en page et de définir le style d'un texte, toutefois chaque élément possède son propre style, indépendamment des éléments qui l'entourent. Grâce aux feuilles de style, lorsque la charte graphique d'un site composé de plusieurs centaines de pages web doit être changée, il suffit de modifier la définition des feuilles de style en un seul endroit pour changer l'apparence du site tout entier !

 

Elles sont appellées « feuilles de style en cascade » (en anglais « Cascading Style Sheets ») car il est possible d'en définir plusieurs et que les styles peuvent être hérités en cascade.

 

Les feuilles de style permettent notamment :

  • d'obtenir une présentation homogène sur tout un site en faisant appel sur toutes les pages à une même définition de style ;
  • de permettre le changement de l'aspect d'un site complet entier par la seule modification de quelques lignes ;
  • une plus grande lisibilité du HTML, car les styles sont définis à part ;
  • des chargements de page plus rapides, pour les mêmes raisons que précédemment ;
  • un positionnement plus rigoureux des éléments.

CSS 2.0

Depuis le 12 mai 1998, la norme CSS 2.0 est le standard en vigueur. La norme CSS2 apporte un grand nombre de nouvelles fonctionnalités par rapport à la précédente norme (1.0), parmi lesquelles :

  • La prise en compte de la diversité de médias (écran, imprimante, braille, synthétiseur vocal, etc.) ;
  • L'ajout de propriétés auditives pour les aveugles et malvoyants ;
  • La manipulation de curseurs ;
  • La gestion des débordements et de la visibilité des éléments.

La compatibilité des navigateurs 

Malgré l'existence de recommandations du W3C, les feuilles de style ne sont pas reconnues de la même façon par tous les navigateurs. Le premier navigateur à avoir intégré les feuilles de style est Microsoft Internet Explorer 3.0, puis l'utilisation des feuilles de style s'est généralisée avec les versions 4.0 et supérieures d'Internet Explorer et de Netscape Navigator.

 

Navigateurs supportant les feuilles de style :

  • Microsoft Internet Explorer 3.0 (partiellement)
  • Microsoft Internet Explorer 4.x
  • Microsoft Internet Explorer 5.x
  • Microsoft Internet Explorer 6.x
  • Netscape Navigator 4.x
  • Netscape Navigator 6.x
  • Netscape Navigator 7.x
  • Mozilla x.x
  • Firefox x.x
  • Opera 5.x
  • Opera 6.x
  • Opera 7.x
  • Camino 0.8x
  • Safari 1.xx

 

 
 
Article venant de CommentCaMarche.net 
par ๑۩۞۩๑ [dd] ๑۩۞۩๑ publié dans : Le CSS décortiqué
ajouter un commentaire commentaires (1)    recommander

Mettre un fond d'écran

Pour mettre un fond d'écran sur son blog, il faut éditer le CSS.
Pour cela, aller dans Design-> Mode Avancé.


1. Importez votre image dans vos fichiers

2. Allez dans l'onglet Mes fichiers, puis cliquez sur Images.

3. Cliquez sur la loupe pour afficher l'image en grand.

3bis. Faites un clic droit (contrôle-clic sous Mac) sur votre image, allez dans Propriétés, et notez l'adresse URL de votre photo.
Exemple : http://www.over-blog.com/4/3/1234/pics/monimage.jpg

 4. Allez dans l'onglet Design, puis sur Modifier le CSS.

5. Dans la première ligne de votre CSS, (qui commence par body), repérez l'attribut background.

6. Remplacez tout le texte commençant par background et finissant au premier point-virgule par background-image : url(collez_l'URL_de_votre_image_ici) ;

7. Vous obtiendrez donc par exemple :
body { margin: 0px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: x-small; color: #00000;
background-image: url(http://www.over-blog.com/4/3/1234/pics/maphoto.jpg); }

8. Enregistrez votre fichier CSS en cliquant sur Enregistrer.


Vous pouvez également héberger votre image en dehors d'Over-Blog et récupérer le lien !
Article provenant de OverFAQ (en lien en bas à droite)
par ๑۩۞۩๑ [dd] ๑۩۞۩๑ publié dans : Le CSS décortiqué communauté : BLOGS, en parler ...
ajouter un commentaire commentaires (11)    recommander

Présentation

  • : ๑۩۞۩๑ [dd] ๑۩۞۩๑ DESIGN - Bannières, aide CSS, design
  • dd-design
  • : Besoin d'un bannière vierge ou sur mesure? Besoin d'aide pour la mise en page de votre blog? Ou d'infos complémentaires sur le CSS?
  • Recommander ce blog
  • Retour à la page d'accueil

 

Catégories

 

Mes créas de blog

 

Contactez moi !

 

Liens


boutonForum.gif
Et voila 2 excellents liens pour piocher idées et fonds et images pour ton blog :
top-logo-1.jpg

Deux sites consacrés à la mise en page des MySpaces mais aussi interessants pour un blog !!!


La FAQ de Over-Blog, pour toutes vos questions sans réponses :
banniereFAQ.gif

 

Rechercher

 

Blog : Famille sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus