Transformer une structure table en div/css - Page 1

Voila, le pbm est simple, j'ai un site (sisi)

la structure est fait a partir de table (car a l'époque je n'avais pas envie de me faire chier avec des css/div pour représenter ça) et la je cherche comment faire la meme chose mais en css/div.

Le problème, c'est que je ne veux pas avoir 15mills div dépendant de la skin, et il me semble impossible de faire la meme chose sans avoir l'équivalent d'un div pour une case de tableau (hors spaceurs.)

Le problème viens du fait que je veux que le tableau prenne 90% de la taille de la fenetre (en largeur) et que la longueur ne soit pas fixe, et pour ça avec les tableau j'utilise plusieurs images :

le coin haut gauche :

le coin haut droit :

une barre en haut :

une barre a droite :

une barre a gauche :

une barre en bas :

le coin bas gauche :

le coin bas droit :

Cf la page de test : Fichier joint : testcss.htm

On ne peut définir qu'une seule image de background...

J'aurais aimé n'avoir besoin que d'un seul div pour représenter tout ça, ou au pire un <div class="header"/><div class="main"/><div class="footer"/> masi bon meme ça je sens que ça ne va pas etre possible..

Est-ce que quelqu'un aurais une idée ?

Salut, je crois qu'il va bien falloir utiliser plusieurs <div>. tout simplement parce que tu veux que ta page soit dépendante de la taille du média affichant (si j'ai bien compris).
Sinon j'ai regardé ton testcss.htm ... tu semble faire un :

<div class="main">
blabla
</div>

Le problème comme tu le dis c'est qu'avec la norme actuelle de CSS, il est impossible de définir plusieurs backgrounds donc une technique que j'utiliserai ici serait de mettre ton image de titre (logo Godzil) dans le div :

<div class="main">
<img src="jensaisrien.jpg" alt="logo du site">
blabla
</div>

Ensuite cela de permet de définir ton background avec la bande verte et blanche et en mettant le padding/margin sur le bottom de l'image tu retrouve ton blabla à sa place. Néanmoins je te conseille de faire un <div id="contents"> pour tes blabla car les positionnement n'en seront que facilités.

Bref le css/div est loin d'etre capable de remplacer de bonne vielles tables..

T'as jeté un oeil là-dessus ?
http://www.w3.org/TR/REC-CSS2/tables.html
(par contre, IE6/7 ne le supportent pas )

oui mais ça me demande de faire ma page d'une maniere précise... ce que je fais déjà avec des tableau classiques, donc j'ai pas spécialement envie de tout refaire pour ne pas avoir plus de souplesse..

Les tables sont "censées" être utilisées pour contenir des données d'un même types et non pour effectuer une mise en page de la page ... Je pensais comme toi au début mais je suis vite arrivé au fait : le CSS et bien plus pratique. Par contre je suis d'accord avec toi : pour un site déja fait c'est trés ennuyant de le rafaire pour suivre ces normes ... par contre les prochains ... on compte sur toi .

Le problème, c'est que les tables c'est simple a mettre en place, les DIV/CSS c'est un peu plus chiant. Si pour avoir le meme rendu utiliser c'est aussi complexe en terme de source d'un coté que de l'autre (cad avoir autant de bloc div que de cellule de tableau) le tableau restera vainceur car plus simple a mettre en oeuvre quelque soit l'utilisation qui aurait pu lui etre prévu a la base.

Et comme (par exemple) dans mon cas le passage a des div/css est impossible tel que sans faire un truc vraiment souple non dépendant de la skin, je vais rester sur mon approche actuelle, et faire un template XML+XSLT ce que je voulais faire a la base et non un document HTML/DIV-isé+CSS ou je ne pourrais pas séparer contenu/contenant de maniere correcte.

Et c'est ce que je disait ailleurs, les CSS sont pour bidouiller le rendu d'une page, mais pas pour abstraire les données de l'affichage, la ou le XML l'est

Je ne suis pas d'accord... le <table> n'a rien pour être le "vainqueur", il engendre une page plus importante et donc un temps de chargement lui aussi important (même si avec les débits actuels ça peut préter à sourire). Nénamoins, une feuille de style CSS ne sera elle chargée qu'une seule et unique fois pour un site... Le changement de mise en page est lui aussi facilité. Franchement je ne vois pas ce que tu trouve de difficile dans ta mise en page! Suis les instructions que j'ai donné plus haut, je suis sur que tu aura le même résultat !

Sauf que, pour le design de mon cite, je suis obligé de mettre un div par cellule de tableau, donc c'est aussi lourd, et je n'ai pas besoin de CSS pour faire paraitre les div comme un tableau, et le changement de mise en page sera tout sauf facilité. Bref, en plus a l'heure actuelle ou la majoritée des connection internet migrent vers du "haut débit" envoyer une page de 20Ko au lien de 10Ko est assez négligeable.. Si il y a des optimisation a faire sur 99% des sites c'est au niveau des medias (image, son, flash & co) qu'au niveau des pages HTML.

Ensuite obtenir le meme resulta ok mais ça ne rendra pas plus facile a modifier le site si demain j'ai envi de faire une skin radicalement différente alors que je peut tout a fait faire avec du XML+XSLT

Le XML + XSLT ne permettra de toute façon que de générer le contenu avec tes tableaux (burgk) mais il te faux toujours du CSS... car les balise font ou center sont à proscrire !

Je vois pas pourquoi XML+XSLT ne permetrait de faire que des tableau

XML/XSL/XHTML powaa

