Mauvais calage de zones (valide au W3C)

Yazerty · 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

Compte supprimé · 27 Mai 2005

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

Yazerty · 27 Mai 2005

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

Compte supprimé · 27 Mai 2005

Ca devrait faire l'affaire :

.post-info {
	padding: 0.3em;
	text-align: right;
	clear: left;
}

Yazerty · 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 :^)...

Compte supprimé · 27 Mai 2005

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

Yazerty · 27 Mai 2005

Ah bah effectivement en laissant le hr ça marche pour la ligne d'infos sur le post, dsl :unsure:

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à...

Compte supprimé · 27 Mai 2005

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

Yazerty · 27 Mai 2005

euuh désolé mais je n'y comprends pas grand chose :blink: :blush:

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 ! :boude:

En tout cas merci beacoup de m'aider, c'est vraiment très sympa !

Compte supprimé · 27 Mai 2005

pardon, petite erreur de code, j'ai modifié, tu peux retester (j'ai mis quelques explications...)

Yazerty · 27 Mai 2005

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 :huh:

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

Yazerty · 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> :unsure:

Compte supprimé · 27 Mai 2005

ca change rien (je viens de remodifier)

Yazerty · 27 Mai 2005

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 :gueule: :huh:

Modifié 27 Mai 2005 par Yazerty

Yazerty · 28 Mai 2005

oh tiens, comment tu place ta colonne de droite :-?

ça vient peut-être de là... :huh:

Yazerty · 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 !

Connexion

Mauvais calage de zones (valide au W3C)

Sujets conseillés

Yazerty

Compte supprimé

Yazerty

Compte supprimé

Yazerty

Compte supprimé

Yazerty

Compte supprimé

Yazerty

Compte supprimé

Yazerty

Yazerty

Compte supprimé

Yazerty

Yazerty

Yazerty

Veuillez vous connecter pour commenter

Parcourir

Activité