[Résolu] Problème de float et de div... (encore moi :))

Re bonjour, bon ben encore un petit soucis et ca fait des heures que je suis dessus, pas moyen de trouver de solution...

J'ai des divs qui affichent du contenu avec une fonction javascript et le problème étant que vu qu'elles sont alignées en float (gauche), lorsque j'affiche le contenu la div du dessous passe à droite pour laisser la place à celle du dessus alors que j'aimerais qu'elle descende tout simplement.
Aussi elle fait se baisser celles du dessous mais sur des colonnes différentes.

Voici mon code html simplifié et allégé :

<div class="rss_table"><div class="rss_title">TEST</div>';

<div class="rss_content">
<div class="rss_description">TEST</div><br />
</div>

</div>

(répété x fois...)

et la css associée :

.rss_table {
width:400px;
border: solid 1px black;
margin:5px;
float:left;
}
.rss_title { padding-left:5px;
background-color:#FF9900;
border-bottom: solid 1px black;
font-weight:bold;}

.rss_content { padding:0px;
border-bottom: solid 1px black;
padding:5px; }

.rss_description {
padding-top:5px;
margin:0;
font-size:10px;
color:#CC0000;
font-weight:bold;
display:none;
}

Donc pour résumer dans rss_description j'ai du texte caché qui s'affiche à l'appui du lien, mais lors de l'affichage les divs se placent n'importe comment.

Merci de votre aide
Modifié par rpgmax (28 Jan 2007 - 15:04)

Bonjour,

Pourrais-tu fournir simplement une url ? ça simplifiera les choses

Bonjour.

Juste une remarque : pourquoi utiliser autant de <div>, n'y a-t-il pas de balises plus adaptées ? ( listes de définitions par exemple )
Modifié par CNeo (27 Jan 2007 - 21:13)

Pour poursuivre sur la remarque de CNeo...

Avant :

<div class="rss_table"><div class="rss_title">TEST</div>';
<div class="rss_content">
<div class="rss_description">TEST</div><br />
</div>
</div>

Après :

<div class="rss_item">
	<h3>Bla bla mon titre</h3>
	<p class="rss_content">...</div>
</div>

Et pour le CSS, on peut très bien styler le h3 (ou h1, h2, h4, h5... suivant le niveau de titre de section dont on aura besoin) via un sélecteur comme div.rss_item h3 {...}.

Bien sûr, mon exemple dépendra de la quantité de contenu à afficher pour chaque item. Si on veut afficher un article entier, utiliser un conteneur global div plutôt qu'un paragraphe pour le contenu de l'item.


PS : c'est normal ce « '; » et le <br /> qui trainent dans le code HTML fourni ?
Modifié par Florent V. (28 Jan 2007 - 01:14)

Pour le code oui c'est du php à la base donc j'ai vite enlevé le contenu des echo, le br est de trop en effet

Baissez les + et vous comprendrez le problème

Idem si tout descend cela passe en dessous du footer et n'agrandie pas la zone content

Bref Je prends en compte vos remarques (Florent V. nottament) mais toute aide pour corriger les 2 problèmes me serait utile

Enfin : J'avais testé avec du ul, li etc mais même problème

Merci à tous
Modifié par rpgmax (21 Feb 2007 - 18:48)

Bonjour,

Déjà tu as un positionnement de ton #global en absolute non centré pourquoi?
Pour ton dépassement de footer un clear: both devrait faire l'affaire mais ne reglera pas le décalage.
Pour moi, il faudrait travailler sur 2 colonnes et positionner alternativement tes blocs dans chacune pour régler le dépassement, vu que tu travailles en php cela ne doit pas poser de problème. un overflow: hidden sur le #content devrait le pousser a suivre le contenu.

Merci des renseignements, comme deja dit je suis vraiment novice dans le domaine du full css

Je vais tester tous vos conseils cet après-midi !
Pour le #global je dois lui donner quels attributs alors ?

Enfin pour le positionnement alternatif, quelle technique utiliser ?

Merci beaucoup de votre aide et merci en général à ce forum très utile

Pour le chevauchement du contenu par le pied de page : le pied de page est positionné en absolu, et ne sera donc pas repoussé par le contenu. La solution consiste à réserver un espace vide en dessous du pied de page, par exemple ainsi :

div#global {
	padding-bottom: 2em;
}

Pour le positionnement des flottants, ce comportement est logique. Pour éviter qu'un bloc positionné à gauche ne se retrouve à droite (ou inversement) suite à l'agrandissement d'un bloc situé avant lui, on pourra utiliser la propriété CSS clear sur tous les blocs impairs, par exemple. Internet Explorer gère étrangement le clear, mais pour un rendu sur deux colonnes c'est acceptable. Voir le test suivant :
http://web.covertprestige.info/test/15-organiser-serie-de-flottants-en-colonnes-1.html

