28172 sujets

CSS et mise en forme, CSS3

Bonjour,
je m'échine depuis plus d'une semaine à transformer mon affichage à base de table en pur css. Et je commence sérieusement à désespérer voire me demander si je que j'essaye est réalisable(?) :
upload/35051-GABARIT.jpg
En fait j'ai réutilisé un tutoriel pour avoir le footer maintenu en bas de page. Le problème provient de la zone centrale :
=> la div "contenu" qui doit couvrir toute la hauteur de la page moins celle du footer du header et de la barre du bas.
=> la div "filtre" doit s'étirer suivant son contenu sans overlapper la div "navigation".
=> la div navigation doit se trouver en bas de page au dessus du footer.

Actuellement j'arrive à mes fins en utilisant un tableau étiré à 100% en hauteur et largeur...
Peut on arriver au même résultat en pur css ? Ou bien est-ce finalement impossible.
Bonjour,

Un tableau est un tableau, pas une disposition de page, donc ta solution pour arriver à tes fins n'en est pas une pour moi. C'est du bricolage...
En CSS tu peux réaliser ton gabarit, pour celà je te conseille de suivre des tutoriels pour débutants en HTML CSS.

A plus !
Merci pour ton avis,
je ne suis pas venu polémiquer sur l'utilité des tableaux et l'usage détourné que l'on peut en faire Smiley cligne Si j'en ai utilisé c'est par ce que mon gabarit me semble irréalisable en pur css...
J'ai pourtant suivi nombre de tutos (pour débutant et autre) et commence à acquérir quelques notions de css et c'est dans le but de peaufiner mon savoir faire que je me suis lancé dans la mise en place de ce gabarit.
Encore une fois, je rappelle que le résultat final semble assez simple et correspond à priori à un gabarit de type header/content/footer avec 2 colonnes semi-fluide pour la partie content et l'utilisation d'un sticky footer pour le garder positionné en bas de page.
Le problème provient véritablement de la zone de content que je n'arrive pas à mettre en place :
avec les divs de "navigation" et "barre de controle" qui sont positionnée juste au dessus du footer => les solutions css que j'arrive à mettre en place me donne un code complètement alambiqué avec les deux divs du bas positionnée en absolue relativement au footer... ce qui me semble anormal ou bien je n'arrive pas à étirée la div du contenu à 100% (même après avoir lu le tuto sur ce site)...
C'est donc tout naturellement après un certains nombres d'essais infructueux que je commence à me demander si ce type de layout n'est tout bonnement pas réalisable en css.

Voilà j'espère que cela t'auras convaincu de mes motivations : je ne suis pas venu poster sans avoir essayé mais plutôt d'avoir trop "essayé" sans arriver à un résultat probant.
Tu pourras difficilement positionner tes bloc comme tel sans tableau. Parfois il vaut mieux faire avec.
Merci de ta réponse bzh !
tu me confirmes donc qu'une solution sans tableau est difficlement implémentable ?
Si personne d'autre ne se manifeste sur le sujet, je garderais donc ma version à base de tableau...
Merci encore à tous ceux qui ont et qui voudrons bien se pencher sur mon problème.
Dypso a écrit :

tu me confirmes donc qu'une solution sans tableau est difficlement implémentable ?

Oui, c'est sûrement faisable avec certaines propriétés css mais ça va être compliqué pour assurer les manquements de certains navigateurs.

Pas sur que ton code soit plus propre au bout du compte.

Je ne fais jamais de design en 100% par 100% et difficile de t'en dire plus sans le design réel.
D'accord, je comprend.
L'appli est en plein écran pour faire plaisir au client : il s'agit en fait d'une appli d'intranet maison et effectivement je préférerais un code aussi propre que possible et solide (rapport à la compatibilité entre navigateur : car affichant du code dynamique (Asp.Net), je veux une structure de layout assez rigide... )
Sinon tu pensais à quelle propriété css en particulier : les display table-cell/table-row...?

Merci.