Faire passer un design avec tableau à un design avec div!

Bonjour à tous, ça faisait un moment que je cherchais un design pour faire mon site lorsqu'hier en cherchant sur google je suis tombé sur easycreation.com.
Un site où l'on peut trouver un grand nombre de design, tous plus joli les uns que les autres.
Alors en cherchant dans tout les design qu'il y avait(c'est qu'il y'en a du choix là bas) j'ai trouvé celui que je voulais.
Soit je l'ai téléchargé et tout fier de moi me dis que j'allais commencer à le modifier pour en faire un truc un peu plus perso!
Mais que fut ma déception lorsque j'ai vu que le design était en fait d'un nombre incroyable de tableau.
Moi qui avait essayé de faire un design pour mon site avec le XHTML et le CSS je me suis mis dans la tête de refairece design avec des div aulieu de tableau.
Présomptueux que j'ai été lorsque j'ai eu cette idée, et après un certains temps de prise de tête(à peu près une bonne demi heure :blink: )
j'ai renoncé et me suis dis que j'allais prendre ce design te qu'il était.
Mais là j'ai eu une illumination, je me suis dis que peut-être un zéro allait m'aider et me modifier ce design en tableau pour en faire un design avec des div!
Alors voilà l'adresse où apercevoir ce design, et l'adresse où télécharge ce design(juste trouver le design dans la liste kits graphiques, ensuite html et puis le deuxième kit en partant d'en haut à gauche, et télécharger)!

Alors voilà si quelqu'un a du temps à consacrer pour m'aider je lui en serai reconnaissant parce que moi je ne suis pas capable d'y faire!
Modifié le 21 Dec 2004 - 19:25

Bonjour et bienvenue à toi sur ce forum.


Comme c'est ton premier post, j'imagine que tu as lu récemment Aide/Règles du forum où il est précisé:

a écrit :
16- Ceci est une communauté d'entraide, pas de travail à votre place
Ce forum a pour vocation d'échanger des connaissances. Les modérateurs ne sont pas là pour faire le travail à votre place. Il est donc inutile de demander des scripts tout faits, des codes à faire pour vous. On vous donnera les moyens d'y parvenir vous-même, sans vous apporter le code sur un plateau d'argent.

Donc il faudrait que tu te lances dans la réalisation de ton design et si tu rencontres des difficultés sur certains points les membres du forum pourront certainement t'aider, mais faire à ta place j'en doute.

Il existe également des kits graphiques très recommandables en (x)html et css sur Kooliss par exemple

N'hésites pas non plus à passer par le bar du forum pour les présentations si tu le souhaites.
Modifié le 23 Dec 2004 - 03:00

Oui oui j'ai lu les règles mais j'ai demandé au cas où si quelqu'un ne voulait pas me le faire parce que j'ai galéré pour essayer de le faire, pour rien!On sait jamais, et puis qui ne tente rien n'à rien!

Le site que tu m'as passé ils ont de jolis kits graphique mais et d'une il faut payer, et de deux celui qui m'intérresse c'est celui que j'ai cité dans mon message précédent!
Et puis je vais quand même l'utiliser le kit que j'ai trouvé même si il est fait avec des tableaux.Je vois pas où est le problème et vu que j'en ai trouvé aucun autre, j'ai pas réussis à en faire un correct ni à le modifier pour qu'il soit fait avec des div je vais le prendre tel quel en le modifiant un peu pour qu'il soit exactement comme je le veux!
Et je vais de ce pas me présenter!
Modifié le 21 Dec 2004 - 23:17

Salut,

Tu es sûr que tu ne veux pas tenter à nouveau de modifier ton kit graphique? Je suis certain que si tu te lance des membres viendront à ton secours pour t'aider à compléter cette tâche.

Je ne doute pas que tu ais essayé de faire la conversion table > div/span, mais comme tu ne poste pas ton travail en exemple il est difficile pour nous de t'aider. Aussi il est vrai que c'est un peu difficile au début mais tu n'en sea que plus fier si tu arrive à réaliser cette étape (avec ou sans l'aide de la communauté Alsacréations). Et comme tu es le webmaster du site que tu réalise, je pense qu'il est important pour la suite que tu sache comment il est construit.

J'ai jetté un rapide coup d'oeil à ce kit graphique dont tu parle et rien ne me semble insurmontable pour sa convertion en tabless, à toi de voir si tu sera assez patient et motivé pour que nous puissions te donner un coup de main...

Dans tous les cas bonne chance pour ton site

Ben je vais ré-essayé si tu dis que c'est possible, mais je promets rien parce que je ne suis pas super fort avec les div!
Sinon en fait j'ai essayé de le mmettre avec des div mais comme ça ressemblait à rien j'ai tout effacé pour ne garder que le design que j'ai téléchargé!

Maintenant je vais le modfifier suivant mes envies et ensuite je vais essayer de le faire avec des div!

Je reviendrai sans doute demander de l'aide.

Et merci, surtout que mon projet c'est de faire un jeu et là je fais le design!

Il faut perseverer et surtout ne pas baisser les bras!

As tu regardé les articles de Raphaël concernant la mise en page et la création de modèles en CSS?

Il sont nombreux à te donner de bonnes bases pour démarrer.

http://www.alsacreations.com/articles/

C'est ce que je vais essayer de faire mais reproduire exactement le même design avec des div au lieu de tableaux va être dur et long, enfin pour moi!

J'ai commencé à le faire hier et ben j'ai bien misérer!
Enfin j'en suis qu'au début, seul l'avenir nous dira si je suis un bon ou pas, enfin bon le mot est peut-être un peu fort, au moins assez fort pour faire ça!

