28172 sujets

CSS et mise en forme, CSS3

CSS en clair pour aligner des listes dans un formulaire

J'ai beau regarder tous les tutos du monde, je ne trouve pas de solution claire et précise à mon pb, alors je pose ma question à l'honorable assemblée.

Je suis dans un DIV (c'est comme ca, j'utilise un template acheté).

J'ai un formulaire sur 3 colonnes : la première colonne contient 2 listes et la seconde une seule. Chaque liste a une ligne de légende. Je voudrais bien sur que les bas de listes soient alignés ! Je peux augmenter le nombre de lignes visibles dans chaque listes mais je voudrais le même rendu sous IE et FF ...

Je voudrais faire un positionnement par rapport au DIV conteneur et non par rapport à la page globalement, est ce possible ?

Dois je faire des sous-DIV ou est-ce inutile ?

Je suis débutant en CSS et franchement je trouve ca clair comme du jus de chaussettes.
Smiley eek Merci de votre aide. upload/21367-formulaire.jpg
Hello phwlvs et bienvenue sur le forum, Smiley smile

phwlvs a écrit :
Je voudrais faire un positionnement par rapport au DIV conteneur et non par rapport à la page globalement, est ce possible ?
Oui.

phwlvs a écrit :
Dois je faire des sous-DIV ou est-ce inutile ?
Ça dépend...

L'idéal serait d'avoir une page en ligne (ou à défaut tout le code -html et css- nécessaire pour reproduire ton problème).
Faisons l'exemple au plus simple :

<html>
<body>
Trucs avant le div
<div>
<form>
titre liste 1
<select> ...
titre liste 2
<select> ...
titre liste 3 (la grande)
<select> ...
</form>
</div>
</body>
</html>
Euh... là c'est un peu trop simple. Smiley rolleyes

Je parlais d'un code qu'il suffirait de copier / coller (ce qui est déjà suffisamment fastidieux comme ça) et comprenant notamment un doctype. Tu ne penses pas que c'est à toi (qui demande de l'aide) de nous faciliter la tâche ?

D'autre part et en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Modifié par Heyoan (03 May 2009 - 17:29)
Excuse moi je savais pas que j'avais traversé en dehors des clous.
Et je pensais qu'il était bien plus utile pour moi et pour les autres d'en rester à un cas générique plutot que de rentrer dans des détails sordides.
3 listes, deux petites l'une au dessus de l'autre et une grande, chaque liste a un libellé soit au total 6 éléments 3 libellés et 3 listes, ont est dans un DIV. Je sais pas comment dire plus simple !?

Le doctype c'est ca : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ca change qq chose ?
Modifié par phwlvs (03 May 2009 - 17:46)
phwlvs a écrit :
Et je pensais qu'il était bien plus utile pour moi et pour les autres d'en rester à un cas générique plutot que de rentrer dans des détails sordides.

Et pourtant, ce sont bien souvent les "détails sordides" qui font les cas particuliers...

Comment veux-tu que l'on puisse t'aider si l'on ne sait pas ce que tu as fait, et ce qui ne va pas ? On ne sait que ce que tu cherches à obtenir.

a écrit :

3 listes, deux petites l'une au dessus de l'autre et une grande, chaque liste a un libellé soit au total 6 éléments 3 libellés et 3 listes, ont est dans un DIV. Je sais pas comment dire plus simple !?


C'est simple dit comme ça, et ma réponse simple est : ben oui, et alors, ça marche ?

Tu as un problème, malheureusement on ne pourra pas te dire ce qui fait que ça ne marche pas tant qu'on aura pas vu ce que tu as fait...

a écrit :

Le doctype c'est ca : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ca change qq chose ?



Ca peut *tout* changer, ou rien. Ce que te demande Heyoan, c'est de nous donner soit un lien vers une page en ligne, soit l'intégralité de ton code, HTML et CSS en utilisant les balises de mise en forme du forum.

Avec ça, on fait un copier coller dans un fichier, on teste et on voit le résultat, et on peut examiner le code pour trouver l'origine du pb et la solution.

Toi qui apprécies les choses simples... tu devrais pouvoir comprendre ça ? Smiley cligne
Ok on s'est mal compris. Je ne sais vraiment pas quoi mettre comme code !

J'ai essayé en mettant mes listes dans des DIV avec un css qui faisait du position: relative et modifiait les valeurs de left simplement.
Etonnement : ca décalait bien à gauche mais ca remontait pas au top.
J'ai donc mis un top négatif et ca marchait, enfin sous FF uniquement et pas sous IE ...

Dites moi simplement à priori comment vous résolveriez le probleme et je ferrai les tests.
phwlvs a écrit :
Ok on s'est mal compris.
C'est clair...

phwlvs a écrit :
Je ne sais vraiment pas quoi mettre comme code !
Ben par exemple ton code actuel (qui ne donne pas le rendu désiré). Smiley fou
Smiley eyecrazy
Toi en tant que grand spécialiste émérite et grand gourou du forum tu ferrais quoi en css pour aligner 3 listes sur 2 colonnes ?
Si t'es incapable de donner la moindre piste, peut être qu'il faudrait te remettre en question non ?
Bonjour,

phwlvs a écrit :
tu ferrais quoi en css pour aligner 3 listes sur 2 colonnes ?

Je ferais deux DIV. Un pour la colonne de gauche (contenant deux listes avec un titre chacune), un autre pour la colonne de droite (contenant un titre et une liste). Pour les styles CSS, ça sera sans doute du positionnement flottant. Éventuellement du positionnement absolu ou du display:table-cell, mais la piste du positionnement flottant semble plus sûre.

phwlvs a écrit :
peut être qu'il faudrait te remettre en question non ?

Non.

Bonsoir.

PS: les débats personnels sur les compétences des uns et des autres sont clos. Tout message ou portion de message en ce sens sera supprimé(e). Merci de votre compréhension, ou au minimum de respecter cette règle.
Sujet clos
Aller à