28172 sujets

CSS et mise en forme, CSS3

bonjours à tous:)

après avoir parcouru le site et le forum, je n'ai pas trouvé de réponse à ma question...

sur mon site, j'ai un positionnement css qui ne réagit pas comme je le voudrais.

c'est ici:

http://www.larbreagoutte.com/spip.php?rubrique7

les rubriques sont contenues dans des boîtes dont voici le code css:


.petite_boite{
	width:235px;
	float:left;
	display:inline;
	margin:  6px 0 6px 10px;
	padding:0;
	}


le problème est que plus les boîtes se remplissent de nouveaux articles, plus la boite en bas a gauche descend.
savez vous si avec le positionnement flottant il est tout de même possible de faire "remonter" la 4eme boîte?

dans le code du site, l'ordre des rubrique est "projet" "vidéo" "libre expression" "le site"

par avance merci pour votre aide.
Bonjour,

Ce que tu obtiens est une conséquence parfaitement logique du positionnement flottant. Voir par exemple:
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html
http://web.covertprestige.info/test/15-organiser-serie-de-flottants-en-colonnes-1.html

Sur le deuxième lien tu peux voir qu'en utilisant la propriété clear (ici un clear: left) pour les blocs impairs, tu obtiens quelque chose de plus intéressant. Attention: le résultat dans IE (6 et 7) n'est pas correct, mais paradoxalement il sera peut-être plus intéressant pour toi.
en créant ceci

.petite_boite2{

	width:235px;

	float:right;

	display:inline;

	margin:  6px 0 6px 10px;

	padding:0;

	}

et en l'appliquant aux deux éléments qui s'affichent à droite
je réussi à refaire monter le petit dernier
Modifié par scott54 (19 Oct 2008 - 15:44)
Ce n'est pas un correctif, tu ne fais que détourner le problème. Si jamais ton deuxième bloc est plus haut que le premier, tu auras à nouveau ce problème. Donc je t'invite à lire et comprendre les pages que j'ai indiqué. Smiley cligne
Modifié par Florent V. (19 Oct 2008 - 19:12)
si j'ai bien compris la "demande" :

il faut qu'il y ai toujours le même espacement entre deux blocs placés l'un au dessus de l'autre, quelle que soit la hauteur de ces blocs

si c'est bien le cas je ne vois qu'une solution : revoir l'agencement de la page en regroupant les blocs mis les uns en dessous des autres

par exemple

<div id="metabloc_gauche" style="float:left">
  <div id="projet"></div>
  <div id="le_site"></div>
</div>

<div id="metabloc_droite">
  <div id="videos"></div>
  <div id="expression"></div>
</div>

parce qu'en regardant
http://web.covertprestige.info/test/15-organiser-serie-de-flottants-en-colonnes-1.html
il y a toujours un moment ou il y aura un grand décalage vertical entre deux blocs (sauf avec ie6 Smiley lol )
Modifié par scott54 (19 Oct 2008 - 19:50)
merci pour vos réponses:)

malheureusement, le fonctionnement des boucles (spip) que j'ai sur mon site ne me permet pas de pouvoir choisir quel boite que je vais donner a tel rubrique.

toutes les rubriques ont le même attribut et se voit "mettre en boite" dans le même morceau de code CSS.

c'est pourquoi je pense que je vais essayer de donner une valeur fixe a chaque boite (2 ou 3 lignes seulement)
je pense que ça solutionnera le problème