Je réponds au lieu d'éditer mon message pour que ceux qui ont déjà posté sur ce post puisse savoir que j'ai rajouté des choses.

Alors j'ai réussi à modifier la partie du bas pour l'instant, c'est-à-dire les 3 cadres où il y a écrit des trucs dedans(enfin sauf un mais on peut donc on fait tout comme)!

En fait cette fois-ci je m'y suis pris autrement, et je dois dire que je suis fier d moi parce que j'y arrive.Bon je dis pas que c'est facile loin, delà, mais je dis que c'est faisable en fait.
En fait j'ai quand même un problème, mais il n'apparait que lorsqu'on modifie la résolution de l'écran, le résultat est que les block bouge masi pas comme il faut.Enfin je finis la partie du haut et je viens vous demander de l'aide!

Je voudrais dre merci à jb_gfx qui m'a donné envie de le faire modifier, et moi même par la même occasion!
Et j'en profites aussi pour dire à raphael que son site est super(c'est bien raphael le webmaster d'alsacreation?) utile et bien fait!
Modifié le 23 Dec 2004 - 23:52

a écrit :
En fait cette fois-ci je m'y suis pris autrement, et je dois dire que je suis fier d moi parce que j'y arrive.Bon je dis pas que c'est facile loin, delà, mais je dis que c'est faisable en fait.

Félicitations. C'est vrai que rien n'est facile, mais le but c'est d'apprendre.
Tu aurais un exemple en ligne pour ton soucis ?

Ah non j'ai pas d'exemple parce que je pense d'abord finir le tout et après vous demandez de l'aide, et donc le mettre en ligne!

Solarius a écrit :
Et j'en profites aussi pour dire à raphael que son site est super(c'est bien raphael le webmaster d'alsacreation?) utile et bien fait!

Bonjour Solarius

... et pour ne pas laisser cette question sans réponse, oui c'est bien Raphaël le patron d'AlsacréationS ... mais ne le répète pas, c'est entre nous, il tient beaucoup au "S" ... et ça le fâche quand il manque
chuttttttttttt !!
Modifié le 24 Dec 2004 - 13:24

Ah autant pour moi j'ai oublié le S!Mais chut faut pas le dire trop fort dominique!

Sinon j'ai fini de refaire le design avec des div mais quelques problèmes persistes, mais eux je n'arrive pas à les régler et je ne vois pas comment les régler!
Alors si quelqu'un veut bien m'aider il me donne son adresse (msn de préférence) et je lui envoi le tout parce que je peux pas mettre en ligne pour l'instant, et j'ai pas envie de prendre un compte sur un hébergeur gratuit!
Merci d'avance!
Modifié le 25 Dec 2004 - 17:55

Le mieux ce serait de poster dans le forum avec les codes qui posent problèmes et la description dudit problème, voire même une capture d'écran. Si c'est un problème dans l'organisation de tes div par exemple, ouvres un nouveau topic. Comme çà à nous tous, tu auras plus de chance que la solution soit trouvée et/ou les pistes pour la trouver, ainsi tout le monde profitera de la solution.

ps:chouette l'avatar.

Mais le problème c'est que je ne sais pas d'où vient le problème justement.
En plus la capture d'écran quand j'essaye de la mettre dans le message l'image elle apparait trop petite, et on n'y voit rien.
Mais vaudrai mieux que je passe le code à quelqu'un de pas trop mauvais et qu'il m'aide en privé parce que je me vois pas trop mettre le code complet de ma page là sur le forum, ça serai un peu gros!

ps:Merci

Solarius a écrit :
En plus la capture d'écran quand j'essaye de la mettre dans le message l'image elle apparait trop petite, et on n'y voit rien.

Pour la petitesse de l'image c'est que le système d'envoi d'images génère une vignette qui permet d'afficher en cliquant dessus l'image en taille réelle. Sinon j'avais écrit cela il y a quelques temps à propos des images:
http://forum.alsacreations.com/topic.php?fid=4&tid=576&s=float#p6096

Bon ben alors voilà le screen du design fait avec des div:


En espérant que ça marche!Et oui ça marche!
Donc voilà je sais pas pourquoi ya des marges, sautrs de ligne(comme vous voulez) qui se sont mis(es) en dessous de certaines images dans la partie du haut!
Modifié le 25 Dec 2004 - 19:47

Pour les marges, les navigateurs munissent chaque élément de marges par défaut dans certains cas, et il n'utilisent pas les mêmes valeurs comme le rendu d'une page qui ne serait pas muni d'une feuille de style, il faut donc si tu souhaites faire une mise en page assez précise définir des margin et padding pour tous les éléments que tu définis dans ta feuille de styles ou alors être plus radical et les supprimer d'un coup:

*{margin:0; padding:0;}

Et les définir à chaque fois pour les éléments qui le nécessitent. Tout en sachant que c'est toujours l'utilisateur qui a le dernier mot avec ses feuilles de style utilisateur.
Avec un peu de code ça serait plus facile . Sinon tu t'en es déjà bien sorti , ça valait le coup d'essayer, non ?

Ps: tu dois avoir un mp

Ben justement j'ai mis ce petit bout de code dans mon fichier css, mais pour la balise body!Peut-être ça a une incidence je n'en sais rien!


ps:tu dois aussi avoir un mp!

Alors la différence entre ces deux règles est importante.

* {
 margin:0;
 padding:0;
}

Sert à mettre à zéro le padding et margin de TOUTES les balises pour les pages qui utiliseront ta feuille de style. Cela permet de regler les problèmes liés aux balises dont le padding/margin diffère d'un navigateur à l'autre.

Tandis que :

body {
 margin:0;
 padding:0;
}

Sert à enlever les marges du body.