Partager l'article ! Comment positionner une bannière à la bonne taille dans Over-Blog: Il y a déjà un article sur ce blog qui explique comment insérer une ...
Retrouvez ce blog sur http://www.awerpi.fr : des tas de tutoriels pour bloguer sans contraintes, des photos, des actualités...
Photo.Graph
Profil
- Christelle
Catégories
- webdesign (75)
Liens
Recommander
Derniers Commentaires
-
12/02/2010 20:10:28Faire un diaporama sans javascript
-
12/02/2010 19:57:30Comment référencer son blog ou son site internet ?
-
12/02/2010 19:40:58Faire un diaporama sans javascript
-
10/02/2010 18:19:49La couleur, la police, la taille des textes dans les articles (CSS)
-
10/02/2010 13:02:04Comment positionner une bannière à la bonne taille dans Over-Blog
Albums Photos
Syndication
Mardi 10 février 2009
2
10
/02
/Fév
/2009
15: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 !
Commentaires
Soit tu modifies la synatxe déjà présente de margin. Sous cette forme : margin Xpx Xpx Xpx Xpx ou sous cette forme margin Xpx Xpx ou sous cette forme margin-top Xpx
Je pense que tu devrais ajouter pas loin de 10px... (à vue d'oeil)
Mais ce n'est pas la faute au navigateur : elle est floue partout car ton image est trop petite pour la largeur de ton blog !
Regarde, elle n'est pas plus grande que ça....
Donc forcément, étirée ça enlève la netteté !
La solution : la refaire... et peut-être l'héberger ailleurs que sur Over-Blog qui redimensionne les images.
Tu veux insérer un lien dans un module pour ramener à la page d'accueil de ton blog ?
Alors, il y a deux possibilités :
1- tu mets un modules "liens" qui est disponibles dans l'administration d'over-blog (configurer, mise en page et tu fais un glissé-déposé).
2- tu mets tes liens en html.
Lorsque tu ouvre ton module (en cliquant sur le marteau), tu cliques sur l'icone HTML de ta fenêtre et tu écris un copde de ce genre :
<a href="http://lelien.html">le nom du lien</a>
Au fait : ça à l'air réglé le souci de ta bannière? ;-)
Demain je ferai un article pour te proposer une solution.
je viens juste d'ouvrir mon site avec over-blog il y a 3 jours et je voulais donc par vos indications mettre une bannière qui soit plus complète j'ai naturellement trifouiller dans le css pour modifier et ne peux plus mettre pas se moyen ma bannière j'ai essayé par le header du css en exportant ma bannière et donc ajouter url mais point fi cela ne fonctionne pas...
Ensuite j'ai un autre souci c'est avec la boîte mail qui n'est pas la bonne... la bonne c'est celle qui est juste là sous vos yeux... Alors si vous avez envie de me donner une petite aide bien sûr avant de vous demander cela j'ai lu le manuel mais c'est vrai que tout ne peut pas se connecter en même temps cela serait trop facile....dans ma tête même si elle est ronde....
Egalement une petite explication pour le référencement...
Bon je sais j'exagère de vous demander tout cela...
Vous verrez ce que vous souhaitez me faire savoir...
Je vous souhaite une BONNE ET HEUREUSE ANNEE 2010... de l'amour de l'argent de la santé des amis (e) et tout ce que vous souhaitez pour vous et les vôtres au plaisir d'avoir une gentille réponse....
Bien amicalement....
Je pense que tu y es arrivé, sinon je n'ai pas compris la question.
Grâce à vous j'ai enfin réussi à dépasser la limite des 100ko pour les bannières sous over-blog, ce qui m'a permis de la charger en .png, et c'est nettement plus joli qu'en .gif !
Votre blog est une mine d'or.
Salutation. Olivier C
tant mieux !
Bonne continuation !
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
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...
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...
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.
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 :
<img width="100%" src="http://iurldelimage.jpg" class="CtreTexte" />
Pour plus de détails : http://photo.graph.over-blog.com/article-27772373.html
merci pour votre aide..
j'ai essayé,à plusieurs reprises, ca donne rien....
je vais m'y remettre plus tard.....merci encore.
cordialement.
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)