Incontournables XHTML / CSS :
| Auteur | Pages : [>] |
|---|---|
| mrprout | # 27 Mar 2008 - 15:25:42  |
| 12 Posts |
Salut à tous ! Voilà je cherche à réaliser quelque chose de particulier, mais je ne sais pas si c'est réalisable ou non, en CSS : Je souhaite créer des colonnes (contenues dans un bloc général), chacune contenant 5 Div alignées verticalement. En gros je veux obtenir quelque chose comme cela à l'affichage : (colonne 1) | (colonne 2) | (colonne 3) | <-- Cette ligne n'est pas affichée, c'est juste une indication Div 1 | Div 6 | Div 11 | Div 2 | Div 7 | Div 12 | Div 3 | Div 8 | Div 13 | Div 4 | Div 9 | Div 14 | Div 5 | Div 10 | Div 15 | ... le hic, c'est que le code XHTML doit impérativement se présenter ainsi : <div id="conteneur"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> <div>Div 5</div> <div>Div 6</div> <div>Div 7</div> <div>Div 8</div> <div>Div 9</div> <div>Div 10</div> <div>Div 11</div> <div>Div 12</div> <div>Div 13</div> <div>Div 14</div> <div>Div 15</div> </div> Comme vous l'avez compris, je ne veux pas faire des groupes de 5 div pour séparer les colonnes, je veux que dans mon code toutes les div soient à la suite... Réalisable ou pas ? J'essaie de trouver des solutions depuis tout à l'heure mais sans grand succès...  Merci d'avance pour votre aide ! @ bientôt |
  |
|
| Antoine Cailliau | # 27 Mar 2008 - 15:30:49 |
 241 Posts |
Est-ce que tes données ne serait pas tabulaire ? Dans ce cas-ci, ne faudrait-il pas utiliser une <table> ? Parfois, il est sémentiquement justifié d'utiliser cette balise. Ne jugeant pas utile de voir pulluler mon nom de famille dans tous les posts, appellez moi Antoine ;) |
| |
|
| mrprout | # 27 Mar 2008 - 15:35:50 |
| 12 Posts |
Salut et merci pour ta réponse  Hé non mes données ne sont pas tabulaires, et l'utilisation d'un tableau dans mon cas ne serait pas du tout approprié. De plus, il se peut que ma dernière colonne ne contienne par exemple que 2 éléments, il n'y en aura pas forcément 5... @++ |
| |
|
| FunK | # 27 Mar 2008 - 15:40:00 |
| 62 Posts |
Bonjour, Je suis plutot d'accord avec Antoine Cailliau , il serait ici utilise d'utiliser un tableau. Sinon pour répondre a ta question tu pourrai faire des class css qui position t'es éléments, c'est l'aborieux et chiant , mais je ne voit pas d'autre solution. Donc sa te donnerai quelque chose qui resemble a sa :
Modifié par FunK (27 Mar 2008 - 15:41) |
| |
|
| Florent V. | # 27 Mar 2008 - 15:45:39 |
On va manger des chips.  Modérateur 11460 Posts |
À priori ça ne peut pas marcher. Il va falloir regrouper les éléments dans des blocs (div ou td) pour les placer ainsi. FunK: j'ai l'impression que ton début de solution ne mènera nulle part. Mais je peux me tromper, et n'hésite pas à proposer une page de test complète si tu arrives à quelque chose de satisfaisant. |
| |
|
| FunK | # 27 Mar 2008 - 15:50:57 |
| 62 Posts |
Ou sinon on pourrai créer un class pour chaque ligne afin d'y inserér un tableau de 3 <td> ( on peut aussi résonner en colonne ) J'essayerai de mettre dans en forme des que je rentre chez moi  |
| |
|
| mrprout | # 27 Mar 2008 - 15:56:56 |
| 12 Posts |
L'idée de Funk me parait pas mal, en tout cas il m'a mis sur une bonne piste : C'est sur que ca va être un peu laborieux, mais pour chaque div je vais appliquer un "position:relative" et modifier le "top" et "left". De toutes façons je génère mon code XHTML en PHP... Donc c'est possible d'automatiser tout cela sans trop de prise de tête (j'espère) En espérant que ca fonctionne ! Merci à tous pour vos réponses. |
| |
|
| SiDi | # 27 Mar 2008 - 15:57:24 |
| 62 Posts |
Bonjour, S'ils ont une hauteur fixe (sinon une couche de CSS en plus et ça roule) : Un div contenant qui contient les 5 premiers, avec un "height" fixe, et ces 5 là qui sont en float: left. Et voilà Voir par exemple sur cette galerie photo. |
 |
