28173 sujets

CSS et mise en forme, CSS3

Changer l'ordre du flow

Bonjour,

Est-il possible, si j'ai 4 div consécutifs dans le code d'une page html (div1, div2, div3, div4), en changeant juste le CSS, de les afficher dans n'importe quel ordre (ex: div2, div4, div1, div3), et ce sans connaître la hauteur de ces divs.

Merci,
JB
Salut, oui, c'est tout à fais possible, en appliquant des float left et right sur les bons div. Aprés, il me semble que c'est pas tip-top pour les lecteurs d'écrans (ils vont le lire dans l'ordre du doc HTML je crois), et pas forcément d'une utilité extréme, à moins que tu ne puisse pas changer l'ordre de ton HTML. A+
Il peut y avoir d'autres moyens, comment sont positionnés tes div? En flux ou en absolu?

Sinon, instinctivement, je passerais par un bon vieux include en php plutôt. C'est un peu du cas par cas, en fonction du positionnement choisi et de la mise en page.
Merci pour la réponse rapide.

Il me semble qu'avec des float, je devrais effectivement pouvoir faire un affichage vertical:
div2 | div4 | div1 | div3
quoique je suis pas sur de pouvoir générer n'importe quel ordre il me semble.

Mais je souhaite faire un affichage horizontal:
div2
div4
div1
div3

Et la ca me semble quand même compromis.

Je tiens a préciser qu'il s'agit plus d'une "proof of concept" que d'un réel cas pratique.

Merci,
JB
Vikchill a écrit :
Il peut y avoir d'autres moyens, comment sont positionnés tes div? En flux ou en absolu?


Pour le moment ils ne sont pas positionnés.

Je pose le code ci-dessous, je voudrais échanger l'ordre de div1 et div4 par ex (et pouvoir rajouter ou enlever du texte dans un div sans avoir a changer le CSS).


<div id="container">
<p>div container</p>
	
	<div id="div1">
		<h1>Div 1</h1>
		blabla
	</div>
	
	<div id="div2">
		<h1>Div 2</h1>
		blablaLorem Ipsum
	</div>
	
	<div id="div3">
		<h1>Div 3</h1>
		blabla
	</div>
	
	<div id="div4">
		<h1>Div 4</h1>
		Lorem Ipsum is si
	</div>

</div>


et le style qui fait pas de positionnement:


#container {
	border: 1px solid #000;
	padding: 10px;
}

#container div {
	margin-bottom: 10px;
	padding: 5px;
}

#div1 {
	border: 1px solid #000;
	background-color:#FF9900;
}
#div2 {
	border: 1px solid #000;
	background-color:#CC3399
}
#div3 {
	border: 1px solid #000;
	background-color:#339999
}
#div4 {
	border: 1px solid #000;
	background-color:#669933;	
}
Bien, php est une option ou pas? Parce que, comme dit précédement, ça peut être une alternative autrement plus simple qui pourrait répondre à tes besoins, je pense.

[EDIT]
Vi cocci, mais le jour où il veut échanger la 3 et la 4, ou la 2 et la 1 ça passera difficilement sans changer le CSS
Modifié par Vikchill (15 Sep 2006 - 15:52)
Vikchill a écrit :

Vi cocci, mais le jour où il veut échanger la 3 et la 4, ou la 2 et la 1 ça passera difficilement sans changer le CSS

Si tu change rien au code...ça reste pareil c'est sur...

Par contre, je maintiens mes réserves sur cette pratique au niveau accessibilité, les gourous du genre t'en diront peut-être plus dans le salon approprié

A+
Le but, c'est de changer le display uniquement avec le CSS, donc:
a écrit :
le jour où il veut échanger la 3 et la 4, ou la 2 et la 1 ça passera difficilement sans changer le CSS

c'est pas vraiment le soucis.

a écrit :
Dans ce cas, (juste inverser div1 et 4)
div1 -> float: right
Les autres en float left


