[Résolu] Question de positionnement...

Bonjour,

Je suis en train de créer mon thème wordpress, et j'ai des petits soucis de positionnement...en fait je souhaiterais que ma pagination soit située sous le bloc "entries"+"sidebar", comme sur le schéma ci dessous:



Seulement dans mon code Wordpress, je suis a priori obligé de déclarer mes éléments dans cet ordre là:

<div id="entries"><p>entries</p></div>
<div id="pagination"><p>pagination</p></div>
<div id="sidebar"><p>sidebar</p></div>

du coup, avec un CSS qui ressemble à ça:

#entries{
	text-align: center;
	float: left;
	width: 400px;
	height: 500px;
	background: aqua
}

#sidebar{
	text-align: center;
	float: left;
	width: 50px;
	height: 500px;
	background:fuchsia;
}

#pagination{
	background:gray;
}

mon bloc pagination vient se placer au dessus de la sidebar:



Savez vous comment je peux obtenir quelque chose qui ressemble à mon schéma initial au vu du code html?
Modifié par flipo44 (02 Apr 2018 - 07:42)

Bonjour,

je serais curieux de voir ton morceau de Wordpress, car à priori rien ne t'oblige à rien dans cet outil..

Sinon dans ton cas, c'est relativement compliqué. La première solution qui me passe par la tête serait de définir un conteneur autour de ces trois div et de lui appliquer :

position: relative; 
overflow: auto; 
padding-bottom: la hauteur de ta pagination;

En faisant ça, tu peux conserver tes entries et sidebar en float:left; et appliquer un position:absolute; à ta pagination, en y ajoutant bottom: 0;

C'est relativement crade à mon avis, l'idéal resterait évidemment de pouvoir placer ta pagination après les deux autres div..

J'espère avoir aidé, bonne journée !
Modifié par Ten (16 Nov 2012 - 09:21)

Bonjour Ten,

Merci pour ta réponse. En revanche je ne suis pas sûr de comprendre à quoi sert le "overflow: auto"...

Sinon l'idéal serait bien sûr de résoudre le problème en amont dans ma structure wordpress...Si tu veux y jeter un coup d'oeil je pose la question sur le forum wordpress:http://www.wordpress-fr.net/support/viewtopic.php?pid=382958#p382958

Le overflow:auto; sert à contenir les flottants, afin qu'ils ne débordent pas de leur conteneur.

Je vais jeter un coup d'oeil à ton autre topic

c'est sympa, merci

Du coup j'ai essayé la solution bricolage que tu proposes, sur un exemple basique ça fonctionne, mais je n'y arrive pas sur mon thème WP...en fait mes blocs

<div id="entries"><p>entries</p></div>
<div id="pagination"><p>pagination</p></div>
<div id="sidebar"><p>sidebar</p></div>

sont à l'origine dans un conteneur content, mais pourtant ce conteneur a une hauteur de 0px, je comprends pas comment ça se fait...

cf print screen de firebug:

http://morgan.sotter.free.fr/Capture%20d%3f%e9cran%202012-11-16%20%e0%2014.28.47.png

(visible ici)

C'est du au contexte de formatage : applique un overflow:hidden; à ta div.container et le résultat sera meilleur !

Pour centrer ta pagination, tu n'auras plus qu'à retirer le float et lui mettre un text-align:center; .

Ta div.content n'avait pas de hauteur car tous ses enfants étaient sortis du flux à cause de float. Techniquement parlant, elle était vide !

J'espère t'avoir aidé !

Hello,

Bon finalement on m'a aidé à résoudre le problème en amont, donc j'ai réussi à mettre ma pagination au bon endroit dans le flux.

Quoiqu'il en soit merci beaucoup pour ton aide et tes astuces, j'ai beaucoup appris!

Concernant ton dernier message, effectivement en mettant un overflow:hidden à ma div.container, je n'ai plus cette div.content avec une hauteur de 0px. Seulement je ne comprends pas du tout la logique du truc

Pour moi overflow:hidden ça voulait dire que les éléments qui sortaient visuellement du div n'étaient pas affichés??