|
| mrprout | # 27 Mar 2008 - 16:04:05 |
| 12 Posts |
SiDi a écrit : Et non car sur ton exemple, les vignettes sont affichées de gauche à droite, puis de haut en bas. Mais moi je veux les afficher D'ABORD de haut en bas, PUIS de gauche à droite... |
| |
|
| Antoine Cailliau | # 27 Mar 2008 - 16:14:22 |
| 241 Posts |
Concrètement, tu veux représenter quoi comme donnée ? Ne jugeant pas utile de voir pulluler mon nom de famille dans tous les posts, appellez moi Antoine ;) |
| |
|
| SiDi | # 27 Mar 2008 - 16:16:49 |
| 62 Posts |
Dans ce cas, c'est bien sur la dernière colonne (et non ligne) qu'il peut y avoir moins de 5 éléments? |
| |
|
| Florent V. | # 27 Mar 2008 - 16:21:12 |
On va manger des chips. Modérateur 11460 Posts |
mrprout a écrit : Hmm... non seulement c'est laborieux, mais en plus c'est une bêtise. À oublier. mrprout a écrit : Alors tu devrais pouvoir générer sans peine un tableau de trois cellules ou trois div, avec les bons contenus dans chaque. Une petite boucle et un peu de modulo, et c'est dans la poche. Bricoler une solution CSS peu fiable quand ça peut être aussi simple, c'est vraiment chercher les ennuis. |
| |
|
| mrprout | # 27 Mar 2008 - 16:26:37 |
| 12 Posts |
SiDi a écrit : Exact, c'est ce que je dis dans ma réponse de 15h35... J'ai dis le contraire ailleurs ?  Antoine Cailliau a écrit : C'est pour afficher le contenu d'un panier, mais l'affichage est particulier car il est traité avec des effets script.aculo.us, et on ne doit pouvoir qu'une colonne à la fois. En cliquant sur un bouton, on déplace la div conteneur de gauche à droite (ou inverse) pour afficher les autres produits. C'est pour cela qu'il fallait respecter une logique d'affichage (les un en dessous des autres, dans l'ordre avec lequel ils ont été ajoutés au panier). |
| |
|
| mrprout | # 27 Mar 2008 - 16:29:27 |
| 12 Posts |
Florent V. a écrit : Oui pour générer un affichage lors du chargement de la page, il aurait été effectivement aisé de faire un tableau HTML généré en PHP. Mais ce que je n'ai pas dit, c'est que certaines div contenues dans les colonnes peuvent être ajoutées ou supprimées avec Javascript (donc sans rechargement de la page). C'est pour cela qu'il est largement plus simple de se passer de tableaux dans ce cas, sinon ce serait un vrai merdier à gérer. Modifié par mrprout (27 Mar 2008 - 16:30) |
| |
|
| Antoine Cailliau | # 27 Mar 2008 - 16:45:25 |
| 241 Posts |
Salut, est-ce que tu connais la largeur de tes div. Sinon, tu peux les faire flotter et imposer une largeur à ton parent. Elles passeront à la ligne quand la largeur est atteinte. Ne jugeant pas utile de voir pulluler mon nom de famille dans tous les posts, appellez moi Antoine ;) |
| |
|
| mrprout | # 27 Mar 2008 - 16:51:45 |
| 12 Posts |
Antoine Cailliau a écrit : Oui, je connais la largeur de mes div. Mais comme je disais, le nombre de ces div est variable, et du coup la largeur du parent est elle aussi variable...  De plus, comme je disais également, je veux D'ABORD afficher les div de haut en bas PUIS de gauche à droite. Or, ta proposition en rapport avec "float" me les afficherait ligne par ligne... Mais je veux bel et bien les afficher par colonnes... Je suis chiant hein ?  Modifié par mrprout (27 Mar 2008 - 16:54) |
| |
|
| SiDi | # 27 Mar 2008 - 16:57:06 |
| 62 Posts |
Calcule le nombre d'éléments (donc nombre par colonne), puis par PHP c'est simplissime. Un contenant de width "GlobalWidth/5", avec des blocs qui se placeront les uns après les autres dedans, puis un autre contenant, etc, etc. Tous les contenants en float:left. |
| |
|
| Antoine Cailliau | # 27 Mar 2008 - 16:59:24 |
| 241 Posts |
mrprout a écrit : Oui Le problème est que cet ordre est contraire à un flux normal d'affichage.Bonne chance quand même Ne jugeant pas utile de voir pulluler mon nom de famille dans tous les posts, appellez moi Antoine ;) |
| |
|
| SiDi | # 27 Mar 2008 - 17:00:32 |
| 62 Posts |
Tant que les données sont en ordre dans le flux de la page, je considère que ça n'a rien de "contraire". C'est peu ergonomique, par contre |
| |
|
| mrprout | # 27 Mar 2008 - 18:21:36 |
| 12 Posts |
Bon même s'il n'y a pas de réelle solution - en tout cas de solution officielle - pour mon problème, je remercie tout le monde d'avoir participé à ce topic @ bientôt ! Modifié par mrprout (27 Mar 2008 - 18:21) |
| |
|
Pages : [>] |
|
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org
Nos partenaires : Editions Eyrolles - Location vacances France - Location vacances Europe
Nikozen : Hébergement - Réalisation : Alsacreations.fr