Oui, c'est ce que je disais, si je voulais les mettre les uns a cote des autres ca marche (et encore, je pense pas qu'on puisse faire div4|div2|div3|div1). Mais je veux les mettre les uns sous les autres, désolé si je n'ai pas été assez clair.

ET non, php (ou jsp dans mon cas) n'est pas une solution. Le HTML doit rester fixe.
Je parlais de "proof of concept", ma question c'est de savoir si je touche a une limitation du CSS, ou si je peux faire un exemple qui marche.
ET si j'y arrive avec des div, je veux inverser des <tr> d'une table après Smiley murf

Au niveau accessibilité, le problème que tu évoques, c'est le fait que la navigation clavier se fera dans l'ordre du flot (perturbant) ?

Merci,
JB
JB Hurteaux a écrit :

Au niveau accessibilité, le problème que tu évoques, c'est le fait que la navigation clavier se fera dans l'ordre du flot (perturbant) ?

Nan, c'est le problème est qu'un lecteur d'écran lira dans l'ordre du HTML, donc pas dans le même ordre que ce qu'aura la personne à l'écran avec un navigateur classique.
Modifié par coccimaster (15 Sep 2006 - 16:32)
JB Hurteaux a écrit :
Oui, c'est ce que je disais, si je voulais les mettre les uns a cote des autres ca marche (et encore, je pense pas qu'on puisse faire div4|div2|div3|div1). Mais je veux les mettre les uns sous les autres, désolé si je n'ai pas été assez clair.

Ça serait à vérifier, mais si tous les blocs prennent 100% de la largeur du conteneur, ils passeront à la ligne, tout en gardant l'ordre donné par le comportement flottant.

a écrit :
Je tiens a préciser qu'il s'agit plus d'une "proof of concept" que d'un réel cas pratique.

J'aurais tendance à dire que la preuve peut être faite, mais que le concept est mauvais...
Et je me joins aux réserves faites sur les problèmes d'accessibilité. Surtout si l'ordre des éléments est nécessaire pour comprendre l'information générale.
Modifié par mpop (15 Sep 2006 - 17:32)
mpop a écrit :
Et je me joins aux réserves faites sur les problèmes d'accessibilité. Surtout si l'ordre des éléments est nécessaire pour comprendre l'information générale.

Ca me fait penser, dans ce cas, ça limite également l'utilisation des positions absolues et relatives?
JB Hurteaux a écrit :
Au niveau accessibilité, le problème que tu évoques, c'est le fait que la navigation clavier se fera dans l'ordre du flot (perturbant) ?

coccimaster a écrit :
Nan, c'est le problème est qu'un lecteur d'écran lira dans l'ordre du HTML, donc pas dans le même ordre que ce qu'aura la personne à l'écran avec un navigateur classique.


À vrai dire, les deux sont des problèmes d'accessibilité : accessibilité pour les utilisateurs de lecteurs d'écran (à priori aveugles ou malvoyants), et accessibilité pour les utilisateurs de la navigation au clavier (handicap moteur, ou simple préférence personnelle pour la navigation au clavier). Smiley cligne
Modifié par mpop (15 Sep 2006 - 17:35)
coccimaster a écrit :
Ca me fait penser, dans ce cas, ça limite également l'utilisation des positions absolues et relatives?

Oui et non.

Si tu utilises le positionnement absolu pour mettre une information en tout début de page, et que, comme c'est positionné en absolu, tu te fiches de son emplacement dans le code et le mets au milieu ou à la fin... alors là oui, ça pose un problème d'accessibilité.

Mais on peut très bien continuer à utiliser le positionnement absolu, et à plus forte raison le positionnement relatif. Mais il faut garder à l'esprit qu'une page web c'est d'abord le flux, même si on peut paufiner ça par la suite avec le positionnement absolu, fixe ou relatif, ou avec les flottants.
Sujet clos
Aller à