Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

10 février 2009 2 10 /02 /février /2009 14:22

Il y a déjà un article sur ce blog qui explique comment insérer une bannière dans over-blog.

il y a aussi un article qui explique comment se débarrasser d'une bannière incluse dans le css de base.

Maintenant nous allons voir comment positionner une bannière et lui donner la taille qu'on désire.

 

 

Pour faire ce qu'on veut de sa bannière, une fois toutes les étapes de cet article suivies à la lettre : Placer une bannière à l'entête de son blog (Over-Blog)

 

 

Une fois le marteau cliqué, évitez surtout de choisir l'option « bannière graphique », parce que vous aurez du mal à faire d'elle ce que vous voulez. Choisissez plutôt « contenu personnalisé » vous insèrerez l'image par son adresse.

                                                    

 

Cliquez ensuite sur le bouton « html » et écrivez un code html comme ceci :

 

<img width="800" src="http://www.adressedelabanniere.jpg" height="100">

 

Modifiez tout ce qu'il faut :

Width : c'est la largeur de votre bannière.

Height : c'est la hauteur de votre bannière

Et entre les guillemets c'est l'url de votre bannière

 

 

 

Ensuite, il suffit d'indiquer à l'image le bon ordre : centrée, ou alignée à droite, ou alignée à gauche.

 

Centrée : il suffit d'ajouter <center> au début du code et terminer par </center>

<center><img width="800" src="http://www.adressedelabanniere.jpg" height="100"></center>

 

Alignée à gauche : il suffit d'ajouter <left> au début du code et terminer par </left>

<left><img width="800" src="http://www.adressedelabanniere.jpg" height="100"></left>

 

Alignée à droite : il suffit d'ajouter <right> au début du code et terminer par </right>

<right><img width="800" src="http://www.adressedelabanniere.jpg" height="100"></right>

 

 



 

Comment faire lorsqu'un blog est élastique et qu'on desire que sa bannière fasse toute la largeur ??

Comme expliqué dans l'article : rendre son blog élastique, il suffit de donner la valeur de la largeur en pourcentages.

<img width="100%" src="http://www.adressedelabanniere.jpg" height="30%">

 

A vous de jouer !

 

 

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

chroniquesautourdesens.over-blog.org 10/02/2010 13:02


Bonjour Christelle,
merci pour votre aide..
j'ai essayé,à plusieurs reprises, ca donne rien....
je vais m'y remettre plus tard.....merci encore.
cordialement.


Christelle Vinsonneau 10/02/2010 15:26


parce que ce css a une marge imposée.
Mais il suffit de coller
#top {padding:0px;}

tout en bas des feuilles css !

(ou diminuer la largeur de ta bannière pour qu'elle s'insère entre les marges)


Tafgagt n' Tumert-Boukhara 05/02/2010 15:30


Bonjour Christelle,
J'aimerais savoir si vous pouviez m'expliquer la cause de mon problème, je n'arrive pas insérer la bannaière car elle était à 258 ko et il est impossible de depasser 100ko sur overblog..
j'ai finalementréglé ce souci en diminuant (à contre coeur) la taille en 1250x220 au lieu de 1250x250 gif...
Seulement, le souci qui se pose maintenant c'est une bannière à laquelle manque ûne partie droite...ca fait très moche, c'etait bien plus simple sur canalblog...
j'ai suivi vos explications, mais impossible de la centrer ou autre...je laisse le blog comme ça en pause, si vous y faites un tour pourriez-vous me donner quelques tuyaus svp?
merci par avance.


Christelle Vinsonneau 05/02/2010 15:37



pour commencer, il suffit d'héberger la bannière ailleurs... genre Hiboox...


Ensuite il faut lui indiquer en mode source (en html) une largeur en pourcentage, soit dans ce cas :





 


Pour plus de détails : http://photo.graph.over-blog.com/article-27772373.html



Olivier C 31/01/2010 13:03


Pardon je n'avais pas vu : vous avez déjà répondu pour la quesiton sur l'hébergement. Merci pour tout et bien à vous.


Olivier C 31/01/2010 12:59


Bonjours Christelle,

Oui c'est vrai, j'aurais pu le préciser. J'ajoute que le .png à l'avantage de s'afficher de manière progressive sur le web alors que le .jpg demande à être entièrement chargé pour être aperçut (et
en attendant le visiteur du site à droit à un beau "carré" noir ou transparent, ce qui n'est pas top).

Personnelement je fabrique mes images en transparence et je les enregistes en .jpg avec la couleur de mon fond final (blanc pour mes articles, gris pour mes modules, etc)

Encore merci pour les informations de votre blog, j'en ai largement profité !

Bien à vous. Olivier C

___
PS : ailleurs sur votre blog j'ai posté une question à votre attention à propos des hébergeurs d'images, si vous voulez bien aller voir...


Olivier C 23/01/2010 13:34


Finalement j'ai chargé ma bannière en JPG pour 2 raisons :

Elle respecte assez bien les couleurs du prototype d'origine (élaboré sur The Gimp) alors que le PNG a tendance à être beaucoup trop contrasté.

Bien entendu il suffirait de rééquilibrer l'image par la balance des couleurs, mais entre ici en jeux le deuxième avantage du JPG : celui-ci s'est avéré presque 7 fois moins lourd pour la même
photos ! (36ko en JPG au lieu de 244 ko en PNG). Alors je me suis dit que pour le chargement de l'affichage du blog...

Mais même dans ce cas votre article reste très intéressant car l'option "contenu personnalisé" permet du coup d'ajouter des modules en plus de la bannière (texte, liens, menu, etc), ce que ne peut
pas faire l'option "bannière graphique" seule.


Encore une fois, merci pour vos tutos, je lis tous vos articles avec intérêt et j'aurai peut-être des questions à vous adresser de temps à autre si vous le voulez bien.

Salutation. Olivier C


Christelle Vinsonneau 31/01/2010 12:05



le png et le jpg ne sont pas les mêmes et n'ont pas les mêmes qualités (ou défauts).


Le png a l'avantage d'apporter la transparence. Les images sont plus légères selon le type d'image (couleurs, taille etc...) et les options demandées que le jpg. Mais si l'image est "basique" pas
de transparence par exemple, le mieux reste le jpg qui peut être enregistrée "allégée". Après c'est une question de choix...