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 |
Maintenant que vous savez modifier le css de votre blog, vous allez pouvoir agir sur la largeur des colonnes.
ATTENTION, tous les thèmes Over-Blog ne se prêtent pas à ce petit jeu, en particulier ceux donc la composition graphique est faite d'images à largeur fixe.
Voici les lignes de css :
#global {width:XXX;}
#cl_1_0 {width:XXX;}
#cl_1_1 {width:XXX;}
#cl_1_2 {width:XXX;}
#global est la largeur utile du blog
#cl_1_0 est la largeur de la première colonne
#cl_1_1 est la largeur de la seconde colonne
#cl_1_2 est la largeur de la troisième colonne
Bien sûr, si vous n'avez que deux colonnes, #cl_1_2 n'existe pas.
width signifie largeur en anglais. En langage css aussi.
A vous de remplacer les XXX par des dimensions en pixel (px) ou en poucentages (%).
ATTENTION : comme dans le css original il y a des marges, le but du jeu est que la totalité des marges et colonnes ne dépasse pas la largeur du global.
Exemple de mon blog au 4/03/2009 :
#global {width:1200px; background-color: #000000; border-width: 0px; padding: 0px; margin: 0px; float:right;}
#cl_1_0 {background-color: transparent; color: #000000; text-decoration: none; width:930px; margin: 0px; padding:5px; float:left;}
#cl_1_1 {background-color: #ffffff; color: #666666; text-decoration: none; margin-top: -8px; padding-bottom: 15px; width:245px; background-image: url(http://pagesperso-orange.fr/denis.lagarde/BrigadesV3/bascolonemodulesbrigades.jpg); background-repeat: no-repeat; background-position: bottom; float:right;}
Les autres instructions des lignes servent à mettre en place des marges, des fonds, des images...
ATTENTION, tous les thèmes Over-Blog ne se prêtent pas à ce petit jeu, en particulier ceux donc la composition graphique est faite d'images à largeur fixe.
Voici les lignes de css :
#global {width:XXX;}
#cl_1_0 {width:XXX;}
#cl_1_1 {width:XXX;}
#cl_1_2 {width:XXX;}
#global est la largeur utile du blog
#cl_1_0 est la largeur de la première colonne
#cl_1_1 est la largeur de la seconde colonne
#cl_1_2 est la largeur de la troisième colonne
Bien sûr, si vous n'avez que deux colonnes, #cl_1_2 n'existe pas.
width signifie largeur en anglais. En langage css aussi.
A vous de remplacer les XXX par des dimensions en pixel (px) ou en poucentages (%).
ATTENTION : comme dans le css original il y a des marges, le but du jeu est que la totalité des marges et colonnes ne dépasse pas la largeur du global.
Exemple de mon blog au 4/03/2009 :
#global {width:1200px; background-color: #000000; border-width: 0px; padding: 0px; margin: 0px; float:right;}
#cl_1_0 {background-color: transparent; color: #000000; text-decoration: none; width:930px; margin: 0px; padding:5px; float:left;}
#cl_1_1 {background-color: #ffffff; color: #666666; text-decoration: none; margin-top: -8px; padding-bottom: 15px; width:245px; background-image: url(http://pagesperso-orange.fr/denis.lagarde/BrigadesV3/bascolonemodulesbrigades.jpg); background-repeat: no-repeat; background-position: bottom; float:right;}
Les autres instructions des lignes servent à mettre en place des marges, des fonds, des 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
de plus j'aurai voulu avoir 3 colones avec la colonne du milieu toujours aussi grande mais les diffrents codes trouvé s sur le net ne marchent pas?
j'ai écrit une demande d'aide à ce sujet sur le forum <<<ici>>> mais pas de réponse; aurais tu une idée? merci d'avance :-)
Merci.
bonne journée ou bonne soirée :-)
J'ai enfin le Net après deux lonnnnnnnngs mois d'attente ...les plus longs de ma vie :$
J'espère que les moustaches vont bien ^_^
Je réagis sur un com que tu as laissé chez nous au sujet de la largeur des colonnes... De mon côté je ne vois pas de défaut ...ni sous IE8, ni sous FF ?!
Le seul souci que je découvre, c'est qu'on ne peut plus mettre de commentaire sous FF dans la fenêtre prévue à cet effet :$
Je n'ai pas encore regardé les nouveautés, ni mon css, j'ai pris tellement de retard que je ne sais pas par quoi commencer ;o))))
Je passe déjà faire un coucou aux copains, leurs dire que je ne suis pas mort ...et on verra par la suite ;)
Bonne soirée et @+
Francky trèèèèèèèèès content ^_^
Mes moustaches vont bien, merci.
Le soucis dont je parle n'est visible que sous Safari.
Ah BBA m'apelle pour manger, je te laisserais un commentaire sur ton blog. A très bientôt.
:-{D
Question : as tu personnalisé le thème de ton blog ?
Si NON, alors c'est simple, il y a deux lignes à modifier dans ton css
La première est tout en haut :
#global{padding: 0px; margin: 0px auto; width: 950px;}
La seconde est tout en bas :
#cl_1_0 {
width:730px;
}
J'ai mis en gras les chiffres à modifier. Si tu augmente de 132 le premier, il faut augmenter le second d'autant. Cela donnerais :
#global{padding: 0px; margin: 0px auto; width: 1082px;}
#cl_1_0 {
width:862px;
}
Si OUI, alors je te conseille cet article en premier puis d'appliquer la solution ci-dessus.
http://blogcln.over-blog.com/pages/Personnalisation_et_CSS-1425347.html
En effet, il n'est pas possible de personnaliser le thème et de modifier le css.
J'ai testé et ça fonctionne bien.
bonne journée
Quelle fenêtre et quel cadre ?
si tu sais lire un code source tu peux y trouver la réponse, sinon, merci de préciser ta demande.
J'aurai souhaité savoir comment je peux modifier la largeur des colonnes du fond de mon blog car j'arrive seulement à modifier la largeur des colonnes ou l'on trouve le texte.
J'ai posté un message sur le forum mais je n'ai pas eu de reponse pour l'instant.
J'ai regarder d'autres messages sur le fourum mais je trouve pas de reponses.
Peux-tu m'aider?
Merci d'avance pour ta réponse
Solaaris06
Bonjour je vais vite mettre ton blog en lien, pour le truc pour voir qui est connecté instantanément merci de me passer les infos par messagerie, par zone géographique c'est déjà pas mal, par IP comme sur les forums quand on est administrateur ce serait bien, merci d'avance
heureusement qu'il y a des blogs comme le tien
Hey boy! (or girl! bref)
Alors voilà, en trifouillant un peu mon CSS, je suis tombée sur un problème à la chnouf. C'est au niveau de l'en-tête. Pour faire une sorte de "bannière" j'ai insérer un background. Cependant, il y avait toujours une petite marge de décalage. J'ai mis en 0px tout mes "margin" qui pouvait avoir l'air d'être en rapport avec l'en-tête, mais que nenni! Toujours ce décalage vers la droit de, quoi... 5px.
Du coup j'ai fais simple, pas de bannière, pas d'emmerde. Mais tombant sur votre blog, j'imagine qu'il y a peut être enfin réponse à ma question ^^
La bise les amigos internautes!
Charlotte.
Hello !
Il y a aussi le forum pour cela !
Bon, je te propose de remettre ton en-tête le temps que je puisse voir ce qui ne vas pas.
Je pense que ça vient de cette ligne, mais pas certain que ce soit la seule :
#top {color:#713417; font-size: 12px; text-align: center; background-color:transparent; padding: 40px; font-style: normal; width: auto;}
J'ai modifié mon mode CSS car j'avais un théme personnalisé ceci dans le but d'agrandir la colonne de mes artciles, mais depuis en augmentant celle ci, voilà ce que j'ai(voir mon blog) pour la colonne des modules,
Je sais pas quoi faire, j'ai essayer de tout changer sur les tailles mais j'arrive pas à trouver ou le probleme, merci de me dire d'autant plus que j'ai bien augmenter la taille de mes articles comme je voulais (950px à 1200px en global et donc augmenter la colonne artciles de 620 à 870).
Merci de m'aider.
Bonjour,
Je vois parfaitement bien ton blog, pas de décallage ni de collones les unes en dessous des autres.Je ne vois donc pas ce qu'il y a à faire de plus.
As tu une capture d'écran à proposer ?
Merci il semblerait que j'ai eut un beugue sur mon pc qui m'empechait de voir le changement, je vous remercie, après quelques heures et une reconnexion, j'ai pu voir les changements que j'avais fait, merci de votre attention, pour moi problème résolu.
J'ai un article intitulé "Pourquoi vider le cache" qui te sera utile pour le futur.
http://ledenistest.over-blog.net/article-22866772.html
je suis la webmaster du blog de Jessica. Je voudrais élargir la colonne de droite sans toucher au reste pour que 3 images aléatoires puissent se voir sur la même ligne.
Que dois-je changer dans le CSS ? svp?
Merci pour la réponse,
Bonne journée
Morwyn
Bonjour,
Le lien que tu indiques pour aller sur le blog de Jessica ne fonctionne pas.
Quoi qu'il en soit, il faut élargir la colonne des articles et élargir d'autant l'ensemble du blog pour que tout continue à loger en largeur.
L'ensemble du blog est dans la ligne global alors que la colonne des articles est gérée par la ligne cl_1_X ou x=0 si c'est la colonne la plus à gauche.
Sans accès au blog je ne peux pas donner d'autres information.
Vous avez répondu à ma question concernant le largeur de ma colonne centrale sur le forum d'aide.
Je suis dessus depuis hier soir et pas moyen d'y arriver, j'ai lu l'article correspondant, mais je désespère d'y arriver !!!
Pouvez-vous m'aider ?
Pour faire simple je souhaiterai que mes colonne fasse la même taille que les votre, mais également qu'elles soit aussi un peu séparé.
Merci d'avance de votre coup de main
Bonjour,
Tu n'as pas mis l'adresse du fil mais ce ne serait pas celui dans lequel Francis m'a rappelé quer ton css n'est pas modifiable ?
Quoi qu'il en soit, voici une solution :
>Configurer >Mise en page >clic sur le petit marteau de l'en-tête >clic sur l'icône "html" de l'éditeur de module >coller le code que je vais donner avant de tout valider.
<style type="text/css">
#global {width: 980px;}
#cl_1_0 {width: 676px;}
#cl_1_1 {width: 304px;}
</style>
A toi de modifier les chiffres sachant que :
Si tu augmentes la première de 10, tu augmentes les deux autres de deux chiffres dont le total est 10.
Si tu n'augmentes pas la première, tu augmente une des colonnes d'autant que tu diminues l'autre.
ATTENTION : l'image de fond ne s'agrandira pas... l'effet sera une surprise.
Merci de m'aider.
Bonjour,
Merci d'avoir pensé à moi.
Malheureusement, ce n'est pas possible. Ce module n'est disponible que dans la colonne des articles.
Solution : utiliser ton en-tête : un tableau et hop.
Si si. Ca reprends le présent, normalement (ça fait longtemps que je n'ai pas essayé).
Et même s'il n'apparaît plus, il suffit de remettre l'image et de faire un lien dessus.
Je viens vers car je galère un peu, enfin beaucoup. Je voudrais que mon bloc article soit moins collé à la colonne de droite, et je n'arrive pas à obtenir ce que je veux:(
Pouvez vous m'aider, svp
Cordialement
Sandrine
Bonjour,
Je pense qu'en premier tu peux retirer la gouttière entre les deux colonnes :
#cl_1_1 {margin:10px 0px 10px 0px; width:260px;}
Cela va te libérer deux fois 10 pixels que tu pourras affecter aux colonnes.
L'espace entre deux colonnes se nomme gouttière.
Il ne faut donc pas retirer la ligne, mais la modifier avec ce que j'avais souligné.
Voila ce que j' ai pour le moment:
#global {margin:auto; background-color: white; border:0px; width: 100%;}
#cl_0_0 {margin: 0; padding: 0; width: 170; background-color: white}
#cl_1_0 {float: left; width: 890px;background-color: white: padding-top:20px}
Voila j'attend votre réponse avec impatience.
Merci beaucoup
Johanna Lala
Bonjour,
C'est parce que tu as confondu deux lignes de css.
Dans un premier temps, il te faut fixer la largeur utile de ton blog dans cette ligne :
#global {margin:auto; background-color: white; border:0px; width: 100%;}
Ici tu as une largeur de 100% donc variable. Choisi 1020 par exemple car 1024 pixels est une taille stadard d'écran.
Puis il te faut reprendre les deux colonnes d'articles et modules.
#cl_1_0 {float: left; width: 890px; background-color: white: padding-top:20px}
#cl_1_1 {float: left; width: 320px; padding: 10px 10px 0px 10px;}
La première ligne est ta colonne d'articles et la seconde celle des modules (elle est un tout petit peu plus bas dans ton css).
Il faut que le total de ce qui est souligné fasse au plus 1020 pixels. A toi de calculer ce qui est le mieux pour toi. Par exemple 700 pour les articles et 300 pour les modules.
Enfin, il y a une erreur dans cette ligne :
#cl_1_0 {float: left; width: 890px; background-color: white: padding-top:20px}
Après white il faut un point-virgule.
Je voudrai élargir la colonne du milieu car mes photos sont tronquées sur la droite, meme en mettant des photos de 400px de large, et surement réduire la colonne de droite afin de permettre cela. Je pense qu'il faut toucher au ccs, mais je ne sais pas quelles dimensions mettre. Merci de votre aide.
Bonjour,
Tu as deux solutions.
La première est de choisir une organisation de ton blog en deux colonnes : déplace les colonnes dans >Configurer >Mise en page, puis en bas à gauche tu cliques sur le schéma blanc pour choisir une configuration à deux colonnes.
Si non effectivement il faut modifier le css.
Tu cliques tout d'abord sur le premier lien de la première ligne de cet article pour savoir comment rendre possible la modification du css.
Puis tu recherches ces lignes et tu remplace les chiffres qui sont soulignés :
#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;}
Explication :
la première ligne c'est la première colonne de modules, celle de gauche
la seconde ligne c'est la deuxième colonne de modules, celle de droite
la troisième ligne c'est la colonne des articles
Le total des trois nombres soulignés doit rester le même, donc si tu en augmentes un, il faut qu'un autre diminue.
Donc si tu augmentes de 100 la troisième ligne, il faut diminuer du 100 la seconde ligne.
cette article m'as bien aidé ,il faut maintenant que je trouve comment faire pour que le texte s'écrive jusqu'au bout de la colone
Oui, j'ai vu ça !
Petit conseil, pour éviter l'espèce de dégradé gris au milieu des articles, pense à changer cette ligne de ton css :
#cl_1_1 {float: left; width: 625px; background: url(http://fdata.over-blog.net/99/00/00/01/designs/352/default/pics/6-cl_1_1.jpg) repeat-y;}
Il suffit de la rajouter avec ce que tu as mis comme dimensions.
A propos de largeur, pour que les articles aillent jusqu'au bout, c'est :
#cl_1_1 {width: 890px;}
Et puis j'ai réfléchi à ton problème de signe. Le égal barré est un dièse.
J'espère que ça va t'aider.
je te remercie beaucoup de ton aide ,moi qui suis une cyber-quiche grace à tes explication j'y suis arrivée !!!
Bon j'ai dernier petit truc a te demander et apres c'est bon j'arretes de te saouler LOL
Mon rêve après celui de gagner au Loto ! c'est de pouvoir mettre une image un peut particuliere car c'est un cahier à spirale (http://nsm01.casimages.com/img/2008/09/24//080924070845249682533756.jpg)
les spirales sont sur le haut or moi je souhaiterai avoir les spirales sur le coté gauche comme un véritable cahier de recettes .Alors ma question est comment placer ce motif sous mes articles(les recettes) et non pas sur le fond de mon blog et si possible avoir la spirale à gauche et non en haut.
Je te remerci pour ton aide car je suis à deux doigts d'avoir quelque chose qui me plait visuellement ,et ça grace à toi. bonne aprem
Bonjour,
Merci pour le retour : j'aime bien savoir quand ça fonctionne aussi.
Pour ce que tu demande, il faut deux choses : une image de spirale verticale et une mise en page en fonction de cette image.
Merci de déposer l'url (l'adresse) de cette image hébergée par tes soins.
ça y est j'ai une image qui me conviendrait pour la colone réserver à mes article afin que mes recettes apparaisse sur un cahier à spiral mais malgrés toute mes manipulation je n'arrive pas a la placer dans le css.
Qu'elle est la ligne que je doit modifier s'il te plait.
Merci pour le temps que tu m'a accordé
Tu as l'adresse de cette image STP ?
http://idata.over-blog.com/4/19/31/59/moncahier.jpg
J'ai refais les images.
Je t'envoi le nouveau css que j'ai fais et je te demande de le tester (après avoir copié collé le tien dans un fichier texte sauf Word).
Ensuite, il te faudra héberger les deux images et on verras ça plus tard.
body {margin:0px; padding:0px; background-color:#ffffff; background-image: url(http://idata.over-blog.com/4/19/31/59/serviette-vichy-rouge_1.jpg); font-family: Georgia, Arial, Verdana, Helvetica, sans-serif; font-size: 13px; color:#7D807A; line-height: 18px; font-style: italic;}
#global {margin:auto; background-color: transparent; border:0px; width: 1165px;}
h1 {color: #CCCCCC; font-size: 20px;}
h2 {color: #CCCCCC; font-size: 15px;}
h3 {color: #CCCCCC; font-size: 12px;}
a {text-decoration: none; color:#E14949; font-size:100%;}
a:hover {text-decoration:none; color:#BF0B0B;}
legend {color:#CCCCCC; padding-left:5px; padding-right:5px;}
img {border:0px none;}
input {border:solid 1px #999999; font-size:100%; background-color:#FFF; color:#000000; height: 18px;}
.button {background-color: #c11212; color: #fff; border: 0px;}
#ln_1 { background-color:transparent; background-image:url(http://idata.over-blog.com/1/00/05/30/Images-autres/la-perpignanaise/spiraleperpignanaise.png); background-repeat:repeat-y; padding-left:40px}
#cl_1_0 {float: left; width: 890px; background-color: #FFF; padding: 10px 10px 0px 10px;}
#cl_1_1 {float: left; width: 625px; background: url(http://idata.over-blog.com/1/00/05/30/Images-autres/la-perpignanaise/carreauxperpignanaise.png);}
.GcheTexte{float:left; margin:3px;}
.DrteTexte{float:right; margin:3px;}
.CtreTexte{margin:3px auto; display:block;}
.hitcitation {font-style:italic;text-align:justify;padding:5px 20px;background-color:#eee;}
.hitencart {border:1px solid black;text-align:justify;font-weight:bold;margin:5px 0px;padding:5px 5px;}
.hitimportant {font-weight:bold;color:red;font-weight:bold;font-size:120%;}
.hitperso1 {font-style:italic;}
.hitperso2 {font-weight:bold;}
/* ------------------entete ---------------------*/
#cl_0_0 {margin: 0; padding: 0; width: 1162px;}
#header {min-height: 100px;}
#top {padding:0px; color:#FFF; background-color:transparent; padding-top: 35px; padding-left: 30px;}
#top h1, #top h1 a { color: #ffffff; font-family: "georgia"; font-size: 22px;}
.topLien {text-decoration:none; color:#FFF;}
.topLien:hover {text-decoration:underline; color:#FFF;}
#top a {color: #fff; font-size: 22px; padding: 0 8px; text-decoration: none;}
/*-------------------module--------------------------*/
.box {margin:0px; padding:0px; margin-bottom: 50px;}
.box a {color: #7D807A; text-decoration: none;}
.box a:hover {text-decoration: none; color: #AAA;}
.box h2 {color: #BF0B0B; font-size: 18px; font-weight: normal; font-family:"georgia"; font-style: italic; padding-left: 10px;}
.box-titre { padding:0px;}
.box-footer {display:none;}
.box-content {overflow:auto; padding:2px 5px; color:#999999;}
.box-content p {margin:5px 0px 5px 15px; padding:0px; color:#999999;}
.box-content ul {margin:5px 0px 5px 15px; padding:0px; color:#999999;}
.box-content li {list-style: none; color:#999999; margin:5px 0; padding:0px;}
.listAll{display:block; text-align:right;}
.text li, .lien li, .articlerecent li, .micropayment li, .micropayment li, .commentrecent li, .categorie li {height: 20px; padding: 3px 0 3px 0;}
.commentrecent li {height: 35px;}
.imgAndText li {border: 1px solid #999999; width: 120px; float: left;}
/*------------------- Articles ----------------------------------*/
.article, .page {margin-top:0px; padding: 0 20px; margin-bottom: 10px; color:#7D807A; text-align: justify; position: relative;}
.article p, .page p {padding:0px 0px 5px 5px ; margin:0px;}
.contenuArticle, .pageContent {margin-top: 40px;}
.plusExtrait {margin: 10px auto 20px auto;}
.afterArticle, .afterPage {color: #E14949; padding:3px 0px; width:100%; text-align: right; font-size: 13px; margin-bottom: 30px; margin-top: 15px; padding-bottom: 20px; display: block; border-bottom: 1px dashed #cbcbcb;}
.plusExtrait a, .afterArticle a {padding: 3px 5px; font-size: 13px; font-weight: bold; text-decoration: none;}
.afterArticle .separator, .plusExtrait .separator {color: #E14949;}
.plusExtrait span, .afterArticle span {clear: both; line-height: 20px;}
.beforeArticle, .beforePage {padding:0px; margin:0px; width:100%; color:#7D807A; display: block; font-size: 12px; font-style: italic; left: 80px; line-height: 13px; }
.beforeArticle .date span, .beforeArticle .separator {display: none;}
.beforeArticle .date span.text {display: inline;}
.beforeArticle a {text-decoration: none; color: #7D807A;}
.linkTopic {text-transform:lowercase;}
.linkTopic:hover {text-transform:lowercase;}
.titreArticle, .divPageTitle h2 {color: #BF0B0B; font-size: 28px; font-weight: normal; font-style: italic; line-height: 35px;}
.titreArticle:hover, .divPageTitle h2:hover {text-decoration:none; color:#E14949;}
.article h2, .page h2 {background: url(http://fdata.over-blog.net/99/00/00/01/designs/352/default/pics/titrearticle-bkg.png) no-repeat; height: 35px; padding-top: 0px; padding-left: 40px; margin-left: 20px; }
.topicTitle {text-decoration:none; color:#7D807A; text-transform: capitalize; font-size: 14px; font-weight: normal; line-height: 15px; margin-left: 10px;}
.afterReactions {text-align:left; display:block; height: 100px;}
.afterReactions .linkAddComment {font-size:100%;}
.afterReactions a {padding: 3px 5px; font-size: 13px; font-weight: bold; text-decoration: none; color: #E14949;}
/*--------------------Liste des articles-------------------------*/
.listArticles {margin-top:0px; margin-bottom:20px; border:0px none; color:#888888; font-size: 10px;}
.resumeArticle {color:#7D807A; text-align: justify; font-size: 12px; border-bottom: 1px dashed #cbcbcb; padding: 0 10px; padding-bottom: 15px;}
.listArticles a {color:#BF0B0B; text-transform: capitalize; font-size: 18px; font-weight: normal; text-decoration: none;}
.listArticles .categorieArticle a, .resumeArticle a {font-size: small; color: #7D807A;}
/*--------------------Mode resume-------------------------*/
.titreExtrait {color: #BF0B0B; font-size: 28px; font-weight: normal; font-style: italic;}
.hrExtrait {border: 0px; display: none;}
.extraitArticle {margin-bottom:10px; position: relative; padding: 0 20px;}
.extrait {margin-top: 40px; color:#7D807A; text-align: justify;}
.extrait img {border: 1px solid #949494; padding: 4px; margin-right: 10px;}
.infoExtrait {background: url(http://fdata.over-blog.net/99/00/00/01/designs/352/default/pics/titrearticle-bkg.png) no-repeat; height: 35px; padding-top: 8px; padding-left: 40px; margin-left: 20px; line-height: 20px;}
.dateExtrait {padding:0px; margin:0px; width:100%; color:#7D807A; display: block; font-size: 12px; font-style: italic; position: absolute; top: 35px; left: 80px; line-height: 13px;}
.dateExtrait .separator {display: none;}
.dateExtrait .date span {display: none;}
.dateExtrait .date span.text {display: inline;}
.dateExtrait a {text-decoration: none; color: #7D807A;}
.extrait a {text-decoration: none;}
.extrait a:hover {text-decoration: underline;}
/*--------------------Commentaires---------------------------- */
.h2commentMessage {color: #BF0B0B; font-size: 18px; font-weight: normal; font-style: italic; padding-left: 20px;}
.comment {}
.comment hr {}
.commentMessage {padding: 0; margin: 0; color:#7D807A; text-align: justify; padding-left: 10px;}
.commentOption {color: #999; padding: 2px; margin-bottom: 25px; font-size: 10px; margin-left: 5px;}
.responseMessage {text-align:right; background-color: #c11212; color: #fff; padding-right: 10px;}
.responseOption {text-align: right;}
.afterReactions .linkAddComment {font-size:130%; margin-left: 10px;}
.commentMessage {min-height: 20px;}
/*-----------------Newsletter-----------------------------------*/
#divNewsletter {background-color:#c0c0c0; border:10px dotted #E14949; color: #7D807A; font-size: small;}
#divNewsletter h2 {text-align:center; font-size:12pt; color #E14949;}
#divNewsletter input {background-color:#E14949; border:1px solid #999; color:#FFF;}
#divNewsletter .newsletter {}
#divNewsletter {}
/* ---------------------Calendrier--------------------------------- */
.calendarTop1 {font-size: 10px; font-style: normal; color:#999; font-weight: bold; background-color:transparent;}
.calendarToday1 {font-size: 10px; font-weight: bold; color:#FFF; background: #E14949;}
.calendarToday1 a {font-size: 10px; font-weight: bold; color:#FFF; background: #E14949;}
.calendarDays1 {width:50px; height:15px; font-size: 10px; font-style: normal; color:#999; text-align:center;}
.calendarHeader1 {font-size: 10px; color:#999;}
.calendarTable1 {border:0px none; width: 200px; margin-left: 40px; line-height: 12px;}
/*-----------------------Pagination-------------------------*/
.pagination {color:#000; margin:10px auto}
/*----------------erreurs etc------------------------------*/
.error {color : #464646;}
/*----Newsletters-----*/
.newsletter li {list-style-type: none;}
/*----- accueil / menu -------*/
#menuob {background: url(http://fdata.over-blog.net/99/00/00/01/designs/352/default/pics/article-accueil-a.jpg) ; height: 35px; padding-top: 10px; margin: 0px; width: 1265px;
margin-bottom: 0;
border: 0px;
}
#menuob a {
font-size: 14px;
font-weight: normal;
color: #FFF;
text-decoration: none;
padding: 16px 20px ;
}
#menuob a:hover {
color: #fff;
text-decoration: none;
background: url(http://fdata.over-blog.net/99/00/00/01/designs/352/default/pics/article-accueil-ahover.jpg) ;
}
.pub {margin-left: 5px;}
.contenuArticle, .pageContent, .extraitArticle { background-color: transparent ! important;
color: #7D807A ! important;
font-family: "comic sans ms";
font-size: 16px;
}
.divTitreArticle h2, .divPageTitle h2,
.divTitreArticle h2 a, .divPageTitle h2 a,
.titreExtrait {
color: #E14949 ! important;
font-family: "georgia" ! important;
font-size: 18px ! important;
}
.commentMessage {
color: #7D807A ! important;
font-family: "georgia" ! important;
font-size: 13px ! important;
}
.responseMessage {
color: #ffffff ! important;
font-family: "georgia" ! important;
font-size: 13px ! important;
}
d'abord je voulais te remercier de ton aide et du temps que tu m'a consacré ,je sais que c'est du bénévolat et que c'est du temps que tu prends sur ton temps libre alors je te dis un grand merci !!!
Je viens de placer le nouveau css c'est vraiment très jolie ,pour la marge j'ai du ajouter un module texte libre pour amener la marge jusqu'en bas (pour que ça s'aligne avec les recettes)
Je souhaiterai par contre augmenter la taille des titres des articles (recettes)car je trouve la taille un peu petite .Que dois-je modifier ?
merci après je t'embêtes plus promis LOL
En bas de ton css, il y a cette ligne :
.titreExtrait {
color: #E14949 ! important;
font-family: "georgia" ! important;
font-size: 18px ! important;
}
oui c'est toujours moi ! j'ai encore un petit soucis de réglage ,
je t'explique j'ai mes colones qui ont rétrécient alors qu'au départ on les avait modifié pour qu'elles prenent tout l'écran et j'ai beau essayé de modifier je n'arrive pas a remettre comme c'était c'est a dire ma colone de droite et de gauche occupant tout l'écran .
Si je pouvait encore bénéficier de tes lumieres merci encore
Bonjour,
Je ne vois aucun changement sur ta page d'accueil : http://idata.over-blog.com/1/00/05/30/Images-autres/mon-carnet-de-recettes-gourmandes.png
Bon dimanche
J'ai changé d'ordinateur dernièrement, cette fois-ci mon écran est plus large, du coup mon blog n'était plus juste par rapport à l'écran...j'ai changé la taille de mon thème perso, mais les articles, la bannière et les modules se sont tous décalés. Pouvez-vous m'aider.
Merci de votre réponse.
Colinette
je souhaite changer mon design et ceux que tu proposes sont super mais je souhaiterai avoir trois colonnes au lieu de deux. Est-ce possible.
Modèle choisi : girl lay down
Merci de ton aide
Lilou
Bonjour,
Ce template n'est pas de moi.
Je te demande un peu de patience pour une réponse complète que je déposerais ci dessous.
REPONSE :
* Structure */
#cl_0_0{ margin-bottom:0; width:1200px;}
#cl_1_0{ display:inline; overflow:hidden; width:230px;}
#cl_1_1{ display:inline; overflow:hidden; width:550px;}
#cl_1_2{ display:inline; overflow:hidden; width:290px;}
#cl_2_0{ margin-bottom:0; width:1200px;}
body, html {padding: 0px; margin: 0px;}
a {color:#000;}
.ln {clear:both;}
.cl {float:left;}
.clear {clear:both;}
#cl_2_0 {width:100%; margin:15px 0 0 0 ;}
.box {width:100%; overflow:hidden;}
.topicTitle {text-align:center;}
.afterArticle {margin-top:30px}
/*--------------Personnalisation--------------------- */
body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
background: url(http://ddata.over-blog.com/3/93/83/71/CategorieGirl/GrillayDown/Girl_lay_down_background.png);
background-repeat: repeat;
}
ul {
margin-left: 30px;
padding: 0;
}
a:link {
color: $mainlinkcolor;
text-decoration: none;
}
a:visited {
color: $visitedlinkcolor;
text-decoration: none;
}
a:hover {
color: $blogtitle;
border-bottom: 0px none;
}
a:active {
color: $blogtitle;
text-decoration: none;
}
#global {
width: 1200px;
margin: 0px auto 0;
margin-top: 20px;
text-align: left;
}
#cl_1_0 {
float: left;
padding: 0px 5px;
background-color:#ccbb99;
border: 5px solid #fff8dc;
margin-bottom: 20px;
margin-top: 5px;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#cl_1_2 {
float: right;
padding: 0px 5px;
background-color:#ccbb99;
border: 5px solid #fff8dc;
margin-bottom: 20px;
margin-top: 5px;
line-height: 1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#cl_1_1 {
float: left;
margin: 0px 22px 10px 22px;
padding-top: 0px;
margin-top: 5px;
padding-left: 35px;
font-size: 90%;
line-height: 1.4em;
border: 5px solid #fff8dc;
background-color:#ccbb99;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#ln_0 {
margin: 0;
height: 280px;
text-align: right;
background: url(http://ddata.over-blog.com/3/93/83/71/CategorieGirl/GrillayDown/Girl_lay_down_Header.png) no-repeat top center;
}
#top {
padding:0px;
line-height:1.3em;
margin-left: 200px; color:#555500
letter-spacing:.1em; font-size:200%;
}
.date {
margin-top: 20px;
margin-left: 20px;
font-size: 110%;
}
.titreArticle {color:#fff;}
.article {
margin: 0 0 1.5em 0;
padding: 0 0 1.5em 20px;
}
.afterArticle {
margin: 0;
padding: 5px 0 0 0px;
font-size: 95%;
}
.article img {
padding: 2px;
border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
}
.box h2 {
text-align: left;
padding: 15px 0 0 10px;color:#fff;
height: 32px;
height: 32px !important; /* for most browsers */
height /**/:57px; /* for IE5/Win */
}
.box-footer {display:none;}
.box ul li {
list-style: none;
margin:0;
}
#footer {
margin: 0;
background: #fdcddb;
padding-bottom: 0px;
padding-top: 0px;
padding-left:20px;
padding-right: 20px;
height: auto;
text-align: center;
}
amitiés
Amitiés
je n'ai toujours pas de réponses. Y a t-il un soucis avec ma demande ?
Amitiés
Bonjour,
En faits j'aimerais savoir précsément ce que doit être ton blog car je ne le connaissais pas et donc n'ai aucun comparatif entre avant et après.
J'ai des soucis de mise en page au niveau du css par rapport à mes articles et mes modules qui ne sont pas centré selon le fond que j'ai choisi.
http://digitalcolinette.over-blog.com
Merci de votre aide.
Amitiés
Bonjour,
Que veux tu précisément ?
Merci d'être plus précise.
Ex: les modules ne sont pas centrer par rapport à la marge de mon image de fond (ton vert, fleurs et papillon).
Je suis désolée si je ne m'explique pas bien, mais je ne connais pas les termes exacts.
Pour que tout loge dans la partie centrale, remplace le début de TES css par :
#global {width: 700px; background-color: transparent; margin: 0px auto;}
#cl_0_0 {margin: 0; padding: 0; width: 100%;}
#ln_1 {}
#ln_2 {border-bottom: 0px solid #999;}
#cl_1_0 {float: left; width: 500px; margin: 0; margin-right: 0px; padding: 0px;}
#cl_1_1 {float: left; width: 200px; padding: 0; margin: 0px;}
Cela devrait être bon. Mais par contre tu ne pourras pas mettre de pub sur ton blog.
ça me rend dinguo ! ;-)
Je ne peux plus mettre de pub, est-ce un soucis ?
Merci beaucoup de prendre de ton temps sur mon problème.
Essaie de diminuer d'un pixel les largeurs de 500 et 300 pixels soit 499 et 299 pixels (pour moi ça marche avec 500px et 300px respectivement)
De mon côté je n'ai toujours pas les modules à droites même en modifiant les largeurs ! Y a t-il un soucis ailleurs ?
Je vois le blog correctement, as tu vidé le cache de ton navigateur ?
Si oui, alors retire encore une unité en largeur.
Sur les bons conseils de Flo, je viens te voir.
Avec la pub que j'ai rajoutée entre les articles et la configuration de la liste d'articles en 3 colonnes, mon premier article (Bach Toccata) passe en haut tout seul. http://www.lemiroirauxessences.fr/articles-blog.html Mais il est en une seule colonne alors que je le voudrais en pleine largeur. J'ai bien essayé de mettre extrait1 avec 99% dans la css à la place de listArticles mais ça ne marche pas. Sur le forum j'ai vu que tu as configuré un de tes blogs ainsi mais ta formule dans ton blog ne bouge rien chez moi. Est-ce que tu saurais quelle ligne css je dois écrire. Merci par avance pour l'aide.
Peut être que le père Noël passera pour moi avec ta réponse...
Bien cordialement.
Sagan33
Bonjour,
Tu parles de la ligne suivante :
#extraitArticle1 {margin:10px 0px; padding:0px; border-left:2px solid #C30F10; width:99%; background-color:#ffffff}
Mais elle ne marche que pour une mise en page en résumés et pas pour la liste des articles.
Dans la liste des articles c'est quelque-chose qui n'est pas possible de faire : mettre en avant un seul article de la liste.
La seule chose possible est d'y distinguer les articles "pairs" et "impairs", un seur deux :
.article_summary_even {display:inline-block; inline-block:left;}
.article_summary_odd {display:inline-block; inline-block:right;}
Sont les lignes de mon css.
Je te présente mes meilleurs voeux pour 2012, plein de belles choses pour toi et les tiens, bonheurs, réussites et tout.
Bien cordialement.
Merci pour ce partage : il est bien utile quand on veut modifier la structure de son blog. Je cherchais la solution et je l'ai trouvée chez toi. Enlever les %, (le blog élastique) pour remplacer par des px. Car sur des PC qui ne modifient pas la largeur j'avais un ascenseur en bas avec à droite un grand espace vide. Invisible à l'affichage sauf quand on bougeait l'ascenseur. Et tu as donné le code de ton propre blog !! il faut encore que j'améliore mais un grand merci.
Bonne journée à toi.
S.33
je voudrais faire beaucoup de modification sur mon blog et je viens ici pour demander de l aide et des conseils car j ai tenté les modifications à plusieurs reprise et le resultat etait toujours pas à mon gout.
je voudrais modifié :
-le menu pour le rendre plus jolie (la c est des conseils que je voudrais car j en ai aucune idée de ce que je pourais faire plus qu il soit joli).
-mettre un cadre sur les articles en image que j ai deja crée et que vous pouvez les voir ici (http://idata.over-blog.com/4/83/68/07/design/article/v2/Article_Bottom2.gif ,http://idata.over-blog.com/4/83/68/07/design/article/v2/Article_Cont2.gif et http://idata.over-blog.com/4/83/68/07/design/article/v2/Article_Top2.gif ). mais le probleme à ça c est les liens partage qui coupent le cadre donc je voudrais aussi centré cette ligne (facebook,twiter ..)
-je voudrais aussi crée des cadres pour les modules que j ai pas encore crée
-augmenté les largeurs du blog,je voudrais passé de 980 px à 1100 px,article de 645 px à 692 et module de 250 px à 320 px.(apres je pense qu il faudrait que j augmente la taille de l image arriere article et module mais je sais de combient je vais devoir l augmenté).
voila en gros ce que j aimerai faire.
Un grand merci d avance pour votre aide et pour le blog aussi il aide vrement beaucoup de gens moi y compris.
Bonjour,
Il y a beaucoup trop de question dans ta demande et certaine n'auront pas de réponse de ma part.
Je te renverais vers le forum dont ce fil (clique, c'est un lien):
¸,ø¤º°`°º¤ø,¸ avis sur votre design ¸,ø¤º°`°º¤ø,¸
Pour le reste...
Le cadre des articles
J'ai repris tes lignes de css et en ai ajouté une :
.article {
margin:0.5em 0 1.5em;
padding-bottom:1.5em; background-image:url(http://a7.idata.over-blog.com/4/83/68/07/design/article/v2/Article_Cont2.gif); padding:0px 10px 0px 10px; margin:0px 0px 0px 0px
}
.contenuArticle {
font-size:14px;
line-height:1.6em;
margin:0 0 0.75em;
}
.afterArticle {
color:#333333;
font-family:arial,helvetica;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0;
line-height:1.4em;
margin:0px;
padding:0px 0px 0px 3px;
text-transform:none; background-image:url(http://a10.idata.over-blog.com/4/83/68/07/design/article/v2/Article_Bottom2.gif); background-position:bottom left;
padding:0px 10px 10px 10px; width:100%; margin-left:-10px
}
.beforeArticle {background-image:url(http://a6.idata.over-blog.com/4/83/68/07/design/article/v2/Article_Top2.gif); background-position:top; padding:10px; margin-left:-7px; width:100%}
Le mieux est ceci :
padding-bottom:1.5em;
-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; border:ridge 3px #000000;
}
.date {margin:7px 0px 0px 7px}
Elle peut servir pour tes modules en plus.
par contre je voudrais augmenté la taille des colonnes à peut prés comme je l ai demandé précédemment.
le reste je verrai plus tard.
encore merci pour votre aide
Pour cette partie, je te demande de regarder cet article : http://ledenistest.over-blog.net/article-28621428.html
Tu y laisseras un message si tu ne comprends pas, si tu as besoins d'informations complémentaires.
-le pierd de page n est pas aligné sur les colonnes.
-la colonne module n est pas à sa place
-la taille de la banniere n est pas aligné au colonnes.
maintenant faut que je change le pierd de page et le menu