« Mon blog est bloqué par un mot de passe ! | Page d'accueil | Un moteur de recherche pour votre blog »
14/01/2005
Des blogs 100% pour tous !
Les blogs de Blogspirit et Haut et Fort sont configurés par défaut sur une résolution minimum de 800*600. Pourquoi ? Parceque vous êtes 1/4 à posséder de telles résolutions. Et il parait normal que vous, blogueurs, ne souhaitiez pas vous priver de 25% de votre audience.
L'inconvénient, c'est bien sur la taille de votre espace de contenu. Pour ma part elle me va très bien, mais il est vrai qu'un peu plus d'espace pour ses notes ne fera de mal à personne !
Vous trouverez sur la faq un moyen de configurer son blog en 1024*768, le problème c'est que 1/4 de visiteurs ne verront pas votre blog sous son meilleur angle.
Exemple avec un blog redesigné en 1024 vu avec une résolution 800*600 :
Blog pris totalement au hasard, Merci à l'auteur de ne pas trop m'en vouloir...
Ce que "Bouge ton blog" vous propose :
un blog 100% qui aura le même rendu avec toutes les résolutions : votre colonne pour les notes est élastique et s'adapte à la résolution de votre visiteur. Essayez de réduire/agrandir votre fenêtre, vous verrez que Bouge ton blog est élastique, la taille de la colonne du milieu n'est pas fixe mais automatique !
Maintenant les modifs ! Uniquement du CSS pas de HTML...
Avant de commencer il faut choisir le design 1 ou le design 2 dans "Présentation"->"Modèles". Et oui c'est la mauvaise nouvelle les modes 1024 et 100% ne sont disponibles qu'avec ces 2 designs :
Il vous faut donc aller dans "Présentation" -> "Configuration avancée" puis éditer le fichier "Feuille de styles".
Seuls sont notés les styles qui changent, les modifications sont écrites en gras pour que vous vous y retrouviez facilement! (copiez donc uniquement le code en gras, les codes couleurs -#fff, #aa0066 etc...- peuvent changer d'un design à l'autre)
...
#container {
width: auto;
border: 1px solid #cc6600;
line-height: 140%;
margin-right: 17px;
margin-left: 17px;
text-align: left;
background-color: #fff;
}
#left {
overflow: hidden;
float: none;
width: 180px;
background-color: #fff;
margin-left: 18px;
left: 0px;
top: 120px;
position: absolute;
}
#right {
overflow: hidden;
float: none;
width: 180px;
background-color: #fff;
margin-right: 18px;
right: 0px;
top: 120px;
position: absolute;
}
#center {
overflow: hidden;
float: none;
width: auto;
background-color: #fff;
margin-right: 163px;
margin-left: 181px;
}
...
.content {
float: none;
overflow: visible;
padding: 20px 15px 8px 5px;
width: auto;
font-size: 70%;
line-height: 150%;
}
Voilà vous avez un blog 100% qui non seulement peut être vu de façon égale pour tous vos visiteurs mais qui vous permet d'avoir plus d'espace pour écrire vos notes!
NB :
Présentation testée sous :
Win : IE 5.01 IE 5.5 IE 6 Firefox / Mozilla 1.7 Opera 7.3
Mac : IE 5.1 Mozilla 1.3
Merci aux utilisateurs de Mac OS X de me confirmer si cette présentation est constante sur Safari voir Mozilla ou IE 5.23
11:15 Ecrit par blogSpirit Team dans Astuces, Blog, Blogspirit, Haut et Fort | Lien permanent | Commentaires (45) | Envoyer cette note | Tags : Blog
Commentaires
Marrant, ça tombe bien, je suis en train de refaire le look de blogapart et j'utilise justement une des ces maquettes. Quand je fais des sites (c'est un peu mon boulot), j'essaye toujours de les faire élastiques. Donc super ton idée.
Et je viens de vérifier sur Mac OSX en FireFox et en Safari, ça passe bien. Allez, je relance le vieil IE5.23 pour te faire plaisir... et oui, ça passe aussi.
Ecrit par : G Mike | 14/01/2005
Zut, y'a un blème seulement en Safari.
En effet, le centre bouffe un peu la colonne de droite... les premiers caractères sont cachés.
Nounours devient ounours...
Ecrit par : G MIKE | 14/01/2005
Merci !!
Je me tiens à ta disposition si tu veux des détails sur nos feuilles de style.
Thomas
Ecrit par : thomas | 14/01/2005
Super ! merci pour le truc qui manquait effectivement
Ecrit par : USee | 14/01/2005
A quand un tuto pour le RSS ? J'ai des pb avec ce truc !! Grrrr !
Merci pour les astuces, ça aide bien !
Ecrit par : Legweak | 18/01/2005
D'accord, mais que se passe-t-il au niveau de la banière, s'il s'agit d'une image ? Ca ne fera pas des parties grises ?
Ecrit par : Lele | 15/02/2005
je me permets de plussoyer a la question de lele :)
faut il insérer l'image au dessus du code du container ? ( pour avoir le container en 100% et la bannière au dessus , qui , elle , centrée , ne bougerait pas ? )
ou alors peut-on inserer la bannière comme a l'habitude sans que ça genère de problemes ( en imaginant bien sur qu'on fait une " petite " bannière , qui correspondrait a une intégration sur la plus petite résolution , avec des marges intégrées au background de chaque coté pour le cas ou le background s'agrandit ? )
bref , je veux bien une tite explication ... merci d'avance :)
Ecrit par : krysalia | 10/05/2005
A l'aide ! J'ai tout fait (ou cru tout faire) comme expliqué, mais sur mon petit 800x600, le bandeau titre est bouffé par les deux colones. Que puis-je faire ?
Ecrit par : croustine | 10/05/2005
krysalia -> Je n'ai pas fait d'essais, mais je dirais qu'il faut une banière taillée pour du 800 * 600 (voir ma note à ce sujet) puis indiquer une couleur de background cohérente avec l'image pour que le navigateur remplisse l'espace manquant en 1024 ou +. Il faut veiller également à caler la banière en haut à gauche (0% 0%), c'est la partie de droite qui sera "élastique". => Le code est donc le même.
croustine -> Pas de panique, ta banière prends de la place il faut donc redescendre tes 2 colonnes #left et #right avec la propriété suivante : "top: 180px;"
Ecrit par : thomas | 11/05/2005
Merci ! en fait, 200 px ont été nécessaires, mais maintenant c'est super ;-)
Ecrit par : croustine | 11/05/2005
chouette , je m'y mets :)
rholala i va être drolement bien mon blog grace a toi :)
Ecrit par : krysalia | 11/05/2005
Super. Juste j'ai du mettre top: 150px; au lieu de 120 dans left et right, sinon, la description du blog était cachée par les colonnes.
Merci !
Ecrit par : Francis | 28/05/2005
Bonjour Thomas,
L'ajustement des colonnes, c'est vraiment un truc génial, mais c'est dommage que l'élasticité ne se retrouve pas dans la bannière. Bien sur tu as répondu a krysalia avec l'option de faire une bannière pour une résolution en 800X600 et un background cohérent, mais du coup pour une résolution en 1024 on se retrouve avec un grand espace vide a gauche de la bannière.
Je trouve que du coup le graphisme n'est plus homogène et on perd la structure decker du blog.
L'idéal serait que non seulement le blog soit vu de façon égale pour tous les visiteurs mais que la bannière soit vue de la même manière. Qu'en pensez vous?
Ecrit par : Loïc | 17/06/2005
Oups pardon, je voulais dire un grand espace a droite de la bannière! Evidemment!
Ecrit par : Loïc | 17/06/2005
Loic -> As-tu essayé un "text-align: center;" dans les différents styles de la banière ? Ca devrait résoudre en partie ton problème...
Ecrit par : thomas | 18/06/2005
Super, ça marche du premier coup (j'aurais pu oublier une ; ). C'est vrai que cela faisait mesquin toute cette place inutilisée ! Toutefois, et c'est histoire de mettre 19/20 au lieu de 18/20 :
- On a a un décrochage en haut des colonnes (la colonne centrale est un peu plus basse que que les latérales)
- la largeur totale des colonnes fait que j'ai un décalage sur la droite de l'écran (alors qu'à gauche c'est aligné avec les bannières).
Quelles lignes devrais je modifier pour avoir cet alignement ?
Merci
Ecrit par : François | 24/08/2005
Erreur de copier/coller simplement pour la deuxième question. Nickel
:-)
Ecrit par : François | 24/08/2005
Bonjour, je suis en plein relookage de mon ptit blog, est le formatage en 100% marche plutôt bien.
En revanche, j'aimerais que les 2 menus noirs continuent jusqu'au bout de la zone de texte (blanche) . Est ce que cela est possible ?
2ème question : comment puis-je élargir un peu ma colonne de menu de gauche pour que ma radioblog soit lisible ?
C'est certainement pas ici qu'il fallait que je poste, mais je n'ai trouvé aucun sujet approprié. désolée !
Ecrit par : sidhe | 02/09/2005
Salut!
juste pour dire que j'ai essayé à ta manière et que ça n'a pas du tout marché pour mon blog... heureusement que je débrouille un peu sinon je ne sais pas ce que j'aurais fait.. :S
Maintenant ça va mais j'ai un problème avec ma bannière.. enfin... comme je vois pas comment résoudre le problème je laisse comme ça, de toute façon c'est pas trop grave hum...
Ecrit par : Jove | 14/09/2005
non tout compte fait... j'abandonne...
Ecrit par : Jove | 14/09/2005
mais ce que je veux bien savoir c'est comment changer la taille de l'image "a propos" qu'on trouve sur les colonnes...
Ecrit par : Jove | 14/09/2005
merci!!!!!
Ecrit par : nie | 17/10/2005
Jove -> Je vois que as résolu ton problème, ton blog a une belle allure comme ça ! Concernant l'image A propos, elle n'est pas redimensionnable afin de ne pas casser la mise en page avec des photos trop larges ou trop longues.
sidhe -> il faut que tu définisses une largeur + grande pour ta colonne #left exemple : 250px.
Ecrit par : Admin BS | 17/10/2005
Salut j'ai un probleme avec ma colonne de droite je vouis laisse voir car je vois pas trop comment expliquer bref comment puis-je y remedier ?
http://ookami.blogspirit.com
Ecrit par : Ookami | 17/10/2005
en suivant vos indications je ne parvient à rendre élastique mon blog... les blocs des collones de droite te gauche se mettent dans les parties noir, mais la collone central ne bouge pas!...
ensuite j'y arrive mais au niveau des couleur sa colle plus...
Ecrit par : chaaarabia | 17/10/2005
Pour mon probleme j'ai réussi à le regler toute seule
@+
Ecrit par : Ookami | 17/10/2005
A quand une élasticité possible pour les autres designs ?
Ecrit par : mexen | 27/10/2005
Bonjour
super ton log
Je voulais une explication, comment faire pour mettre un texte en couleur je n'ai pas trouvé.
Si tu pouvais m'expliquer je voudrais bien essayer
Merci
Josette
Ecrit par : josette | 31/10/2005
Bonjour, j'ai commencé mon blog il y a 3 jours seulement, je suis absolument une néophyte et je ne connais pas du tout la programmation html !.tout au plus puis-je de temps en temps me débrouiller par mimétisme... mais comme je suis curieuse, j'espère m'améliorer !!!
J'ai donc modifié le code comme indiqué dans cette rubrique, mais je me suis retrouvée avec les colonnes de droite et de gauche toutes les deux à gauche, l'une empiettant sur l'autre !!! comment corriger ça?
D'autre part j'ai admiré le blog de Krysalia, comment met-on une photo dans le bandeau (est-ce cela que l'on appelle "banière" ?)
merci de votre aide
Dominique
Ecrit par : Dominique | 03/12/2005
Bonjour,
je voudrai insérer une video via sur mon blog, comment faire??
je te remercie d'avance...
nicolas
Ecrit par : Nicolas | 07/12/2005
Salut,
on est plusieurs à gérer notre blog, et je voulais savoir s'il était possible. que tout le monde soit au courant quand un nouveau commentaire à été ajouté.
Pour l'instant je suis le seul à recevoir le message.
J'espère que quelqu'un pourra m'éclairer sur ce sujet.
Bonne journée :-)
Ecrit par : florent | 11/12/2005
Ca y est j'ai trouvé :
LA REPONSE EST DANS LA FAQ DE BLOG SPIRIT : http://faq.blogspirit.com/notes/
Pour publier vos notes par email, veuillez suivre les étapes ci-dessous :
Allez dans la section « Email » de la rubrique « Tableau de bord ».
Saisissez un code secret dans le champs Adresse email de publication. Lorsque vous publierez une note par email, cette adresse sera l'adresse de destination (Champ A de votre email). Votre adresse email de publication est de la forme : [nom-de-votre-blog].[code-secret]@blogspirit.com.
Saisissez ensuite les adresses email des auteurs autorisés à publier des notes par email sur votre blog. Saisissez simplement les adresses email des expéditeurs autorisés.
Enfin, sélectionner un mode de publication par défaut pour toute note que vous publierez par mail. Vous avez le choix entre un brouillon (votre note n'apparaît pas sur votre blog, il vous faudra aller sur le site d'administration pour la publier) et une publication immédiate.
Cliquez sur le bouton Enregistrer ces informations pour sauvegarder vos préférences.
Ca peut toujours aider les gens qui ont eu le même problème que moi :-)
Ecrit par : florent | 12/12/2005
help...
premièrement, je suis une buse.
Cà, soit, mais c'est juste histoire de dire.
Bon, maintenant que çà c'est fait, pourrais-tu aller jeter un coup d'oeil sur le site sus nommé (je le remets là, histoire de t'épargner des recherches fastidieuses: http://cemondeestdouble.hautetfort.com/).
Mon souci, peu important, faut bien l'avouer, est le suivant.
Comme tu peux le constater, n'est pas que j'ai désormais assez de place pour écrire, mes notes sont désormais correctement positionnées, non, le souci c'est putôt qu'elles débordent du cadre blanc qui leur est attribué, et malgré mes recherches et mes vaines tentatives de "modification/vérification/corrections", je n'ai toujours pas trouvé la ligne de code qui me permettrait de redéfinir les cadres au texte... Bref, un truc pour que ce soit plus joli.
Il se peut que je n'ai pas parcouru suffisament bien les lignes la FAQ, et que la solution soit tout e simple, ou alors vraiment impossible, ou alors le constat que je suis une buse se vérifie peut-être pleinement, mais là, j'ai moyen des idées...
Un peu d'aide peut-être?
Ecrit par : tyler | 11/01/2006
Hello Thomas
Tes explications pour le blog à 100% sont extras - méthodiquement et avec exactitude j'ai suivi toutes tes instructions sauf que ma colonne de droite vient embrasser celle de gauche et que mon premier texte se retrouve plongé bien en dessous de mes colonnes - késako ??
Pour ton information, je suis parfaitement nulle en informatique et j'espère que tu feras preuve d'indulgence face à mon incompétence.
Bien à toi
Ln
Ecrit par : Ln | 17/01/2006
Le blog 100% ca me botte bien, moi.
j'ai suivi les conseils, et modifié la taille de la colonne de droite (top 180px). chez moi, elle passe, à 92px. c'est pas bizzarre ?
d'autre part, sur certains navigateurs, il semblerait que la colonne de droite soit bouffée par la partie centrale. C'est propre à Safari ?
Du coup j'hésite...il faut aussi que je m'occupe de la bannière. c'est pas la technique, qui me manque, mais l'inspiration pour la créa.
dernier souci que j'ai, je n'arrive pas, après 40 essais, à insérer de podcast dans mes colonnes. j'ai le bon code, les bons fichiers, les bonnes adresses, le lecteur s'affiche, mais rien ne se passe. Je ne vois pas ce qui cloche. en dernier recours, je poste ici, en espoir d'une bonne âme.
merci pour les conseils, en tout cas.
Ecrit par : Pangloss | 01/03/2006
Finalement, je pige a peu pres le truc. Pour elargir ses colonnes vers les côtés (sans que cela vienne empiéter sur la zone centrale) c'est quelle propriété qu'il faut modifier. J'avoue que j'apprends en tatonnant a gauche a doite. petit à petit, ca rentre, lol.
plein d'idees et de reponses interessantes par ici. merci !
Ecrit par : Pangloss | 02/03/2006
moi j'ai un probleme de résolution, pas de présentation de blog, mais d'image: quand je veux insérer une image dans une note, par exemple une image d'1.5mo, et que je coche "afficher en grand dans une nouvelle fenetre", mon image s'affiche bien dans une nouvelle fenetre mais la taille à l'écran est ridicule. puis je définir les dimentions ?
au moins l'agrandir ?
Ecrit par : tom | 02/03/2006
a savoir que j'utilise des images de 3000* 2000...
Ecrit par : tom | 02/03/2006
Super cette astuce, sauf que j'utilise depuis quelques temps le modèle 5 auquel je suis attéché.
Puis-je espérer un jour appliquer la "bidouille également à ce modèle" ou cela ne sera jamais possible ?
Merci pour la réponse ;-)
Ecrit par : Maxence | 22/03/2006
Grand merci ! J'ai commencé à modifier la feuille de style et grâce à toi, mon blog est adapté à tous les écrans. Sur le mien, le blog me parait maintenant presque trop large ! La BDD de hautefort n'est pas géniale. Ton blog va m'être très utile.
Ecrit par : Dolgo | 15/11/2006
he c'est la merde, ton truc!
ça veut pas marcher
ça me coupe mes images alors comment faire pour améliorer ou pour annuler ce truc?
mais merci quand même j'ai utilisé de tes "trucs" qui ont bien marché, c'est sympa d'aider les nulos comme moi!
Ecrit par : paul | 24/03/2007
en fait ça marche que sur explorer ce truc j'ai l'impression
Ecrit par : paul | 24/03/2007
Bonjour tes indications fonctionnent à merveille!
mais je me retrouve avec la pub expédia en plein milieu de ma note....
comment faire.
merci d'avance
Ecrit par : cathycat66 | 13/08/2007
Bonsoir,
merci pour ce blog !
J'ai vraiment besoin de votre aide : je suis en train de créer un blog dans hautetfort. Je souhaiterais insérer une video (que j'ai hébergée sur dailymotion) dans la colonne de droite ou de gauche de hautetfort.
J'ai vu cela sur ce blog, je suis tombée dessus par hasard, depuis j'essaye de trouver comment faire mais sans résultat http://syrinepourle18eme.hautetfort.com/about.html
Merci pour votre aide !
Ecrit par : Marie | 06/02/2008
Bonjour,
A l'aideeeeeeeeeeee
J'aimerais savoir si il est possible d'aggrandir la colonne de droite ou de gauche pour pouvoir inserer une bannière ?
merci de votre aide
Ecrit par : Minerva | 07/02/2008
Les commentaires sont fermés.