Communication
Plusieurs moyens pour obtenir un coup de main de ma part :
|
Ajoutez un commentaire dans l'article qui vous intéresse.
|
 Powered By Hab.la |
Vous ne voulez pas des deux bandes verticales qui sont de chaques côtés de votre blog (comme le mien) mais vous voulez que votre blog couvre toute la surface de l'écran du lecteur ?
OK ! Faisons ça.
Il vous faut tout d'abord personnaliser votre css, puisque c'est lui qui gère l'apparence de votre blog.
Pour cela, je vous propose de lire cet article.
Pour les personnes qui ont personnalisé le thème d'Over-Blog, il faut bien lire jusqu'au bout afin d'aller sur l'article de Cln qui permet de récupérer le css de sa personnalisation du thème.
Dans votre css, vous allez trouver ces lignes (exemple du modèle Japan à trois colonnes) :
body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 950px;}
.ln {clear:both;}
.cl {float:left;}
/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:180px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1 {margin:0 10px 0 10px; width:440px; padding:5px;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}
Faisons une lecture de certaines lignes.
#global {padding: 0px; margin: 0px auto; width: 950px;}
La largeur utile de votre blog fait 950 pixels de large, les marges sont soit nulles, soit automatiques pour que le blog soit centré.
#cl_1_0 {margin:0; width:180px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1 {margin:0 10px 0 10px; width:440px; padding:5px;}
La première colonne n'a pas de marge et une largeur de 180 pixels.
La troisième colonne (ligne non présente si vous n'avez que deux colonnes) n'a pas de marge et une largeur de 300 pixels.
La seconde colonne a des marges variées et une largeur de 440 pixels.
Petit calcul : 180px + 300px + 440px + (2x5px) = 930px
(colonne 1 + colonne 3 + colonne 2 + marges droite et gauche de la colonne 2 =< largeur utile)
C'est inférieur ou égal à 950 donc toutes les colonnes logent en largeur.
C'est sur ces lignes qu'il faut agir.
Il faut transformer une largeur fixe en largeur variable pour qu'elle s'adapte à tous les écrans de tous les visiteurs.
La solution la plus simple est de tout transformer en pourcentages.
Je reprends le même exemple transformé :
body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 100%;}
.ln {clear:both;}
.cl {float:left;}
/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:18%;}
#cl_1_2 {margin:0; width:18%;}
#cl_1_1 {margin:0 1% 0 1%; width:60%; padding:1%;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}
Je refais le petit calcul :
18% + 18% + 60% + (2x1%) = 100%
Le compte est bon.
Vous pouvez choisir d'autres nombres, bien sûr, le but du jeux est d'arriver à 100% au plus.
Vous pouvez aussi mélanger les pourcentages et les pixels pour conserver une largeur de 300 pixels à une colonne contenant de la pub.
Merci à Bakémono dont j'ai repris l'essence de l'article et les images.
OK ! Faisons ça.
Il vous faut tout d'abord personnaliser votre css, puisque c'est lui qui gère l'apparence de votre blog.
Pour cela, je vous propose de lire cet article.
Pour les personnes qui ont personnalisé le thème d'Over-Blog, il faut bien lire jusqu'au bout afin d'aller sur l'article de Cln qui permet de récupérer le css de sa personnalisation du thème.
Dans votre css, vous allez trouver ces lignes (exemple du modèle Japan à trois colonnes) :
body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 950px;}
.ln {clear:both;}
.cl {float:left;}
/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:180px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1 {margin:0 10px 0 10px; width:440px; padding:5px;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}
Faisons une lecture de certaines lignes.
#global {padding: 0px; margin: 0px auto; width: 950px;}
La largeur utile de votre blog fait 950 pixels de large, les marges sont soit nulles, soit automatiques pour que le blog soit centré.
#cl_1_0 {margin:0; width:180px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1 {margin:0 10px 0 10px; width:440px; padding:5px;}
La première colonne n'a pas de marge et une largeur de 180 pixels.
La troisième colonne (ligne non présente si vous n'avez que deux colonnes) n'a pas de marge et une largeur de 300 pixels.
La seconde colonne a des marges variées et une largeur de 440 pixels.
Petit calcul : 180px + 300px + 440px + (2x5px) = 930px
(colonne 1 + colonne 3 + colonne 2 + marges droite et gauche de la colonne 2 =< largeur utile)
C'est inférieur ou égal à 950 donc toutes les colonnes logent en largeur.
C'est sur ces lignes qu'il faut agir.
Il faut transformer une largeur fixe en largeur variable pour qu'elle s'adapte à tous les écrans de tous les visiteurs.
La solution la plus simple est de tout transformer en pourcentages.
Je reprends le même exemple transformé :
body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 100%;}
.ln {clear:both;}
.cl {float:left;}
/* modele */
#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}
#cl_1_0 {margin:0; width:18%;}
#cl_1_2 {margin:0; width:18%;}
#cl_1_1 {margin:0 1% 0 1%; width:60%; padding:1%;}
#cl_2_0 {width:100%; margin:15px 0 0 0;}
.box {width:100%; overflow:hidden;}
Je refais le petit calcul :
18% + 18% + 60% + (2x1%) = 100%
Le compte est bon.
Vous pouvez choisir d'autres nombres, bien sûr, le but du jeux est d'arriver à 100% au plus.
Vous pouvez aussi mélanger les pourcentages et les pixels pour conserver une largeur de 300 pixels à une colonne contenant de la pub.
Merci à Bakémono dont j'ai repris l'essence de l'article et les images.
Commentaires
overblog
Présentation
- : Le blog des Brigades
- Partager ce blog
Derniers Commentaires
-
27/05/2012 18:28:39Comment modifier son css Over-Blog ?
-
13/05/2012 16:28:55Insérer un lecteur mp3, un diaporama, une vidéo de façon autonome
-
06/05/2012 15:22:43Insérer une horloge
-
02/05/2012 21:27:56Insérer un lecteur mp3, un diaporama, une vidéo de façon autonome
-
26/04/2012 16:24:11Insérer un lecteur mp3, un diaporama, une vidéo de façon autonome
Références
Aides inserts
Communautés
Autres Blogs
Texte Libre
C'est ainsi pour les fenêtres de navigateurs inférieures à 970 pixels.
si tout était en % ça ne poserais pas de problème, mais la pub t'impose un minimum de 300 pixels.
merci beaucoup de cette astuce =)
cependant je n'arrive pas à trouver comment centrer le bloc de l'article car celui-ci se met toujours à gauche ou à droite (suivant si je met float: left ou float: right )
mais si j'écris float: center, cela ne change rien
j'espère que vous pourrez m'aider
En fait, il faut que tu demandes des marges élastiques aussi. J'ai modifié cette ligne de ton css en élargissant la largeur des articles et en mettant deux marges (nulle en haut et en bas et 2% à gauche et à droite) :
#cl_1_1 {margin:0 10px 0 10px; width:50%; padding:0px 2%;}
A toi de faire la modification dans ton css.
nickel merci bien =)
bonjour
besoin de conseils je voudrais agrandir les 2 blogs suivant
http://www.bateaux-fecamp.fr/
http://littoral-manche-atlantique.over-blog.net
en largeur elastique j'ai des problèmes
c'est bizard le 3 eme blog pas de problème j'ai réusi
http://capfagnet.over-blog.com/
Désolé d'avoir tardé, mais effectivement tu as trouvé la solution : recopier ce qui marche dans un blog dans les autres (et des fois adapter) :
#global {width:99%; margin:0 auto;}
#cl_1_0 {width:19%;}
#cl_1_2 {width:19%; float:right;}
#cl_1_1 {width:59%; padding-left:10px;}
Ou alors, je ne comprends pas ton problème.... Si c'est le cas, merci de préciser ce que tu ne parviens pas à obtenir.
merci pour ta réponse et de ton aide
comme j'avais réussi avec le blog capfagnet et que ca fonctionnait pourquoi pas faire de meme avec les 2 autres,
donc plus de problème
par contre on obtient quoi en incérant le texte ci dessous
#global {width:99%; margin:0 auto;}
#cl_1_0 {width:19%;}
#cl_1_2 {width:19%; float:right;}
#cl_1_1 {width:59%; padding-left:10px;}
On obtient ce que tu as à l'écran : trois blogs élastiques.
Je vous remercie beaucoup de votre aide au sujet de mon BG dans mon article d'accueil. Votre code a parfaitement fonctionné.
Je ne connaissais pas votre blog ! il a l'air utile en renseignements pratiques, je le mets dans mes favoris et je ne manquerai pas d'y revenir.
Encore un grand merci et passez une bonne journée.
Sagan33.
I will peting a plomb avant longtemps alors je m'arrête et je demande de l'aide!!!!
Sur canal blog j'avais réussi à rendre mon site "élastique". Mais voilà, là, j'y arrive pas. Seule la partie haute semble prendre en compte mes modifications mais pas les colonnes!!!!
Voici le code, si quelqu'un y voit plus clair que moi ?
body, html {padding: 0px; margin: 0px;}
#global {padding: 0px; margin: 0px auto; width: 100%;}
.ln {clear:both;}
.cl {float:left;}
.clear {clear:both;}
/* modele */
#cl_0_0 {margin:0 0 1% 0; padding:0px; width:100%;}
#cl_1_0{margin:0; width:10%;}
#cl_1_1 {margin:0 1% 0 1%; width:30%;}
#cl_1_2 {margin:0px; width:26%;}
#cl_2_0 {width:100%; margin: 1% 0 0 0;}
.box {width:100%; overflow:hidden;}
????
M.C
Bonjour,
L'inconvénient de partir d'un design très élaboré c'est que le css l'est aussi.
Mieux vaux donc partir d'un design minimaliste.
Dans ton css actuel, la taille des colonnes est indiquée plusieures fois et ce sont les dernières qui sont prises en compte :
#cl_1_0 {
margin: 0;
padding: 0 0 0 0;
width: 40%;
}
#cl_1_1 {
margin: 0;
padding: 0 0 0 0;
width: 35%;
}
#cl_1_2 {
margin: 0;
padding: 0 0 0 0;
width: 20%;
}
/*----------------------------------------------------------------------------*/
/* Variation */
/*----------------------------------------------------------------------------*/
J'ai laissé les dernières lignes comme repère dans le css.
Juste au dessus de ses lignes, il y a :
#ln_1 {margin: 5px
}
#ln_2 {
padding-right: 35%;
width: 65%;
}
J'ai surligné le changement à faire.
On verra ensuite pour le reste.
Je progresse lentement. Franchement je ne comprends pas pourquoi les variables sont déclarées deux fois (déclaration générale et thème)... je trouve cela inutile voire perturbant. Mais bon je suis peut-être de la vieille génération...
Ca c'est le css d'Over-Blog : une partie pour tous les thèmes et une partie pour le thème séléctionné.
Tu peux bien sûr alléger ton css en combinant toutes les lignes du même identifiant comme par exemple ne faire qu'une ligne body qui reprenne toutes les caractéristiques de toutes les lignes body.
Et si une caractèristique apparaît plusieurs fois dans une ligne, c'est la dernière qui est prise en compte, tu peux effacer les doublons précédents.
C'est ce que je suis en train de faire. Je suppose que l'habitude des développeurs d'overblog a forgé cette "façon de faire" et que c'est peut-être même rentable en terme de temps pour eux... mais moins pour l'utilisateur inexpérimenté.
Ils utilisent aussi le module "box" à la place de "page" dans le modèle de base que j'ai choisi... prochaine étape dans ma compréhension.
Je vais dire peut-être une bêtise, mais je n'ai pas trouvé de lexique des termes CSS3 et de leur explication.
Ce que j'ai vu sur internet : des lexiques (Css2 en particulier) fait par des programmeurs expérimentés qui partent de la théorie pour arriver aux différentes syntaxes. Cependant, les autodidactes comme moi, ne fonctionnent pas du tout comme eux.
Nous, on pompe des parties de programmes qu'on essaie de comprendre. Or pour comprendre ces parties de programmes, nous aurions besoins d'un lexique de termes. exemple : background, j'ai compris que c'était le fond, parce que je parle anglais, mais sans cela cela m'aurait été impossible. D'ailleurs je galère toujours pour trouver le sens exact de pleins d'autres termes : w100prct, le "a" ??? (c'est un lien je crois), la présence du point avant les box, article etc..., box em etc...
Y-aurait-il un lexique très simple pour donner une définition en deux trois mots de ces termes et des autres sans devoir dépasser la barrière de la théorie ?????? Termes css pour les nuls en quelque sorte...
M.C
Box concerne bel et bien les modules et page concerne les Pages. il n'y a pas de mélange entre les deux.
Le css est effectivement de l'anglais, la lecture est donc plus aisée pour les anglophones. Mais il n'y a pas de dictionnaires sur Over-Blog.
Puisque tu parles anglais, tu peux utiliser ://jigsaw.w3.org/css-validator/validator pour valider ton css.
a est un lien, a:hover est un lien avec la souris dessus. J'en parle dans un article pour faire des liens.
J'avais un code qui permettait de rendre sa bannière élastique. Qu'elle fasse toute la largeur du blog. C'était en % je crois. C'est pour ma page d'accueil. Mais je n'arrive plus à retrouver cette formule à insérer dans mon texte libre pour la bannière.
Si vous pouviez m'aider, je n'arrive pas à l'agrandir.
Merci par avance pour la réponse.
Cordialement.
Bonjour,
C'est :
#top img {width:100%}
Mais cela ne fait pas de différence car il prends déjà toute la place.
Bonne fin de week end à vous.
A savoir suite à une erreur de manipulation, je suis retournée à la configuration initiale de mon blog.
A l heure actuelle mes articles sont complètement coupés et illisibles.
Je n avais pas eu de manip css à faire, car je ne connais pas et c est bien trop technique pour moi.
les 2 colonnes sur les côtés n'apparaissaient pas initialement et là elles apparaissent...
un conseil ?
Bonjour,
Je pense que tu as trouvé une solution car je vois bien les articles entiers et une seule colonne de modules.
Pour les autres qui liraient cette réponse : il faut aller dans >Configurer >Mise en page >en bas de la colonne de gauche il y a un petit shéma blanc représentant le blog, il faut cliquer dessus pour choisir la disposition des colonnes.
merci
Je reviens vers toi au sujet de ma bannière. Est-ce que c'est possible qu'elle fasse toute la largeur du blog. Avec une présentation antérieure il me semble y être arrivée. La bannière des articles (liste articles over-blog dans menu) fait bien toute la largeur du blog pourtant j'ai fait un copié-collé mais rien ne change en accueil.
Si tu pouvais m'aider.
Bien à toi.
S.33
Ta bannière fait toute la largeur du blog, mais elle ne fait pas toute la largeur de la fenêtre du navigateur.
Si tu veux cela, il faut passer en blog à largeur élastique, mais uniquement pour l'en-tête. Inconvénient : pour les grands écrans, la bannière sera toute pixèlisée et moche :
#cl_0_0{ margin:0 auto; width:100%;}
Passe une bonne journée. Crdlt. S.33
J'ai bien compris le système pour avoir des colonnes élastiques...cela fonctionne lorsque je transforme en %...
Par contre, lorsque je change en % pour élargir, cela me transforme mon design de gris et noir en bleu océan...et je ne le veux pas !!!
Bien que j'ai un blog gris et noir, dans "design" il me dit que mon thème graphique actuel est "océan" .
Comment élargir les colonnes et garder le noir et gris ?
Merci beaucoup pour votre aide...votre blog est vraiment extra !!!!
Bonjour,
La changement de largeur ne peut en aucun cas influer sur la couleur du blog, sauf à faire une erreur dans le css.
Je vois ton blog avec un fond blanc, seuls les albums ont un fond bleu foncé. Que devrais-je voir ?
En fait, j'ai choisi un design où il n'y a qu'un seul choix de couleur, à contrecoeur...pour ne pas avoir le pb !
En fait lorsque je choisi et sélectionne un design bleu par exemple, je valide, et cela me ne donne pas le design bleu, mais la version violet ou vert. C'est étrange.
J'espère que je m'exprime bien...
C'est normal (je pense avoir compris).
Comme tu as modifié ton css, le design de base que tu choisis est toujours modifié par les éléments de personnalisation du css.
Décoches la personnalisation du css pour revenir au css de base (j'ai sauvegardé ton css actuel) et reéssaye de modifier ton design de base.
J'ai donc choisi mon thème bleu...et cela m'a mis le thème rose !!!
Je ne trouve pas la case à décocher...à quel moment il faut le faire ?
Merci d'avance
Dans >Design >Thèmes définis >Bleu (48), tu cliques sur le design "Exploitable". Un pop-up apparaît et tu clique sur le bouton à droite du design pour avoir le modèle bleu (Exploitable)...
A ce momment là, je te propose de cliquer sur un autre bouton pour voir une autre variation de ce thème puis de revenir au bleu.
... puis tu cliques sur le bouton orange "Sélectionner".
Tu fais bien comme ça ?
Dans "Personnaliser mon thème", je suis bien avec le thème bleu...et lorsque je valide et vais sur mon blog...je suis en thème rose...
Puis je valide le bleu "exploitable"...et j'ai design "light"...
Ca devient un peu agaçant !!!
Merci pour ton aide...
Merci de laisser ainsi, je vais demander de l'aide auprès du staff.
J'ai lu attentivement votre tuto afin de mettre en oeuvre pour mon blog les modifications. Or, n'étant pas un expert, j'avoue ne pas y arriver. Lorsque je souhaite changer un chiffre, je n'y arrive pas ... Lorsque j'appuie sur la touche espace la fenêtre descent. De plus j'ai un message d'erreur "Arrêter l'exécution de ce script ?". Bref je bug, par avance merci de votre aide.
Bonjour,
Mais as tu lu cet article en premier ?
http://ledenistest.over-blog.net/article-28620513.html
J'ai l'impression que tu n'as pas autorisé le changement du css.
Bonjour,
Que devrais-je voir ?
Merci
Je souhaiterais que, lorsque l'on arrive sur l'article en lui-même - après avoir passé le stade du résumé - cet article ne prenne pas la largeur telle que définie sur la page du résumé, mais qu'elle soit bien plus petite.
Suis-je pour cela obligé de passer en "mode avancé" afin de différencier "accueil" et "article" ou puis-je le mettre en place sans ? Et si "oui" commet ?
Bonjour, Cannard
Effectivement, passer par le mode >Configurer >avancé va te permettre d'avoir des parametrages différents pour l'accueil et les articles.
Tu pourra avoir des largeurs de colonnes pour la page d'accueil et des largeurs différentes pour les colonnes d'articles et de modules dans les pages d'articles.
En fait, j'ai pratiqué sans passer par le mode avancé. Cela m'a permis de peaufiner mes connaissances dans l'usage du marging ;-)
Je coche "Appliquer ma feuille de style personalisée"
Je modifie les lignes comme suit :
*******
body, html {padding: 0px; margin: 0px;}
#global{padding: 0px; margin: 0px auto; width: 1050px;}
.ln {clear:both;}
.cl {float:left;}
.clear {clear:both;}
/* modele */
#cl_0_0 {margin:0px 0px 15px 0px; padding:0px; width:100%;}
#cl_1_0 {margin:0 10px 0 0; width:770px; padding:5px}
#cl_1_1 {margin:0px; width:250px; }
#cl_2_0 {width:100%; margin:15px 0 0 0 ;}
*********
Je fais "Prévisualiser" : Les modifs sont prises en compte et tout est OK
Alors je fais "enregistrer" ... et là, rien ne change sur mon blog !!!
Pouvez-vous m'aider ???
Bonjour,
Effectivement, et je vais te diriger vers l'article pour modifier le css dans lequel j'annonce qu'il faut enregistrer sans changement le css personnalisé avant de faire les changements et de valider définitivement.
D'autre part, Si je fais la largeur totale des colonnes, j'arrive à une taille plus grande que la taille totale du blog, la colonne des modules sera donc rejetée en fin de blog, en dessous des articles.
770 + 250 + 10 de marge = 1030 pixels
tout d'abord merci pour le tuto il est facile à comprendre, par contre j'ai essayé de faire pareil, avec le même template "japan" mais ça m'indique que le css n'est pas modifiable, alors j'ai essayé avec un autre je ne sais plus lequel, en aperçu tout apparaissait bien comme je voulais, mais en faisant appliquer ça donnait complètement autre chose
je suis vraiment nulle je vais jamais y arriver
Bonjour,
Comme pour Yves, il faut valider une première fois le css sans changement avant de faire les changements et d'enregistrer à nouveau. C'est indiqué dans mon article concernant la modiication du css.
Dans ton css, au début, il y a ces lignes :
#global {padding: 0px; margin: 0px auto; width: 950px;}
...
#cl_1_0 {margin:0; width:195px;}
#cl_1_2 {margin:0; width:300px;}
#cl_1_1 {margin:0 10px 0 10px; width:425px; padding:5px;}
Cela représente : taille totale du blog, colonne de gauche, colonne du milieu et colonne de droite.
Maintenant, ta descriptionest trop peu détaillée. C'est un peu comme si je te disait que j'avais fait une tarte aux pommes, qu'elle n'était pas bonne, mais que tu ne peux pas m'aider parceque je l'ai toute mangée.
Bon, je voudrais modifier les couleurs de texte (bleu-gris) et background (gris plus clair) des réponses aux commentaires. Je modifie donc la ligne ".responseMessage" de ce qui suit ... et rien ne se passe !
Pouvez-vous encore m'aider ?
/*--------------------Commentaires---------------------------- */
.h2commentMessage {color:#CCC;}
.comment {}
.comment hr {}
.commentMessage {padding:5px; border:1px dotted #BBB; margin:0px; color:#AAA;}
.commentOption {text-align:right; font-size:90%; color:#AAA; margin-bottom:10px;}
.responseMessage {text-align:right; color:#4c56df; background-color: #616161}
.afterReactions .linkAddComment {font-size:130%;}
Bonjour,
Malgrès différents essais et recherches, je ne parviens pas à changer la couleur du texte des réponses.
Je te propose de poser ta question sur le forum afin de multiplier les têtes chercheuses.
en fait le problème venait du fait que je n'ai certainement pas enregistré une première fois le css comme vous l'avez dit,
mais là c'est nikel, le ik c'est la couleur, je voudrais la changer je vais demander de l'aide sur le forum pour pas faire de hors sujet
J'ai un petit souci en "premium" que je n'avais pas en "confiance" :
En "confiance" la page d'accueil apparaissait avec l'image du fond d'écran, le titre du blog et les photos défilant EN BAS de l'écran et RIEN de plus.
Maintenant en "premium" les photos défilent plus haut (presque au centre de la page)et en bas apparaissent le haut de la pub (du module) et le haut du 1er article (anecdote de la semaine).
Est-il possible d'agir sur les dimensions afin de faire disparaitre ces derniers (les "têtes" du module et de l'article)? Ou plutôt de les "pousser" vers le bas?
Je m'excuse si tu n'as pas compris mais c'est pas facile de trouver les mots justes.
En attendant je te remercie par avance de bien vouloir m'aider.
Bonjour,
Si je comprends bien, tu veux que les images défilantes commencent en dessous de l'image de fonc (mer) ?
Merci d'avoir consacré un peu de ton temps pour me répondre.
Oui, c'est bien ça, je voudrais que ma page d'accueil soit comme en "confiance" c'est à dire que les images défilent tout en bas de l'écran.
En fait lorsque je les positionne en bas, elles ne sont plus visibles car elles défilent sous l'article et sous la pub de gauche.
Merci pour ta patience.
Bonne soirée!
Il faut donc insérer de l'espace entre le titre et le défilé d'image.
Cela peut se faire de plusieurs façons, la plus simple étant des retours chariots et de vérifier sur le blog si leur nombre est adéquat (penser à valider l'en-tête modifier et cliquer sur F5 en regardant le blog).
La façon l aplus élégante est un tableau d'une colonne et trois rangées : la première rangée pour le titre, la troisième pour le défilé d'images et au milieu une rangée vide mais avec une hauteur imposée.
Cela peut se faire de plusieurs façons, la plus simple étant des retours chariots et de vérifier sur le blog si leur nombre est adéquat (penser à valider l'en-tête modifier et cliquer sur F5 en regardant le blog)."
Salut les Brigades,
C'est exactement ce que j'ai fait depuis le passage en "premium" mais ça ne marche pas, les images commencent à dispraitre aussitôt que l'espace entre le titre et celles-ci est augmenté (je m'excuse de me répéter: elles défilent derrière l'article et la pub). Par exemple: avec la configuration actuelle, un seul clic augmentant cet espace suffirait à "rogner" la hauteur des images de leur tiers.
Par contre, en "confiance" cette manip.marche à merveille.
En tous cas, je te remercie beaucoup d'avoir consacré un peu de ton temps et d'avoir essayer de résoudre ce souci.
J'ai donc décidé de laisser tomber et d'essayer de revenir en "confiance" car je t'avoue que j'ai plusieurs problèmes avec le mode "premium".
Bien amicalement et bonne soirée.
Alors il va te falloir user d'un de ces deux articles de mon blog au choix :
L'information à changer est dans cette ligne :
#header{text-align:left;}
J'y ai effacé la demande de hauteur de l'en-tête comme ça il prend la place imposée par son contenu.
Après, normalement tu peux mettre tes espaces ou ton tableau.
Pour le tableau, voici ton en-tête :
<table style="width: 99%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><span onmouseover="_tipon(this)" onmouseout="_tipoff()">
<object type="application/x-shockwave-flash" height="120" width="120" data="http://ak.webfetti.com/assets/toys/F/180.swf">
<param name="data" value="http://ak.webfetti.com/assets/toys/F/180.swf" />
<param name="align" value="left" />
<param name="allowScriptAccess" value="always" />
<param name="loop" value="true" />
<param name="quality" value="best" />
<param name="bgcolor" value="#89ebf0" />
<param name="wmode" value="transparent" />
<param name="src" value="http://ak.webfetti.com/assets/toys/F/180.swf" />
</object>
<img src="http://idata.over-blog.com/1/11/56/82/Images-Gifs/Etoiles.gif" class="DrteTexte" alt="Etoiles" height="99" width="107" /></span></td>
</tr>
<tr>
<td style="height: 430px;"> </td>
</tr>
<tr>
<td><span style="font-family: andale mono,times; font-size: 36pt; color: #333399;"><marquee onmouseover="this.stop();" onmouseout="this.start();" behavior="alternate" scrollamount="2" scrolldelay="12"><a href="http://www.planetebena.fr/article-10603326.html"><img src="http://idata.over-blog.com/1/11/56/82/RAJOUT/EnferParadis.JPG" class="noAlign" alt="EnferParadis" height="110" width="150" /></a> <a href="http://www.planetebena.fr/ext/http://bena.over-blog.fr/article-voyages-37478805.html"><img class="noAlign" alt="Videosdevoyages" src="http://img.over-blog.com/150x87/1/11/56/82/RAJOUT/Videosdevoyages.jpg" height="110" width="150" /></a> <a href="http://www.planetebena.fr/ext/http://bena.over-blog.fr/article-choses-de-la-vie-37580041.html"><span style="font-size: 14pt; color: #ff00ff; font-family: arial black,avant garde;"><img class="noAlign" alt="Choses-de-la-vie-copie-1.jpg" src="http://img.over-blog.com/150x112/1/11/56/82/RAJOUT/Choses-de-la-vie-copie-1.jpg" height="110" width="150" /></span></a> <a href="http://www.planetebena.fr/ext/http://bena.over-blog.fr/article-la-sante-pour-tous-37583067.html"><img class="noAlign" alt="Sant--pour-tous-copie-1.jpg" src="http://img.over-blog.com/150x112/1/11/56/82/RAJOUT/Sant--pour-tous-copie-1.jpg" height="110" width="150" /></a> <a href="http://www.planetebena.fr/ext/http://bena.over-blog.fr/article-videos-imprevues-37931260.html"><img class="noAlign" alt="Vid-os-gags-copie-1.jpg" src="http://img.over-blog.com/150x112/1/11/56/82/RAJOUT/Vid-os-gags-copie-1.jpg" height="110" width="150" /></a> <a href="http://www.planetebena.fr/ext/http://bena.over-blog.fr/article-les-videos-insolites-37885104.html"><img class="noAlign" alt="Vid-os-insolites-copie-1.jpg" src="http://img.over-blog.com/150x112/1/11/56/82/RAJOUT/Vid-os-insolites-copie-1.jpg" height="110" width="150" /></a> <a href="http://www.planetebena.fr/ext/http://bena.over-blog.fr/article-photos-de-fous-37705608.html"><img class="noAlign" alt="Les-photos-de-fous-copie-1.jpg" src="http://img.over-blog.com/150x112/1/11/56/82/RAJOUT/Les-photos-de-fous-copie-1.jpg" height="110" width="150" /></a> <a href="http://www.planetebena.fr/ext/http://bena.over-blog.fr/article-diaporagags-37598777.html"><img class="noAlign" alt="ChienParasol" src="http://img.over-blog.com/150x112/1/11/56/82/RAJOUT/ChienParasol.JPG" height="110" width="150" /></a> <a href="http://www.planetebena.fr/ext/http://bena.over-blog.fr/article-choses-de-la-vie-37580041.html"><span style="font-size: 14pt; color: #ff00ff; font-family: arial black,avant garde;"><br />
</span></a></marquee></span></td>
</tr>
</tbody>
</table>
Merci pour ta réponse!
Je vais étudier tout ça et te tiendrais au courant du résultat.
Bonne journée!
bonne journée .
Bonjour,
Il te faut augmenter dans ton css le premier chiffre et le second d'autant chacun dans ces lignes :
#global {width: 980px; background-color: #FFF; margin: 25px auto; border:0px;}
#cl_1_0 {float: left; width: 610px; margin: 0 5px; padding: 0 15px; padding-top: 20px;}
#cl_1_1 {float: left; width: 315px; padding: 0 ; padding-top: 20px; margin-right: 10px; margin-left: 5px;}
ATTENTION : tu es en mode >Configuré >Avancé.
Pourquoi, pour quels avantages ?
En tous cas, l'inconvénient est que tu as trois css, tu dois donc faire le changement trois fois.
En mode >Configurer >Classique, il n'y a qu'un css.
bon alors voilà j'ai fait tout c'que vous avez écrit du mieux que j'ai pu, mais ça fonctionne pas snif !!!!
suis troooop nulle ! à l'aide please
Bonjour,
Tu as fait quoi exactement ? Ton css a encore des largeurs en px donc fixes : pas de changement lié à une largeur élastique.
Merci d'être précise.
Dans la première ligne global, remplace le 100% par un 85%.
Ca devrait marcher : le global est l'espace utile de ton blog, il comprends les deux colonnes de modules et d'articles et pour laisser la place à ton fond, il faut réduire la largeur utile du blog.
En ce qui concerne le bord droit, tout va dépendre de l'écran de ton visiteur.
Merci beaucoup de ton passage.
#global {
margin: 0px auto;
width: 1200px;
position: relative;}
.ln {clear: both;}
.cl {float: center;}
.clear {clear: both;}
/* modele */
#cl_0_0 {width: 100%;}
#cl_1_0 {margin:0;width: 710px;}
#cl_1_1 {margin:0;width: 489px;/* 490px - 1px (bordure gauche de la colonne de droite) */}
#cl_1_1 .column_content {padding: 0px 0 0;padding-top: 0;}
#cl_2_0 {margin-bottom: 0;width: 100%;}
.box {width:100%; overflow:hidden;
Bonjour,
Essayes ceci :
html > body #global {margin: 0px auto; width: 1200px; background-image: none! important;}
html > body #global #ln_1#ln_1 {width: 100%; }
#cl_1_0 {margin:0;width: 710px;}
#cl_1_1 {margin:0;width: 480px;}
J'ai retiré les ombre du bord car c'est une image unique pour les deux ombres et donc l'ombre de droite passe derrière la colonne des modules.
je souhaite réaliser un blog élastique (utilisation de l'espace en fonction de la taille de l'écran de l'internaute) mais mes compétences sont limitées. L'objectif est de limiter les marges de coté pour optimiser la place pour les articles ou les pages. J'ai essayé de suivre vos conseils mais cela ne fonctionne pas. Vous pourrez constater mes défaillances en visitant le blog. Merci pour votre réponse.
Bonjour,
Tu as fait tout ce qu'il faut ... sauf un truc.
Tu as oublié je pense de prendre en compte les marges extérieures et donc ton blog n'est pas assez large pour contenir les trois colonnes, l'une est rejetée en dessous des deux autres.
Soit tu diminues la largeur des colonnes, soit tu diminues le paddind de la colonne centrale.
Voilà ce que ça donnes pour la seconde solution :
#cl_1_0 {float: left; width: 19%; margin-left: 1%;}
#cl_1_1 {float: left; width: 46%; padding: 0 1%;}
#cl_1_2 {float: left; width: 30%; margin-right: 1%;}
merci beaucoup pour ta réponse cela marche nickel.
Je me permets d'abuser en posant un deuxième problème. En fond, il y a une image légèrement grisée (sous la bannière), je souhaiterais qu'elle suive le mouvement donné et qu'elle s'ajuste à la largeur de l'écran mais une nouvelle fois je bloque. Je pense avoir localisé l'endroit où on y fait référence dans le css :
#global { background: url(http://fdata.over-blog.net/99/00/00/01/designs/357/default/pics/8_global.jpg) no-repeat;}
Mais cela n'est que l'adressage de l'image me semble t il.
Merci d'avance pour ta réponse
Oui, c'est elle.
Mais pour le reste ce n'est pas possible car une image a des dimensions fixes contrairement à ton blog. Le mieux est donc de retirer l'image du css :
#global { background-image: none;}
Un grand merci pour ces infos techniques ^^
Je ne pensais pas toucher un jour au CSS de mon blog...
Mais en tombant sur cet article, comme justement je voulais étirer la grosse colonne, j'ai tenté le coup, j'ai fait quelques réajustages et ça a marché °/
Je suis ravie^^.
Il me reste à m'occuper de la colonne des menus, que j'aurais souhaitée plus fondue et arrondie, mais je vais aller directement sur le sujet approprié car j'aurais besoin d'indications supplémentaires :)
merci pour votre aide !
Bonjour,
Vers le bas de ton css, il y a une ligne qui impose une dimension fixe à la largeur utile du blog. Elle est donc à retirer.
#global{ margin:0px auto; position:relative; width:950px;}
mais ... ma bannière de tête ne fait pas tte la longueur....et en plus je n'arrive pas à enlever la bannière de base de mon thème.....donc actuellement on voit les 2....
Bonjour,
Je pense que tu as trouvé la solution car je ne vois pas cela sur ton blog.
Merci de m'éclairer sur les lignes à modifier.
Bonjour,
Tu demandes un blog élastique, mais il reste des traces de dimensions fixes.
J'en ai trouvé et les ai retirées de cette partie de ton css (dans le second tiers en hauteur) :
/* common article struct 8 */
#cl_0_0 {margin-bottom: 0;}
#cl_1_0 {
padding: 5px 0 0 5px;
}
#cl_1_0 .box .box-titre{ }
#cl_1_1 {
margin:0;
padding: 0;
}
#cl_1_1 .column_content{
height: auto!important;
min-height:115px;
height:115px;
float: left;
padding: 5px;}
#cl_1_1 .pub .box-content{margin: 0 auto; padding: 0; width:100%;}
#cl_1_2 {margin-top: 0px; }
Regarde s'il y a des traces de pixels ailleurs au cas où j'en aurais loupé
J'ai trouvé ceci également.
/* common article struct 8 */
#cl_0_0 {margin-bottom: 0;}
#cl_1_0 {
padding: 5px 0 0 5px;
width: 190px;}
#cl_1_0 .box .box-titre{ }
#cl_1_1 {
margin:0;
padding: 0;
width:450px;}
#cl_1_1 .column_content{
height: auto!important;
min-height:115px;
height:115px;
float: left;
width:440px;
padding: 5px;}
#cl_1_1 .pub .box-content{margin: 0 auto; padding: 0; width:100%;}
#cl_1_2 {margin-top: 0px; width: 305px;}
#cl_1_2 .column_content{width:300px; padding:0;}
#cl_1_2 .box-content{padding: 5px 0; width: 100%; overflow: hidden;}
Merci encore pour l'aide apporté.
En fait, un css sont des instructions que doit suivre le navigateur utilisé par ton visiteur pour afficher les éléments de design. Les éléments du css sont lus de haut en bas. C'est donc la dernière information qui prime.
Exemple : si tu demande une première fois un fond rouge puis plus loin le fond du même élément en bleu, c'est la seconde information qui sera affichée définitivement sur l'écran du visiteur.
J'ai donc lu ton css pour le corriger en partant de la fin et je me suis arrêté lorsque j'ai atteint le résultat voulu.
Bonjour,
Je vois ceci : http://idata.over-blog.com/1/00/05/30/Images-autres/depressive-utopiste.png
En quoi puis-je t'aider.
Ta lectrice écrit qu'elle "zoome à fond pour ne plus voir ton fond de blog", mais je pense que toi tu veux qu'on la puisse voir toujours.