Le CSS et les tableaux

le Dim Juin 04, 2006 11:31

Bonjour à tous !

Comme je l'ai dit dernierement, je refont mon site en CSS.

Avant :

-www.photoshop-creation.com

Apres :

-www.photoshop-creation.info (c'est mon url de test

quand tout sera OK je le redirigerais sur mon .com)

Mais voila mon probleme, j'arrive a tout mettre en CSS, sauf les tableaux.

Je vous invite a lire le source de ma page si vous vous sentez d'attaque pour m'expliquer comment faire...

Je ne sais pas comment organiser mon css pour les tableaux sans écrire trop de chose inutile en faite ^^

D'avance merci à ceux qui se donnerons la peine de m'aider

Bon dimanche !

le Dim Juin 04, 2006 11:36

tout dépend de ce que tu souhaite faire.

si il s'agit du menu comme celui de gauche, alors la oui en CSS c'est mieux

si il s'agit de tableau, de vrai tableau avec des colonnes et des lignes, alors la je ne vois pas l'utilité du css, bien au contraire.

tout a été prévu pour son utilisation, donc chaque choses a leurs place

le Dim Juin 04, 2006 12:08

Tu devrais mettre des alt ou title pour les images de ton menu

le Dim Juin 04, 2006 12:35

Tu peux toujours t'aider de tutorial comme celui-ci :
-http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

C'est pas bien dur il suffit de se mettre dedans.

Edit : essaye de revoir l'ensemble de ton code source car sur le site en .info on trouve ce genre de chose :

Code: Tout sélectionner: /tr> </table>  </body> </html> </div></td> <th width="790" valign="top">

ou encore

Code: Tout sélectionner: </head> <body> <center> <div id="header"> <html> <head> <title>header_5.0</title>

le Dim Juin 04, 2006 12:38

Merci pour ces liens !

Quel est l'intéret des alt ?

En faite je veux le faire pour le menu de gauche, mais aussi et surtout pour les cadres (bienvenu, systeme d'exploitation etc..)

Pensez vous que cela soit nécessaire ?

le Dim Juin 04, 2006 12:45

Le alt est nécessaire si tu veux respecter les normes, mais également pour une question d'accessibilité de ton site et surtout pour le référencement.

Pour savoir s'il est nécessaire de passer ton site tout en css au lieu des tableaux tu peux lire ceci :
-http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Tableaux-ou-Div-petite-comparaison-concrete

le Dim Juin 04, 2006 12:48

J'ai de la lecture pour cet apres midi c'est cool

Je vous tiendrais au courant de l'avancé de mon site

Merci beaucoup !

le Dim Juin 04, 2006 12:50

remy498 a écrit:Tu peux toujours t'aider de tutorial comme celui-ci :
-http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

C'est pas bien dur il suffit de se mettre dedans.

Edit : essaye de revoir l'ensemble de ton code source car sur le site en .info on trouve ce genre de chose :
Code: Tout sélectionner
/tr> </table>  </body> </html> </div></td> <th width="790" valign="top">

ou encore

Code: Tout sélectionner
</head> <body> <center> <div id="header"> <html> <head> <title>header_5.0</title>

En faite je reprend le site car il a été fait via un editeur et j'aime pas trop ca.

Quand tu me cites ce code, que n'aime tu pas ?

le Dim Juin 04, 2006 13:21

Dans une page web, il n'y a qu'une seule balise "html", "head", et "body".

Quand on regarde ton code source, c'est un collage "maladroit" de différentes sources ... Ces balises sont présentes plusieurs fois sur la page.

Sinon, très joli le design !

le Dim Juin 04, 2006 14:41

Si quelqu'un vieux bien me contacter sur mon msn : ngcpowa-arobase-hotmail.com ca serait vraiment super, je comprend rapidement

mais j'aimerais bien une petite explication en direct lol

J'attends qu'on me contacte en attendant je regarde Roland Garros

Merci bien !

le Dim Juin 04, 2006 16:00

Alors voici la fenetre que je veux traduire en div et css :

J'ai tracé vulgairement les découpes des images.

J'ai donc créé mon fichier html suivant :

Code: Tout sélectionner: <div id="fenetre"> <div id="fenetre_haut_gauche"></div> <div id="fenetre_titre"></div> <div id="fenetre_haut_droite"></div> <div id="fenetre_gauche"></div> <div id="fenetre_contenu"></div> <div id="fenetre_droite"></div> <div id="fenetre_bas_gauche"></div> <div id="fenetre_bas"></div> <div id="fenetre_bas_droite"></div> </div>

Je pense que ceci est plutot correct, par contre, le css c'est autre chose :

Code: Tout sélectionner: #fenetre { width: 760px; } #fenetre_haut_gauche { width: 12px; height: 29px; top:0pxpx;left:0px;position:absolute; background-image: url("images_fenetre/informations_01.jpg"); background-repeat: no-repeat; } #fenetre_titre { width: auto; height: 29px; top:0px; position:absolute; background-image: url("images_fenetre/informations_02.jpg"); background-repeat: no-repeat; } #fenetre_haut_droite { width: 13px; height: 29px; top:0px;rigth:0px;position:absolute; background-image: url("images_fenetre/informations_03.jpg"); background-repeat: no-repeat; } #fenetre_gauche { width: 12px; height: 157px;left:0px; position:absolute; background-image: url(images_fenetre/informations_04.jpg); background-repeat: no-repeat; } #fenetre_contenu { width: auto; height: 157px; position:absolute; } #fenetre_droite { width:auto; height:auto; rigth:0px;position:absolute; background-image: url("images_fenetre/informations_06.jpg"); background-repeat: no-repeat; } #fenetre_bas_gauche { width: 12px; height: 22px; bottom:0px;position:absolute; background-image: url("images_fenetre/informations_07.jpg"); background-repeat: no-repeat; } #fenetre_bas { width: 760px; height: 22px; bottom:0px;position:absolute; background-image: url("images_fenetre/informations_09.jpg"); background-repeat: no-repeat; } #fenetre_bas_droite { width: 13px; height: 22px; bottom:0px;rigth:0px;position:absolute; background-image: url("images_fenetre/informations_08.jpg"); background-repeat: no-repeat;}

Et là, rien ne marche

meme les images ne s'affichent pas lol

Alors les experts ?

le Dim Juin 04, 2006 16:28

Si tu ne veux pas avoir de pbs d'affichage avec tes div, indique systématiquement une dtd dans tes docuuments html et n'hésite pas à mettre les propriétés principales de tes boîtes à 0 plutot que de ne pas en mettre...

le Dim Juin 04, 2006 16:30

D'accord, mais c'est quoi dtd ? lol

Quand tu parles des propriétés c'est à dire ? Largeur, hauteur ?

Merci pour cette réponse

le Dim Juin 04, 2006 16:36

IE a son propre modèle d'affichage des div si aucune dtd n'est indiquée dans le document html. Dans ce cas, la valeur de width, la largeur du contenu, inclut l'espacement interne.
pour les dtd : http://openweb.eu.org/articles/differentes_dtd/
Mais note bien que les dernières versions d'ie contiennent quelques bogues d'affichage pour les div... Ainsi, il faut parfois quelques contorsions dans la déclaration des règles CSS...

Propriétés majeures : width, height, margin, padding, border

le Dim Juin 04, 2006 16:39

D'accord ! mais comprend tu ce qui bloque dans mon css pour l'affichage ?

Mon index + CSS + images si quelqu'un veut bien regarder

Edit : Je marche avec des id, je tente peut etre avec des class ?

Le CSS et les tableaux

Le CSS et les tableaux

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne