28217 sujets

CSS et mise en forme, CSS3

[résolu]Les tableaux est moi....:(

Pages :
Bonjour,

Alors depuis que j'ai commencé à apprendre la programmation web, je n'ai fait que du FullCSS.

Hors ça pose enormement de problème d'un navigateur a un autre. Donc je revois ma façon de faire.

Je voudrais créer un gabarit mais en tableaux, et j'arrive pas à faire comme je voudrais Smiley decu , j'ai vraiement pas l'habitude des tableaux.

Voici le gabarit que je voudrais:

http://isis.no-ip.info/beta/gab.jpg

* * c'est les colonne qui contiendront une image en repeat-y
Zut le forum déforme mon déssin...
mais ya pas de height dans un tableau !

C'est un vrai smiblique ces TR et TD Smiley decu

bon là je fais des essais sur mon serveur:

http://isis.no-ip.info/beta/

Merci pour votre aide.
Modifié par Diana (12 Jul 2007 - 23:22)
Bonjour Diana,

a écrit :
Je voudrais créer un gabarit mais en tableaux


Pourquoi souhaites-tu (re)passer des CSS aux tableaux ?
Cela m'intrigue Smiley biggol Smiley smile ?

PS : c'est très fashion le FullCSS et le Tableless Smiley cligne à quand le FullTable Smiley lol .

<edit>
a écrit :
Donc je revois ma façon de faire.

Surtout pas ne bascule pas du côté obscur Smiley smile
</edit>
Modifié par yodaswii (12 Jul 2007 - 18:08)
Salut Yoda,
ben j'ai appris en fullcss, mais les professionnels utilisent les tableaux aussi.
Les forums sont fait avec des tableaux car c'est mieux pour la compatibilité.

Je me prends tout le temps la tête avec cette compatiblité, alors j'ai envie de changer. De faire CSS et tableaux, je pense que c'est mieux.
Modifié par Diana (12 Jul 2007 - 18:08)
a écrit :
Mais les professionnels utilisent les tableaux aussi.

C'est de moins en moins vrai ... bien que c'est toujours d'actualité (je travaille d'ailleurs dans ce milieu) ... mais le contexte est différent. De plus, la frontière est infime entre professionnel et amateur (j'aime pas ce mot ...) : cette communauté en est un exemple Smiley cligne !

Bon : utiliser des tableaux pour surpasser certaines limites des CSS : Ok ! dans les autres cas, ne pas utiliser de tableau Smiley smile . Ne perd pas tes bonnes habitudes ; on se prend toujours des branches d'arbres avec le "FullCSS" Smiley biggol !
zut j'y arrive pas:


<table width="990" border="1" align="center">
<tr><td width="50">x</td></tr>
<tr>x</tr>
<tr><td width="50">x</td></tr>
<td>x</td>

</table>

Smiley decu 

<table width="990" border="1" align="center">
<tr><td width="50">x</td><td>x</td><td width="50">x</td></tr>
<tr><td width="50">x</td><td>x</td><td width="50">x</td></tr>
<tr><td width="50">x</td><td>x</td><td width="50">x</td></tr>
</table>


C'est presque ça, mais je vois pas comment scinder mes 2 colonnes. Smiley bawling
zut pour quoi il me bouscule tout quand je rajoute cette ligne Smiley decu 


<tr><td width="50">x</td><td>x</td><td width="150">x</td><td width="50">x</td></tr>
Diana a écrit :
Bonjour,

Alors depuis que j'ai commencé à apprendre la programmation web, je n'ai fait que du FullCSS.

Hors ça pose enormement de problème d'un navigateur a un autre. Donc je revois ma façon de faire.

Je voudrais créer un gabarit mais en tableaux, et j'arrive pas à faire comme je voudrais Smiley decu , j'ai vraiement pas l'habitude des tableaux.


Bonjour,

Pourrais-tu nous expliquer ce qui te pose problème dans la conception de ce gabarit avec les css ? Ainsi que ces fameux problèmes de compatibilité, qui ne sont pas si insurmontables avec un peu de maitrise.

a écrit :
Les forums sont fait avec des tableaux car c'est mieux pour la compatibilité.


Es-tu bien sûr de cela ? Il y a peut-être bien d'autres raisons Smiley cligne
Bonjour,

Si tu t'es attelé aux CSS comme tu travaille les tableaux, je comprends que tu aies eu du mal.

Rien qu'à lire le bout de code que tu présentes dans ton dernier message (Edit: ah non, le temps que je poste et c'est déjà l'avant-dernier Smiley cligne ), j'ai l'impression que tu n'as jamais lu un seul document sur la syntaxe des tableaux en HTML. Me trompè-je?

Les tableaux en HTML sont définis ici:
http://www.la-grange.net/w3c/html4.01/struct/tables.html

Mais pour de simples petits tableaux de mise en forme, les parties qui t'intéressent sont les suivantes:
http://www.la-grange.net/w3c/html4.01/struct/tables.html#h-11.2.5
http://www.la-grange.net/w3c/html4.01/struct/tables.html#h-11.2.6
(Note: dans les exemples donnés, les rangées (<tr>) ne sont pas toujours refermées, mais mieux vaut le faire.

Ensuite, pour la mise en page des tableaux de mise en forme (...), il existe un moyen sympathique, à savoir... les CSS.

Styler les tableaux avec les CSS (attention, cette fois-ci c'est en anglais):
http://www.w3.org/TR/CSS21/tables.html

Un article peut-être plus abordable, orienté tableaux de données mais adaptable pour des tableaux de mise en forme:
http://openweb.eu.org/articles/tableaux_css/

À noter que pour un tableau de mise en forme, on ne mettrait pas d'attribut summary ou alors un attribut vide, et pas d'élément caption, th, thead, tbody, etc. Juste table, tr et td.
Modifié par Florent V. (12 Jul 2007 - 19:06)
si je prends un de mes exemples sur un de mes sites :

http://isis.123.fr

bon sur IE j'ai utilisé les conditions ça va. Sur Opera il me fait de gros espaces à la fin.

Et puis ma page a été difficile a faire en CSS Smiley decu
Florent V. a écrit :
Bonjour,

Si tu t'es attelé aux CSS comme tu travaille les tableaux, je comprends que tu aies eu du mal.

Rien qu'à lire le bout de code que tu présentes dans ton dernier message (Edit: ah non, le temps que je poste et c'est déjà l'avant-dernier Smiley cligne ), j'ai l'impression que tu n'as jamais lu un seul document sur la syntaxe des tableaux en HTML. Me trompè-je?



Je n'ai jamais utilisé les tableaux, mais mon bout de code je pense qu'il est mieux écrit que certains qui ne respecte pas la syntaxe.
Diana a écrit :
si je prends un de mes exemples sur un de mes sites :

http://isis.123.fr

Ah d'accord... en fait le fond du problème c'est que tu n'as jamais fait de CSS selon les normes... donc forcément ça n'aide pas.

Tu as un gros problème de qualité de ton code, qui contient du déchet (voir le code source en début du site que tu indiques), pour lequel tu n'utilises pas de Doctype complet, etc. Donc, forcément, ça merde.
Diana a écrit :
Je n'ai jamais utilisé les tableaux, mais mon bout de code je pense qu'il est mieux écrit que certains qui ne respecte pas la syntaxe.

Celui auquel je faisais référence, qui vient du message suivant, est une horreur.
Heureusement, ça s'améliore grandement par la suite, et on obtient un code HTML qui effectivement semble tenir la route. Smiley smile

Pour compléter ma réponse ci-dessus: le code du site que tu indiques fait que ce site est interprété par les navigateurs non pas en mode Standard, mais en mode Quirks. C'est à dire que chaque navigateur interprète ça un peu à sa sauce, parce qu'il considère que c'est un vieux site d'avant les CSS. Smiley cligne

Pour faire les choses bien, que l'on utilise que le positionnement CSS ou aussi des tableaux de mise en forme, il faudrait travailler dès le départ de la conception du site en mode Standard. Pour cela, la page doit commencer par un Doctype valide et complet (HTML 4.01 ou XHTML1, Strict ou Transitional), et ne pas avoir de caractères avant le Doctype.
Depuis que j'ai apprise le W3c il n'y a pas d'erreur alors je vois pas ou cela pose un problème.
Florent V. a écrit :

Ah d'accord... en fait le fond du problème c'est que tu n'as jamais fait de CSS selon les normes... donc forcément ça n'aide pas.

Tu as un gros problème de qualité de ton code, qui contient du déchet (voir le code source en début du site que tu indiques), pour lequel tu n'utilises pas de Doctype complet, etc. Donc, forcément, ça merde.


Il y a préalablement un problème de HTML, avant de s'ateler à CSS et repasser aux tableaux Smiley cligne
oui ya un soucis a ma page et je l'avais pas remarqué car j'utilise PSpad (tidy) qui ne m'a rien signalé donc je croyais que ma page était parfaite.
Je vais rectifier ça.
Florent V. a écrit :

Ah d'accord... en fait le fond du problème c'est que tu n'as jamais fait de CSS selon les normes... donc forcément ça n'aide pas.
Tu as un gros problème de qualité de ton code, qui contient du déchet (voir le code source en début du site que tu indiques), pour lequel tu n'utilises pas de Doctype complet, etc. Donc, forcément, ça merde.


Voilà le problème est rectifié ya juste à revoir un peu le code. Depuis le temps que je fais du css j'ai tout de même appris à travailler selon les normes et au passage je remercie ceux qui m'ont aidé.

Mais le doctype je n'avais pas remarqué qu'il était incomplet et que j'avais mal placé mon php, on a le droit d'etre tete en l'air parfois.

Il est valide au WC3 http://isis.123.fr
Modifié par Diana (12 Jul 2007 - 19:41)
En faite il me manquait des données à la lecture des pages citées plus haut soit :

<td colspan="x">
et
<tr rowspan="x">

Mais je n'ai pas l'habitude donc j'ai des essais à faire.

Mais je comprends pas pourquoi PSpad me met des DocTypes réduits, je pige pas là .

Et à mr Florent: Ya til dautres déchets toxiques dans mon code ? moi j'y ai mis tout mon coeur et mes compétences pour faire cette page web pas aussi facile à faire que ça.

Et dailleurs je fais un petit coucou à Jean Denis qui m'a corrigé le script PHP Smiley cligne

Merci messieurs Smiley cligne
Modifié par Diana (12 Jul 2007 - 22:00)
a écrit :
Et à mr Florent: Ya til dautres déchets toxiques dans mon code ? moi j'y ai mis tout mon coeur et mes compétences pour faire cette page web pas aussi facile à faire que ça.


Le coeur et les compétences ne sont (malheuresement) pas suffisant Smiley cligne .
Florent V., comme à son habitude (et il a bien raison), tente de recadrer les choses ... cela ne peut t'être que profitable Smiley cligne .
Pages :
Sujet clos
Aller à