Placement d'ojets en css

bonjour,

j'ai un petit souci et je ne m'y connais pas trop en css alors peut etre pouvez vous m'aider.
je travaille avec prestashop et ont peut mettre ce qu'on veut sur la page d'accueil en html.

jusque là tt va bien.
j'ai voulu insérer 3 dewslider, vous pouvez les voir sur la page d'accueil en bas: www.equidepot.fr

j'ai eu beaucoup de mal a les placer comme je voulais, là ils sont bien placés (j'ai utilisé l'éditeur de feuille de style de presta) mais j'ai un grand trou en dessous et je voudrais le supprimer.

j'ai retourné le pb dans tous les sens et je ne trouve pas de solution, de plus avec firebug je n'arrive pas a voir d'ou vient le pb.

je pense que c'est à cause des 3 objets car si je les enlèves je n'ai plus le trou.

pouvez vous m'aider?
merci d'avance.

Bonjour,

le problème est du au positionnement des slider de la colonne de droite en "relative". pour rappel, relative permet de décaler un élément par rapport à sa position normale, mais l'espace de l'élément est toujours réservé dans le flow normal.

quelques liens:
http://www.w3schools.com/css/css_positioning.asp
http://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#sommaire

bref, même si tu décale tes objets vers le haut, l'espace qu'ils auraient du occuper est toujours réservé (c'est ce qui correspond à ton trou). le problème lorsqu'on désactive la propriété "position" est que tes sliders font chacun 350 px de large (donc les 2 colonne font 350*2=700px) et que la div qui les contient n'offre que 690 px de disponible: il faut libérer un peu de place pour que çà tienne.
Modifié par tilsitt (22 Sep 2011 - 22:37)

j'ai désactivé la position relative et réduit la largeur mais je n'arrive plus du coup à placer mes 2 petits sliders à coté du grand et de facon superposé.
pour le moment je les ai tous centré (c'est ce qui faisait le moins moche) mais comment faire pour les remettre comme avant sans utiliser le positionnement relatif.

tilsitt: tes 2 liens ne fonctionnent pas, j'ai un message d'erreur qui dit que l'url est éronnée et ne peut etre chargée.

autant pour moi, j'avais mal rempli les balises pour les liens ^^ c'est réparé.

les liens te donnaient justement des éléments de réponse. le positionnement relatif pose problème dans ton cas puisque l'espace de l'élément reste réservé. il y a 2 solutions:

-utiliser un positionnement absolu ("position: absolute").
-utiliser un positionnement flottant ("float: left" par exemple).

plutot que de me lancer dans de mauvaises explications, je te conseille de lire l'article d'alsacréations que j'ai mis en lien, les deux sont expliqués dedans .

Ici il faut floater. Ne pas utiliser les positions... si tu ne sais pas trop où tu vas
Modifié par jmlapam (23 Sep 2011 - 03:56)

ah ca fonctionne
vous pouvez pas savoir le temps que j'ai pu passer la dessus.
merci beaucoup! je sais pas qi j'avais déjà essayé cette méthode avant il me semble que oui mais en gardant le positionnement relatif et du coup ca devait pas marcher.

merci merci encore...