Yazerty Posté 27 Mai 2005 Partager Posté 27 Mai 2005 Bonjour, Je viens de changer le design de mon site mais j'ai des problèmes Mes code xhtml et css sont validés au W3C mais cela n'empèche malheureusement quelques petits bugs... Le bug que je voudrais, en premier, résoudre est celui de mes pages qui listent mes billets (ma page d'accueil par exemple). Afin d'éviter que la ligne d'information sur le post ait une ligne réservée et qu'elle ne se retrouve pas à la droite d'une image que j'aurais mis à gauche (exemple : le post intitulé "Le jeu des différences" sur cette page...) je mets une barre de séparation horizontale comme ceci : <div class="post"><h2 id="p90" class="post-title">Le jeu des différences</h2><div class="post-content" lang="fr">le post...</div>[B]<hr class="hr-transparent">[/B]<div class="post-info">les infos sur le post</div></div> Cette class étant définie dans ma feuille de style comme suit : .hr-transparent { clear: both; visibility: hidden;} Mais cela crée un bug d'affichage : Ce qui est situé avant cette barre de séparation s'affiche correctement mais la suite vient se mettre à la hauteur de la fin du contenu de mes 2 colonnes latérales gauche et droite Ma feuille de style est ici. Auriez-vous une astuce me permettant de faire ce que je veux faire (c'est à dire que les infos sur le post aient leur ligne propre) sans pour autant avoir ce très désagréable bug ? Je n'ai sais vraiment pas comment procéder Lien vers le commentaire Partager sur d’autres sites More sharing options...
Compte supprimé Posté 27 Mai 2005 Partager Posté 27 Mai 2005 (modifié) Clear permet d'effacer les float. Si tu veux mettre ta photo sur une ligne, pourquoi ne pas faire : <img class="alone" src="..." ... >et .alone {display: block;} ?? Modifié 27 Mai 2005 par jeroen Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 27 Mai 2005 Auteur Partager Posté 27 Mai 2005 (modifié) Non non mes images sont très bien comme ça, je ne veux pas les changer. De plus utilisant l'outil de blog Dotclear avec du wiki ça serait pas top... Mais ce n'est pas mon image que je veux mettre sur une seule ligne, c'est ma ligne d'information sur le post. Qu'elle aille se mettre après le post, en dessous de la hauteur de l'image donc. Ce qui est dans la zone rouge n'est pas bon : la ligne est en réalité à droite de l'image et continue en dessous. Je veux que cette ligne, ici encadrée en rouge, vienne se mettre dans la zone verte en fait. Je ne sais pas si je suis clair :-? Modifié 27 Mai 2005 par Yazerty Lien vers le commentaire Partager sur d’autres sites More sharing options...
Compte supprimé Posté 27 Mai 2005 Partager Posté 27 Mai 2005 Ca devrait faire l'affaire : .post-info { padding: 0.3em; text-align: right; clear: left;} Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 27 Mai 2005 Auteur Partager Posté 27 Mai 2005 non en enlevant le <hr> et avec .post-info {padding: 0.3em;text-align: right;clear: left;} ça donne le même résultat pour la ligne d'info sur le post mais en plus ça met tout ce qui est en dessous du contenu du premier post de la liste de billets au niveau du bas du contenu des colonnes latérales :^)... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Compte supprimé Posté 27 Mai 2005 Partager Posté 27 Mai 2005 (modifié) pourtant je viens de tester avec Webdevelopper de firefox sur la page http://www.yazerty.net/index.php?Jeux/p2 (jeu des différences) et ça marche : le text passe dessous... (sans enlever le <hr>) Modifié 27 Mai 2005 par jeroen Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 27 Mai 2005 Auteur Partager Posté 27 Mai 2005 Ah bah effectivement en laissant le hr ça marche pour la ligne d'infos sur le post, dsl Par contre il y a bien un bug : les choses qui sont après le contenu du 1er post de la page sont affichées en dessous du niveau du bas du contenu des colonnes Exemple en direct live sur le site là... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Compte supprimé Posté 27 Mai 2005 Partager Posté 27 Mai 2005 (modifié) heu, normalement le clear: left doit effacer le premier float, mais pas le deuxième... j'ai fait un exemple de base qui marche, regarde si tu peux t'en inspirer <html><head><style>.a {float: left;width: 100px;height: 300px;background:yellow;}.b {width: 300px;height: 40px;background:pink;border: 1px solid #000;padding:5;}.d {clear:left;}</style></head><body><div class=a>ceci est ta colonne de gauche qui s'étend jusqu'en bas </div><div class=b> <img src="" style="float: left;width: 150px;height: 150px;background:red;">ceci est le commentaire de ta photo<div class=d>ce text est en clear left, il a effacé le bloc rouge, mais pas le jaune</div></div></body></html> Modifié 27 Mai 2005 par jeroen Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 27 Mai 2005 Auteur Partager Posté 27 Mai 2005 euuh désolé mais je n'y comprends pas grand chose En fait je ne comprends pas tes zones (ce à quoi elles correspondent par rapport à mon cas des 3 colonnes - si une des colonnes est représentée) ni ce qu'il faut faire pour que ça marche. J'ai lu que le "clear" indiquait la position de la zone par rapport à la précédente mais en indiquant gauche ou droite l'explication que j'ai lue me semble bizarre du coup. (pas ce que tu me dis hein) et en faisant un autre <div> uniquement pour le post-info ça ne marche pas non plus ( Ca m'énerve ce truuuc ! En tout cas merci beacoup de m'aider, c'est vraiment très sympa ! Lien vers le commentaire Partager sur d’autres sites More sharing options...
Compte supprimé Posté 27 Mai 2005 Partager Posté 27 Mai 2005 pardon, petite erreur de code, j'ai modifié, tu peux retester (j'ai mis quelques explications...) Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 27 Mai 2005 Auteur Partager Posté 27 Mai 2005 (modifié) Mmm j'ai finalement compris ton truc des colonnes (ton code) mais je ne peux pas faire ça parce que sinon je ne peux pas avoir mes colonnes qui font 20% de la taille de l'écran chacune Edit : ton post précédent n'était pas affiché lorsque j'ai posté cette réponse, je vais reregarder... Modifié 27 Mai 2005 par Yazerty Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 27 Mai 2005 Auteur Partager Posté 27 Mai 2005 Vui mais en fait mes posts sont fait en wiki pour une question de facilité et de rapidité. Le code généré en html quand on met une image dans un post en wiki est le suivant : <img src="img.jpg" alt="tadim bah !" style="margin: 0pt 1em 1em 0pt; float: left;"> Donc impossible de mettre l'image dans un <div> Lien vers le commentaire Partager sur d’autres sites More sharing options...
Compte supprimé Posté 27 Mai 2005 Partager Posté 27 Mai 2005 ca change rien (je viens de remodifier) Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 27 Mai 2005 Auteur Partager Posté 27 Mai 2005 (modifié) J'applique à mon cas mais ça ne débug pas :s #leftSidebar { width: 20%; min-width: 11.5em; float: left;}#rightSidebar { width: 20%; padding: 0; float: right;}.post-info { padding: 0.3em; text-align: right; clear: left;} et pourtant ça marche en simplifié apparemment... jcomprends paaa Modifié 27 Mai 2005 par Yazerty Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 28 Mai 2005 Auteur Partager Posté 28 Mai 2005 oh tiens, comment tu place ta colonne de droite :-? ça vient peut-être de là... Lien vers le commentaire Partager sur d’autres sites More sharing options...
Yazerty Posté 28 Mai 2005 Auteur Partager Posté 28 Mai 2005 bon tant pis j'ai mis toutes mes images centrées et ça marche dans la configuration initiale (sans <hr> ou clear:left...) donc vouala... Merci beaucoup quand même pour ton aide Jeroen ! Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant