18073 sujets

Questions générales et questions de débutants

Div et Table : Problème de réalisation

Bonjour,

je suis un utilisateur des 'table' mais j'aimerais évoluer vers le 'CSS'. Le problème est que personne n'a encore pu me convaincre sur un exemple concret qui est celui ci :

http://desfurets.free.fr/css/

J'aimerais faire la même chose mais en CSS sans avoir autant de Div que de Td sinon, ca sert à rien.

Mon tableau est composé de :

1 image de coin en haut à gauche
1 fond en haut
1 image de coin en haut à droite

1 image de 'bordure' (car dégradé) à droite
Mon contenu
1 image de 'bordure' (car dégradé) à gauche
Cette zone est étirable aussi bien en largeur qu'en hauteur.

1 image de coin en bas à gauche
1 fond en bas
1 image de coin en bas à droite

Sur le lien, c'est le même tableau mais imbriqué.

On m'a proposé ceci :
http://www.hexadec.ch/repository/roundedcorners/

Mais y a trop de div...

Une autre solution?


Portekoi
Modifié par Portekoi (08 Sep 2005 - 16:53)
Bonjour Portekoi,

Voilà un très joli tableau de présentation, qui restera en ce qui me concerne un tableau de présentation.

En effet, ayant déjà vu passer cette petite provoc sur un forum généraliste, je me contenterai de recommander aux membres de ce forum : don't feed the troll Smiley cligne
Modifié par Laurent Denis (08 Sep 2005 - 17:25)
a écrit :
Bonjour Portekoi,

Ayant déjà vu passer cette petite provoc sur un forum généraliste, je me contenterai de recommander aux membres de ce forum : don't feed the troll cligne


Bonjour,

Je ne vois pas où est la 'provoc' et je tombe de haut devant ton post.

J'ai déjà posté ici :
http://www.webmaster-hub.com/index.php?showtopic=15302

Mais n'ayant pas eu une réponse adpaté, je pensais qu'en venant ici, quelqu'un allait pouvoir m'aider.

Ce n'est vraiment pas mon style de 'faire de la provoc' et je ne comprends vraiment pas ta remarque blessante.

Et je ne donnerais pas autant de mon temps aux autres si j'avais été un 'troll' comme tu dis. Smiley fache
Modifié par Portekoi (08 Sep 2005 - 17:30)
Soit, quelques explications dans ce cas :

Portekoi a écrit :
je suis un utilisateur des 'table' mais j'aimerais évoluer vers le 'CSS'. Le problème est que personne n'a encore pu me convaincre sur un exemple concret qui est celui ci :


Evoluer vers CSS:
- n'est pas abandonner les tableaux de présentation lorsqu'ils s'avèrent nécessaires,
- n'est pas nécessairement opter pour le positionnement CSS
- surtout, n'est pas un enjeu réductible à un jeu-concours sur un design fictif. C'est une réponse à des enjeux bien plus réels : la pérennité et la réutilisabilité du contenu, l'évolutivité et l'accessibilité de ses rendus, l'indépendance envers le media. A l'échelle d'un site, et non d'une page.

Que l'on puisse ou non réaliser un joli dessin avec plus ou moins de div que de cellules de tableau est une question relativement grotesque.

Portekoi a écrit :

J'aimerais faire la même chose mais en CSS sans avoir autant de Div que de Td sinon, ca sert à rien.


Faux. Les gains ci-dessus seront là.

Portekoi a écrit :

Mon tableau est composé de :


6 tableaux. Qui démontrent bien que la présentation a priori à l'aide de tableau est lourde. Sans les avantages d'une structure sans tableau en situation réelle. Peu importe le nombre de <div>.
Modifié par Laurent Denis (08 Sep 2005 - 18:12)
a écrit :

- surtout, n'est pas un enjeu réductible à un jeu-concours sur un design fictif. C'est une réponse à des enjeux bien plus réels : la pérennité et la réutilisabilité du contenu, l'évolutivité et l'accessibilité de ses rendus, l'indépendance envers le media. A l'échelle d'un site, et non d'une page.

Que l'on puisse ou non réaliser un joli dessin avec plus ou moins de div que de cellules de tableau est une question relativement grostesque


Quoi? Quel concours? Qui a parlé de ça? Je planche sur un problème, tu me fais passer pour un troll. Pourquoi fictif? c'est une partie de mon futur site.
Tu te permets de me juger sans me connaitre.

Pardon d'essayer de comprendre les avantages sur un exemple concret du CSS par rapport au 'table'.

Tu me fais vraiment passer pour une personne que je ne suis pas.


Portekoi
Comme indiqué en message privé, merci de poser le problème réel dans ce cas, avec la structure effective du site concerné, une url menant à autre chose qu'une page fictive, un contenu lorem ipsum si nécessaire, mais crédible.
Bonjour Portekoi,

Il me semblerait plus simple si tu avais un contenu réalisé et codé (html) à montrer pour savoir s'il est aisé de réaliser ce que tu souhaites, plutôt que de partir d'une coquille graphique vide.

Il manque les éléments html de ton contenu, l'organisation générale de ta page, les éléments de titre, les paragraphes, les listes, y a t-il un header, un (des ?) menu(s), un pied page etc.

Dans le vide pas moyen de se prononcer, d'abord le code html et ensuite une surcouche de styles pour présenter la page comme tu le souhaites.
Bonjour portekoi

Si il y a trop div pas de PB tu fusionnes tes deux images et tu mets cette fusion en background-image et tu utilises deux <div> pour le contenu
Voilà donc ton problème résolu , moins de <div>

J'ai dit une connerie là j'sais pas ?

@+
Modifié par Michel (08 Sep 2005 - 18:37)
A priori si c'est étirable partout je ne vois comment obtenir ta page sans faire la même structure avec des div, maintenant savoir si tu y gagnes quelque chose c'est un autre débat et là c'est vrai que ça sent un poil le troll ton truc... désolé.

Le squelette d'un site en tableaux ou en div peut très bien être semblable, là n'est pas l'avantage. L'intérêt est dans les possibilité de modification de tes 10 ou 15 pages en une seule manip sur ta feuille de style, exemple pour un format de div, une imbrication, une caractéristique de comportement d'une div... etc.

Tu me suis ?... Smiley lol
Bonjour Portekoi,

En partant d'une remarque antérieure :

Igor a écrit :

Dans le vide pas moyen de se prononcer, d'abord le code html et ensuite une surcouche de styles pour présenter la page comme tu le souhaites.


A titre d'exemple si l'on veut faire un bloc contenu avec des coins arrondis on peut très bien ne pas avoir à se poser la question en terme de div.

le document html peut facilement avoir la forme suivante pour une partie contenu


<div>
<p>
Vous êtes ici : accueil > etc...
</p>
<h2>Sous titre du contenu</h2>
<p>
Blablabla
</p>
...

...

<p>
Fin du blablabla
</p>
</div>


Ce type de code on y arrive tout bêtement par la seule considération de structuration du document html et il ne comprend rien de complexe ou exotique.

Et pourtant la question de quatre coins arrondis quand elle se pose ne comporte aucune difficulté.

quelques "id" pour se répérer :

<div id="contenu">
<p id="fil_ariane">
Vous êtes ici : etc...
</p>
<h2 id="sstitre_contenu">Sous titre du contenu</h2>
<p>
Blablabla
</p>
...

...

<p id="last_element">
Fin du blablabla
</p>
</div>


et forme de la css :

#fil_ariane {
stylage pour mettre en background le coin haut gauche
}

#sstitre_contenu {
stylage pour mettre en background le coin haut droite
}

#last_element {
stylage pour mettre en background le coin bas gauche
}

#contenu {
stylage pour mettre en background le coin bas droite
}


Aucune question de div ne s'est posée pour mettre en oeuvre les éléments graphiques concernés.

En espérant que cela t'aide sur les questions de méthode.
Modifié par clb56 (08 Sep 2005 - 21:20)
momo-fr a écrit :

Le squelette d'un site en tableaux ou en div peut très bien être semblable, là n'est pas l'avantage. L'intérêt est dans les possibilité de modification de tes 10 ou 15 pages en une seule manip sur ta feuille de style, exemple pour un format de div, une imbrication, une caractéristique de comportement d'une div... etc.

Tu me suis ?... Smiley lol


Tout à fait,ce tableau est une function php que j'appelle au besoin donc, en suivant ton raisonnement, je n'ai aucun intêret à passer par du CSS Smiley smile

@clb56 : J'ai bien compris ton exemple qui fonctionne dans un tableau fixe en hauteur ET en largeur. Le problème est que sur mon exemple, il y a aussi un dégradé sur le côté. Smiley sweatdrop

Merci à tous pour votre aide Smiley smile . Je pense faire un essai avec un tableau fixe.


Portekoi
Portekoi a écrit :

J'ai bien compris ton exemple qui fonctionne dans un tableau fixe en hauteur ET en largeur.

Smiley rolleyes
Non tu n'as rien compris à mon exemple puisque c'est très précisemment le contraire. C'est justement fait pour fonctionner en hauteur ET largeur fluide
re Smiley rolleyes
Portekoi a écrit :
Merci à tous pour votre aide Smiley smile . Je pense faire un essai avec un tableau fixe.



Bon toujours pas de contenu à se mettre sous la dent, donc toujours pas de solution éventuelle à te donner.

Et je ne suis pas sûr que tu es bien saisi ce qui clb56 t'a montré, mais puisque désormais tu te diriges vers un tableau fixe Smiley biggol .

À tout hasard il existe beaucoup d'éléments susceptibles d'être porteurs de style: Index des éléments html.
clb56 a écrit :

Smiley rolleyes
Non tu n'as rien compris à mon exemple puisque c'est très précisemment le contraire. C'est justement fait pour fonctionner en hauteur ET largeur fluide
re Smiley rolleyes


Avec image de dégradé sur le côté avec une hauteur X ?

Alors non, je n'ai pas bien compris, désolé Smiley decu
Je confirme,

il n'a jamais été question pour moi de de te founir une css correspondant à ce que tu présentes. C'était simplement un exemple de méthodologie de mise en oeuvre d'éléments graphiques à partir d'un codage html pré établi suivant sa logique et sa cohérence propre. A toi maintenant de voir comment ceci peut s'adapter à des envies plus complexes.

Ce n'est peut être pas très facile mais on est tous passé par là. Enfin sauf les vrais génies.

++
Bonjour,

Concernant la méthodologie, je pense l'avoir comprise. Certes, je ne connais pas la syntaxe par coeur mais je sais ce qui existe en CSS dans son ensemble Smiley smile


Merci d'avoir pris le temps de m'aider.


Portekoi
Portekoi a écrit :


Avec image de dégradé sur le côté avec une hauteur X ?

Alors non, je n'ai pas bien compris, désolé Smiley decu


Faut vraiment que tu lache prise sur ta coquille vide graphique et te concentres sur ton code html avant d'envisager quoi que ce soi ave les styles Smiley cligne .
Sujet clos
Aller à