Godzil (./11) :
Je vois pas pourquoi XML+XSLT ne permetrait de faire que des tableau

J'ai pas dit ça ! Je dis qu'il ne permet pas de faire la présentation de ton contenu.

pourtant si..

Génére moi la balise <p>Paragraphe</p> dont la police sera en jaune italique et de taille 10px à partir d'un balise XML <para>Paragraphe</para> en utilisant exclusivement du XML/XSLT car ça m'interesse (en XHTML Strict le résultat bien sur)??

l'utilisation de XML/XSTL n'empeche pas d'utiliser des CSS pour la modification d'apparence des balises HTML...

J'ai l'impression que certain on tendance a confondre la séparation contenu/contenant avec contenant/apparence...

Les CSS on été crée pour permettre de personaliser l'affichage pas de changer radicalement l'apparence d'une page et de certain tag... Je crois que le gros problème viens de la.

Si tu veux faire des pages (ce que je cherche moi) ou tu sépare completmenet apparence et le contenu en n'etant pas lié a un contenant, qui lui est lié a l'apparence ce que tu ne peut pas faire en HTML+CSS pur, rien que l'interface du site dont je parle en #0 demande de faire un contenant spécifique, qu'il soit en table ou en div, ce qui ne change rien au final, les meme problemes se posent et risque meme d'etre plus facilement solvable via des tableau que via des divs qui vont a un moment ou un autre s'accrocher et foirer l'affichage. Mais il est impossible de faire un

<div class="main">blablabla</div>

la ou je peut faire un

<main>blablabla</main>

en xml et avec un simple xslt j'ai le resultat sur mon site ( http://www.godzil.net )

Et pour ton exemple, je te le fais sans soucis d'ailleurs et ce en XHTML Strict (meme si le strict n'a que peut d'interet)

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="para">
    <p style="font: 10px; color: yellow"><xsl:value-of select="."/></p>
  </xsl:template>
</xsl:stylesheet>

bref c'est d'un compliqué...

Voila c'est ce que je voulais entendre ... la technologie CSS reste indispensable (cf le style="font: 10px; color: yellow")! En clair tu te retrouve seulement à mélanger tout ta feuille de style dans ton document généré ... en clair tu perd la moitié des avantages de CSS.... Le XSLT te permettra seulement d'organiser l'agencement entre les différentes parties d'un de tes pages. Mais j'en suis arrivé à ce que je voulais ... tu utilise toujours le CSS et donc même si tu utilise du XSLT pour te faire croire que tu est dans le coup niveau programmation web, eh bien tu ferais juste mieux de débuter par utiliser correctement les technologies "élémentaires" du web...

OU ai-je dit qu'il ne fallais pas utiliser les CSS ?

J'ai dit que les CSS ne sont pas un outil magique avec lequel on peut faire n'importe quoi comme présentation. Et merci je pense avoir fait des pages web avant meme que connaisse la signification du mot WEB, HTML, XTHML CSS & co. alors garde ta morale pour toi merci

Et j'ai fait l'exemple par rapport a ce que tu voulait... Et quand bien meme. Je pense que tu t'enflamme pour pas gd chose tu as tres mal lu ce que j'ai ecrit (ou c'est ptet moi qui ai mal expliqué) le truc c'est qu'on présente les CSS/DIV comme une solution miracle a tout les maux, ce qui est absolument faux, et que c'est génial pour abstraire le contenu de la présentation, ce qui est entierement faux. Le seul moyen d'abstraire contenu/présentation c'est passer par du XML/XSLT et PEUT IMPORTE ce que génére ton XSLT...

Pour reprendre l'exemple du #0 il est impossible de faire une page WEB (donc HTML/XHTML) qui permettent par un simple fichier css de changer l'apparence complet du site sans etre lié a la skin (fait donc une skin qui ressemble rigoureusement a ve que j'ai fait en utilisant qu'un seul <div>

cad que je te donne un fichier XHTML :

<html>
<body>
<div class="main">Blabla</div>
</body>
</html>

Et que la page apparaisse comme cité plus haut.

Tu n'en est pas capable en CSS, mais en XML/XSLT quelque soit ce qui est rendu derriere c'est faisable -point-

Evidemment ... tu n'a qu'une seule et unique balise alors qu'il est impossible (en attendant le CSS3) de définir plusieurs backgrounds ...

Pour reprendre l'exemple du #0 il est impossible de faire une page WEB (donc HTML/XHTML) qui permettent par un simple fichier css de changer l'apparence complet du site sans etre lié a la skin (fait donc une skin qui ressemble rigoureusement a ve que j'ai fait en utilisant qu'un seul <div>

En plaçant tout en absolu ça peut être possible..

perso, il y a une solution assez simple en ce qui concerne le changement de skin radical d'un site sans trop se compliqué la vie, mais il implique du php... donc peut-etre hors sujet...

il utilise le remplacement de "balises" spécifiques dans un fichier template (la méthode classic quoi)

un exemple tout bete que j'ai fait pour l'occasion, et qui permet très facilement de changer de style sans s'embeter :



j'ai fait qu'un seyl style par défaut, et en plus avec des tables (j'ai pas voulu m'embeter)...

Tu arrives à séparer facilement l'aspect graphique du développement ? Parce que ça a pas mal d'implications (nous, quand le service com' nous fournit les visuels qu'ils ont généré, c'est une méga galère )

vi, sans aucun pb, avec ce que je viens de poster

je travail toujours avec ce model de template pour mes créa perso et pro (à adapter, car par exemple celui ci ne sépar pas bien le style du menu du développement, je me suis pas embéter)