[Résolu] Enlever un cadre blanc

Bonjour,

Je suis en train de modifier mon blog sur blogger pour le personnaliser !

J'avais quelques bases en CSS il fut un temps, mais j'avoue que par manque de pratique, j'ai un peu de mal à me remettre dedans. J'utilise des tutoriels destinés à blogger, mais à chaque fois, ça ne fait pas la même présentation. A force de modification, j'ai réussi à obtenir un résultat satisfaisant sur ce que je souhaitais faire, mais il reste quelques petits problèmes !

Pour l'instant, je n'ai modifié que l'affichage des articles pour qu'ils s'affichent en grille.

J'ai le bon résultat pour ça, mais il reste deux points que je n'arrive pas à régler :

- Autour de l'image et du résumé de l'article, il y a un cadre blanc qui s'affiche alors que je voudrais qu'il n'y soit pas (je voudrais que ça soit de la même couleur que l'arrière plan, à savoir #f5f5f5)

- Je voudrais élargir la zone avec le titre, le résumé de l'article et "lire l'article" pour que le lien lire l'article soit un peu plus bas, mais rentre dans la case.

Mon gros problème, c'est que j'ai du mal à savoir quelle balise css correspond à quel endroit sur le blog, donc un peu de mal à modifier tout ça !

Je n'ai pas modifié le reste du blog pour le moment, donc c'est normal que ça soit n'importe quoi pour le moment.

Voilà le lien :

http://leparadisdesmots.blogspot.fr/

Merci d'avance pour votre aide !

Bonsoir.

Pour le cadre 'blanc', pas de problèmes : l'élément est le '<div class="post-outer">' et il y a une ligne dans sa règle :

padding: 15px 20px;

Supprimez-la ou désactivez-la...

Pour l'histoire du 'lire l'article', c'est difficile de s'y retrouver dans cet enchevêtrement de divs... Et votre site est difficile à charger...

Pour le déboggage d'une page, cet article date un peu :
https://www.alsacreations.com/article/lire/1215-firebug-debug-debogage-web-extension.html
mais il permet de connaitre comment atteindre les outils sur les autres navigateurs. Pour Firefox, il y a belle lurette que je n'utilise plus Firebug mais les outils de développement intégrés de Firefox disponibles dans 'Outils/Développement Web/Inspecteur'. Avec la flèche activée, il est relativement facile de voir quel élément est concerné...

Merci beaucoup, je vais tenter tout ça et je reviens vous voir si j'ai un problème ! ^^

Je n'ai pas fait les div moi même vu que j'ai pris des tuto déjà fait... donc un peu galère. Mais bon au pire, le rendu est convenable pour cette case, donc ça pourrait faire l'affaire et à force de trifouiller, je vais bien trouver ! ^^

Merci encore

Re-bonjour,

Alors je n'ai pas eu trop le temps de m'en occuper avant maintenant.
J'ai tenté de mettre 0 pour la propriété padding: 15px 20px;
Effectivement, le cadre blanc s'enlève en haut et sur les côtés, mais il reste sur le bas, et surtout ça me décale la colonne de droite qui devient plus petite.

Une idée pour résoudre ce problème ?

J'essaie encore de trouver la solution par moi-même mais je n'y arrive pas !

Merci pour le tuyau pour firefox, du coup j'utilise l'outil inspecteur. C'est très utile !


Edit : J'ai arrêté de modifier la page pour montrer ce que ça donne au niveau du cadre blanc et du décalage de la colonne de droite !
Modifié par Melaina (29 May 2017 - 22:15)

Je vous embête à nouveau. J'ai réussi à régler pas mal de soucis, mais à chaque fois, de nouveaux apparaissent. Je suis vraiment pas douée je crois ! ^^

Les catégories, c'est réglé, mais je ne comprends pas pourquoi j'ai un petit rectangle qui apparait en dessous du quadrillage...

De plus, je voudrais modifier la barre latérale de droite. J'ai cherché avec l'outil inspecteur, mais aucune balise ne fonctionne pour modifier le texte et les liens !
Le seul moyen que j'ai trouvé, c'est dans body, mais ça agit sur tout mon blog, donc ça m'arrange pas pour autant...

Merci encore pour votre aide !

Bonjour,

le 'rectangle blanc' est en fait le résultat de cette règle :

.post {
	margin: 0 0 45px 0 !important;
}

Le 45px est un margin-bottom, une marge extérieure basse qui laisse apparaitre le blanc de son élément parent, le div de classe '.post-outer'... Si vous l'enlevez, plus de rectangle. Pourquoi c'était important... Va savoir.

Pour la colonne de droite, la plupart des sélecteurs la concernant sont précédés de :
.column-right-inner
Pour le reste, je ne sais pas quoi vous dire de plus que : le plus simple est de modifier ceux existants... en ayant pris soin de sauvegarder au préalable la version initiale.

Rebonjour,

J'en profite d'avoir ce sujet de créé pour poser une question (la dernière j'espère, car j'ai réussi à régler pas mal de soucis ! )

Lorsqu'on clique sur un article, par exemple :
http://leparadisdesmots.blogspot.fr/2017/05/test-2.html

Je souhaite centrer le titre de l'article. J'ai repéré le code, mais même avec le suivant, ça ne le centre pas. Ca le centre par rapport à la date à côté. Comment faire que ça se centre par rapport à l'article en entier ?

J'ai testé le padding, mais vu que la longueur des titres va fluctuer, ça ne fonctionnera pas.

Ce qui concerne le titre en question :

h3.post-title {
display:block;
font-family: "Open Sans Condensed",sans-serif;
text-align: center;
color:#ef9d87;
font-size: 28px;
}

Ce qui concerne la date :
h2.date-header {
font-family: "Open Sans Condensed",sans-serif;
color: #ef9d87;
size: 11px;
letter-spacing: 1px;
float: right;
}

Merci encore ! ^^

Bonjour.

Le 'float: right' de la date demande aux éléments qui suivent cet élément de lui laisser de la place. (Il y a même un 'span' à l'intérieur qui lui aussi en 'float: right )

Le plus simple - enfin avec le moins de modifications - est sans doute est sans doute de rajouter 'clear: both' à 'h3.post-title' pour annuler l'effet du float pour cet élément.

En fait, le 'float : right' n'a pas d'intérêt - tout en ayant l'inconvénient de poser des problèmes - si il n'y a rien à gauche de lui. Le plus simple - avec beaucoup plus de modifications - était de laisser chaque élément prendre la totalité de la largeur disponible et d'utiliser 'text-align'...

Super, merci !!! Bon, je crois que tous mes problèmes principaux sont résolus. Du coup je vais mettre le post en résolu et je reviendrai vers vous s'il y a un problème

Merci encore !