Sinon, deux solutions peut-être plus robustes :
- Pour obtenir partout un comportement semblable à celui d'IE pour des flottants sur deux colonnes avec clear dans le test cité ci-dessus, on pourra créer deux colonnes avec deux conteneurs flottants, un pour la gauche et un pour la droite. À l'intérieur, les blocs ne seront pas flottants.
- Pour obtenir partout un comportement semblable à celui de Firefox pour des flottants sur deux colonnes avec clear dans le test cité ci-dessus, on pourra utiliser un tableau HTML (pour l'exemple que tu donnes, ça donnera un tableau à deux colonnes, sur trois lignes, donc six cellules en tout).

PS : pour rappel, non les tableaux cépaleumal.

Cool merci pour les infos, la je suis en train d'améliorer le "tableau" contenant les infos du flux, donc je me retrouve avec plus qu'une seule div comme indiqué, la je l'améliore et vais me plonger dans vos infos

Merci encore, je vous tiens informé, vraiment sympa ce forum pour les débutants des standards web

Voilà j'ai optimisé du mieux que j'ai pu l'arrivée des flux rss dans la page mais je n'arrive pas à comprendre la technique du "clear", faut il le faire sur une liste à puce (ul, li ?) ou puis-je l'utiliser comme çà tel quel.

Quelle est la meilleure technique pour obtenir quelque chose de visuellement agréable et techniquement "potable" (ex : accueil perso google) ?

Merci

Pour la technique du « clear » : il faut pouvoir attribuer un style à tous les éléments impairs. Ce qui demande donc de générer une classe spécifique pour certains blocs, en PHP par exemple (un simple test du compteur de la boucle avec l'opérateur modulo...).

[b]HTML :[/b]
<div class="rss_table impair">...</div>
<div class="rss_table pair">...</div>
<div class="rss_table impair">...</div>
<div class="rss_table pair">...</div>
[i]etc.[/i]

[b]CSS :[/b]
div.rss_table {
	width:400px;
	border: solid 1px black;
	margin:5px;
	float:left;
}
div.impair {
	clear: left;
}

Dac le soucis étant que les flux sont statiques tels qu'ils le sont actuellement, j'ai une fonction en php qui me sort le bloc avec titre et contenu du flux (items...). Je vais voir si dans ma fonction je peux faire passer une variable ayant pour valeur 1 ou 0 pour me sortir une class spécifique mais ce n'est pas très commode (pas à faire mais au final)...

Merci du renseignement

rpgmax a écrit :
Quelle est la meilleure technique pour obtenir quelque chose de visuellement agréable et techniquement "potable" (ex : accueil perso google) ?

Tout dépend de ce que tu veux faire.

Si tu ne veux pas d'écarts vertical entre deux blocs, le float+clear ne me semble pas être la meilleure méthode. Dans ce cas, on fera deux blocs, dont l'un sera flottant :

[b]HTML :[/b]
<div class="rss_bloc">
	<div class="rss_table">...</div>
	<div class="rss_table">...</div>
	<div class="rss_table">...</div>
</div>

<div class="rss_bloc">
	<div class="rss_table">...</div>
	<div class="rss_table">...</div>
	<div class="rss_table">...</div>
</div>

[b]CSS :[/b]
div.rss_bloc {
	float: left;
	width: 400px;
}
div.rss_bloc div.rss_table {
	border: solid 1px black;
}

À noter que l'on peut aussi se contenter de faire flotter le premier bloc (à gauche), et utiliser une marge à gauche de 410px pour le suivant, par exemple.

J'ai fais comme tu m'as dis, à savoir mettre un clear:left pour les impairs, j'ai un résultat quasi niquel (tout ce qui est impair ne bug pas) sous IE (dommage que je ne l'utilise pas...) mais sous Firefox comme tu avais dis, pareil

En fait ce que je veux au final pour simplifier :

La même chose qu'actuellement à savoir 2 blocs par ligne avec un espacement comme c'est le cas actuellement qui ne sont d'ailleurs pas alignés ^^

Puis par la suite je mettrais peut être en place la possibilité pour le visiteur de rajouter ses propres flux donc la on passe dans une logique dynamique mais toujours avec la même fonction, maintenant je ne sais pas quelle méthode utiliser.

Ton dernier exemple peut-il faire l'affaire ??

Edit : Ma fonction génére le code à partir du div "rss_table" jusqu'à la fin de celui-ci...
Modifié par rpgmax (28 Jan 2007 - 14:45)

rpgmax a écrit :
Ton dernier exemple peut-il faire l'affaire ??

Oui.

Dac je vais tenter

Niquel et je sais comment faire pour gérer le dynamisme : permettre à l'utilisateur de choisir de mettre ses flux soit à droite soit à gauche...

Bon ben plus qu'à faire quelques retouches pour rendre le tout plus agréable et je continue, merci beaucoup d'avoir pris la peine de m'aider et finalement... c'est avec les moyens les plus simples qu'on arrive au meilleur résultat, mais encore fallait-il y penser

Merci encore et bonne journée !
Modifié par rpgmax (28 Jan 2007 - 15:04)