Placement div et CSS

[phpmikedu83]

Salut tout le monde,

Je sais qu'il traine par ici des spécialistes des CSS, alors je voudrai juste savoir s'il était possible de modifier l'ordre d'affichage des éléments avec CSS.
Je m'explique:

j'ai un code like this:

<div id="premier_bloc">
et bien plus jolie!
</div>

<div id="deuxième bloc">
j'aime les fraises :-)
</div>

<div id="troisième bloc">
c'est meilleur que la courge
</div>

Et je voudrais que ça s'affiche comme ça:

j'aime les fraises
c'est meilleur que la courge
et bien plus jolie!

Sans que ce soit un positionnement absolu, mais plutôt relatif...
J'espère que j'exprime assez bien mon problème...

Merci d'avance à tous ceux qui pourront m'aiclairer.

PS: désolé pour l'exemple, panne d'inspiration :lol:

 

[foodstyling]

Fait un test avec Lynx, mais il me semble que que tu fais allusion aux prioritées des div. En fait l'important est l'ordre des div sur ta page

 

[PaulArdemue]

( Je ne pense pas que cela soit possible )

 

[nickargall]

Je ne pense pas non plus. J'ai eu la même question concernant des div générées par une boucle en php et dont je voulais modifier l'ordre d'affichage. Pas moyen en CSS, faudrait changer la requete SQL, ou ... suivre le conseil de Hawkeye

 

[dl_fontenay]

En règle général, on essaye de faire en sorte que l'ordre des éléments corresponde au flux (ça permet d'éviter des catastrophes en terme d'accessibilité).
Celà étant posé, si, en plus, tu souhaites n'utiliser que du positionnement relatif pour inverser ton ordre d'affichage ... je dirais que tu ne fais pas dans le simple.
Tu pourais, à la rigueur, jouer sur les valeurs des marges de tes 2 premiers div et la transparence mais autant passer à du positionnement absolu si tu veux être sur du résultat ou tout simplement changer l'ordre de tes div dans le flux.

Voilou

 

[e-kiwi]

c est possible avec plus de détail
est ce que c est un menu gauche / contenu / menu droite que tu veux positionner ? as tu des largeurs fixes ou ca doit s adapter à la resolution ecran ?
en fonction de ce que tu veux au final comme graphisme, y a plusieurs solutions, donc essaye d en dire plus

 

[phpmikedu83]

Merci pour vos éclaircissements ;-)

En fait pour te répondre e-kiwi, ma mise en page est assez complexe et je vois où tu veux en venir pour le positionnement, mais le truc c'est que je pensais qu'il existait quelque chose (d'où me vient cette croyance, je ne sais pas mais il me semble que je l'avais vu quelque part) qui indique via CSS dans le flux tu place tel bloc identifié par tel identifiant derrière tel autre, vois-tu?

Sinon, si c'est pour se prendre la tête avec des positionnements, ça je vous embêterez pas avec ce genre de chose ;-)

 

[e-kiwi]

noin mais par exemple :

si tu veux un site à resolution fixe, une colonne gauche de 150px et une colonne droite de 150px, tu as une facon de l ecrire en css

si tu veux un site qui s adapte à la résolution de l ecran, une colonne gauche de Xpx (ou %) et une colonne droite de Xpx (ou %) tu as une autre facon de l ecrire

si tu veux une colonne centrale ET à l interieur de cette colonne un element à gauche, un centré, et un a droite tu as encore une autre facon de l ecrire

(des fois on utilise la propriété float, des fois position:relative, des fois position:absolute)
donc à chaque disposition que tu veux il y a une solution. laquelle te donner sans savoir ce que tu veux faire ?

 

[phpmikedu83]

Je vois ce que tu veux dire e-kiwi, sans problème ;-)
Mais, ça je sais faire placer en combinant avec les marges ou autre...
j'aurais juste aimé qu'il existat une manière de faire en CSS qui disent tel bloc doit venir dans le flux avant tel autre.

Par exemple, pour afficher les choses d'une certaine façon sur un écran et d'une autre sur une imprimante, sans jouer avec des marges qui donnent l'impression de bricoler :lol:

 

[e-kiwi]

et
#premier_bloc{float:right}
#deuxième bloc{float:left}

ne convient pas ?

 

[phpmikedu83]

et
#premier_bloc{float:right}
#deuxième bloc{float:left}

ne convient pas ?

C'est en effet une solution assez simple, à laquelle je n'avais pas pensé ;-)
Par contre, juste ce qui m'intérresse, et je crois que j'ai ma réponse, cela n'existe pas! c'est bien cela ;-)
A penser pour CSS 3 lol

 

[e-kiwi]

c'est pas ca qui t'interresses ? comprend plus

 

[e-kiwi]

regarde sur un exemple concres par exemple :
copie ca dans une page html

<style>
#menu_haut{height:100px;background:yellow}
#menu_gauche{float:left;width:160px;background:red;height:500px}
#menu_droite{float:right;width:160px;background:blue;height:500px}
#contenu{padding-left:160px}


#bloc{position:relative} 
#bloc .premier_bloc{position:absolute;top:40px};
#bloc .troisieme_bloc{position:absolute;top:20px};
#bloc .deuxieme_bloc{position:absolute;top:0px};
</style>


<div id='menu_haut'></div>
<div id='menu_gauche'></div>
<div id='menu_droite'></div>
<div id='contenu'>

	<div id='bloc'>
		<div class="premier_bloc">et bien plus jolie!</div>
		<div class="deuxieme_bloc">j'aime les fraises :-)</div>
		<div class="troisieme_bloc">c'est meilleur que la courge</div>
	</div>

</div>

tu dis que tu ne veux pas d'absolute, mais c'est pas genant dans ce cas vu qu'ils sont dans un bloc en relatif, tu les place ou tu veux dans ta page

 

[phpmikedu83]

Merci de ton implication dans le soucis que j'ai soumis dans ce topic... J'aprécie beaucoup! ;-)

Effectivement, la solution que tu m'as présentée est la plus judicieuse dans l'état actuel des choses.

Merci encore ;-)