découpe de tableaux avec photoshop

découpe de tableaux avec photoshop - HTML/CSS - Programmation

Marsh Posté le 15-08-2004 à 04:01:17    

Hello,
Tout d'abord se forum est très bien, c'est le top meme,
Mon probleme c'est que avant je faisait un design sur photoshop et je le mettais en ligne, je passait par dreamweaver pour mettre le texte, et sa marchait bien.
Mais depuis quelques temps, plus rien ne marche : http://artotal.9online.fr/hub.html
je fais ma decoupe a partir de toshop et les tablaux sont pas du tout à leurs place voyez vous meme !
Donc je ne peux plus rien mettre en ligne enfin en design ?
Bien ami[calm]ent.
P S : j'ai réinstaller photoshop mais sa ne s'arrange pas, (version CS)
Je suis completement perdu !


Message édité par artotal le 15-08-2004 à 16:26:15
Reply

Marsh Posté le 15-08-2004 à 04:01:17   

Reply

Marsh Posté le 15-08-2004 à 09:05:03    

belle poursuite

Reply

Marsh Posté le 15-08-2004 à 11:11:38    

Tu devrais essayé de coder à la main, en tout cas beau site, beau design.
Dernier truc, ton CV s'affiche mal avec Mozilla: les titres de rubriques se superposent avec leur contenu. ;)

Reply

Marsh Posté le 15-08-2004 à 11:23:17    

essaye avec image ready, tu doit pouvoir faire un découpage plus précis (c'est toi qui met là où tu veux que ça se découpe)
sinon, change ton titre, de plus, je suis pas sur que ce soit la bonne section... va voir sur graphisme, je pense que c'est plus approprié

Reply

Marsh Posté le 15-08-2004 à 11:25:56    

bobov a écrit :

Dernier truc, ton CV s'affiche mal avec Mozilla: les titres de rubriques se superposent avec leur contenu. ;)

la petite phrase manière de dire "ton code en javascript sert à rien..." [:rofl]
+1 pour la superposition sous firefox

Reply

Marsh Posté le 15-08-2004 à 11:51:44    

Désolé. Pour le moment, je sers le 610*****, va falloir patienter encore un peu avant que je puisse m'occuper de toi...


Message édité par gizmo le 15-08-2004 à 16:26:24
Reply

Marsh Posté le 15-08-2004 à 16:27:53    

J'ai modifié le titre au cas où ce numéro ne s'était pas retrouvé là de manière intentionnelle...
Comme ça a été dit, pour les questions sur Photoshop et autres softs de génération d'HTML (ou du moins un truc qui y ressemble), c'est en effet sur Graphisme que ça se passe.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 15-08-2004 à 20:45:43    

Moi je voulais seulement savoir ou le code déconne afin de rectifier manuellement, sa fait un mois qu'on peux plus mettre des pages en lignes, Pourquoi ?

Reply

Marsh Posté le 17-08-2004 à 02:25:05    

artotal a écrit :


P S : j'ai réinstaller photoshop mais sa ne s'arrange pas, (version CS)
Je suis completement perdu !


 
 
Oui ça fait toujours ça au début mais on s'y fait rapidement.

Reply

Marsh Posté le 17-08-2004 à 22:41:46    

artotal a écrit :


Mon probleme c'est que avant je faisais un design sur photoshop et je le mettais en ligne, je passait par dreamweaver pour mettre le texte, et sa marchait bien.
Mais depuis quelques temps, plus rien ne marche : http://artotal.9online.fr/hub.html
je fais ma decoupe a partir de toshop et les tablaux sont pas du tout à leurs place voyez vous meme !
Donc je ne peux plus rien mettre en ligne enfin en design ?
Bien ami[calm]ent.
P S : j'ai réinstaller photoshop mais sa ne s'arrange pas, (version CS)
Je suis completement perdu !


 
 
à ta place je ferais un remplissage cellule par cellule  
 
par exemple tu as un tableau comme

Code :
  1. <head>...
  2. <style>
  3. td.tdtitre {
  4. background-image: url ("titre.JPG" );
  5. background-repeat:
  6. }
  7. </style>
  8. </head>
  9. <body>
  10. <table width = "100%">
  11. <tr>
  12. <td colspan = "2" class = "tdtitre">
  13. </td></tr>
  14. <tr>
  15. <td class = "tdsimple">
  16. </td>
  17. <td class = "tdsimple>
  18. </td>
  19. </tr>
  20. </table...
  21. </body>


 
ensuite ca sert à rien de réinstaller un logiciel lorsque on a une panne. ca ne sert le cas echeant qu'à avoir des ennuis de réinstallation en supplément de ceux qu'on a deja.  
 

Reply

Marsh Posté le 17-08-2004 à 22:41:46   

Reply

Marsh Posté le 18-08-2004 à 01:18:05    

sa à l'air bien mais j'ai un peu de mal à tout saisir , tu connaitrai un tuto que j'aprenne cette méthode ?¿
Bien ami[calm]ent.

Reply

Marsh Posté le 18-08-2004 à 02:14:25    

meme si je crois comprendre je prefere y aller avec le manuel, je vais essayer mais sa à l'air d'une solution, merci.
En fait sa dit tu met le style dans toutes les cellules... et sa s'arrange !
Merci sa fait un moi que personne ne me donne de reponse si on me dit qu'il faut coder à la main, apperemnet tout le monde code à la main, enfin !

Reply

Marsh Posté le 18-08-2004 à 09:40:05    

artotal a écrit :

apperemnet tout le monde code à la main,


 
Ici oui.
C'est sur Graphisme -> Web Design qu'ils utilisent les softs genre Dreamweaver.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 18-08-2004 à 11:57:37    

artotal a écrit :

meme si je crois comprendre je prefere y aller avec le manuel, je vais essayer mais sa à l'air d'une solution, merci.
En fait sa dit tu met le style dans toutes les cellules... et sa s'arrange !
Merci sa fait un moi que personne ne me donne de reponse si on me dit qu'il faut coder à la main, apperemnet tout le monde code à la main, enfin !


 
 
de toute facon faut y passer. les outils comme DW ne font pas des sites portables.  
 
mais c'est facile. tu découpe ton image de fond en cellules.  
 
si ton ecran est en 1024 x 768 tu fais <table width = "1000"> et dans chaque cellule tu mets une class = "tdl1c1" tu mets width:100px et height:100px si l'image fait 100px.
 
la cellule de droite de la l1c1 est bien sur la l1c2.  
 
j'espere qu'avec ces indications tu vas pouvoir t'en sortir. attention les navigateurs ne fonctionnement pas tous de la meme maniere.  
 
mais seul le codage à la main permet de résoudre ce soucis. La meilleure solution est de faire des dossiers liés à des navigateurs. par exemple tu fais sur IE6 qui est le courant des navigateurs. mais tu as aussi quelques visiteurs sous ie5, alors tu fais une page ie5 tu veux etre compatible avec ns4 tu fais une page ns4. c'est fastifieux mais finalement c'est le plus simple à gérer.  
 
je pense qu'à l'heure actuelle pour etre bon faut prendre des commandes de base genre background-image et vérifier pour IE6 IE5 NS6 gecko et NS4.
 
mais je le redis faut passer par là. j'ai aussi voulu faire via du dw en pensant que ... mais sur 30 personnes qui chargeaient mon site, une 10aine me signalait des erreurs.  
 
Un bon truc lorsque vous faites le site c'est de faire une page d'accueil qui enregistre (mais faut un langage coté serveur comme php) les différents navigateurs des gens qui sont connectés. c'est transpatent pour le visiteur et on peut afficher "site en cours de construction".  
 
et au fait les backgrounds c'est lorsque vous avez du texte au dessus de l'image. sinon suffit de mettre un cellpadding de la table à 0 et entrer l'image sous la forme de la balise <img....> soit
 

Code :
  1. <!-- cellule sans texte dedans. -->
  2. <td>
  3. <IMG SRC = "logo.JPG" heigth = "100" width = "100">
  4. </td>
  5. <!-- cellule avec texte dedans (ou lien)
  6. le style est à mettre entre le head et /head.
  7. -->
  8. <style>
  9. <!--
  10. #l1c1 {
  11. width: 100px; heigth:100px;
  12. background-image: url ("l1c1.GIF" );
  13. }
  14. //-->
  15. </style>
  16. <td id = "l1c1">
  17. </td>


 
en espérant avoir débloqué votre problème.


Message édité par p lejarre le 18-08-2004 à 13:05:40
Reply

Marsh Posté le 18-08-2004 à 14:34:36    

p lejarre a écrit :

de toute facon faut y passer. les outils comme DW ne font pas des sites portables.


 
Et c'est portable de faire un dossier pour chaque navigateur?
 
Va voir là plutôt :
openweb.eu.org


Message édité par pierre6020 le 18-08-2004 à 14:36:05
Reply

Marsh Posté le 19-08-2004 à 02:59:56    

O_o_____super p lejarre©
J'éssaie de suite, je suis ton obligé, merci, merci.

Reply

Marsh Posté le 19-08-2004 à 12:21:31    

pierre6020 a écrit :

Et c'est portable de faire un dossier pour chaque navigateur?
 
Va voir là plutôt :
openweb.eu.org


 
je suis programmeur dans l'industrie. les normes se sont toujours heurtées à l'existant.  
 
un jour j'ai eu quelqu'un de super passionné en C qui plaidait que ce langage allait devenir la référence dans toute l'industrie.  
 
là d
 
 

Reply

Marsh Posté le 19-08-2004 à 12:33:29    

p lejarre a écrit :

je suis programmeur dans l'industrie. les normes se sont toujours heurtées à l'existant.  
 
un jour j'ai eu quelqu'un de super passionné en C qui plaidait que ce langage allait devenir la référence dans toute l'industrie.  
 
là d

clavier blo
 
 
 
 
bon, on va repartir sur un bon vieux troll codage compatible ie ou alors codage aux normes w3c.... déjà vu et ça n'a jamais rien donné de bon comme topic. Je ne rentrerais pas dans ce troll... Ma position pour ceux qui la connaisse pas: w3c. mais j'essaie de rester compatbile avec une majorité de navigateur [:spamafote]

Reply

Marsh Posté le 19-08-2004 à 14:50:29    

Entierement d'accord.
A la limite une CSS W3C et une IE parce que pas le choix,
mais la W3C en priorité.

Reply

Marsh Posté le 20-08-2004 à 03:42:17    

Re,
Comment pourrai t on avoir le cahier des charges des navigateurs et de IE notemment mais pas que lui. Afin de faire sont possible pour que le plus de monde possible voyent les pages.
P S : éxiste en français ?

Reply

Marsh Posté le 20-08-2004 à 09:23:06    

artotal a écrit :


P S : éxiste en français ?


 
même question pour ton message :whistle:


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 20-08-2004 à 09:57:03    

:)
tiens :
Aide-mémoire CSS2 de Patrick Beuzit
 
Je viens de le recevoir,
c'est pas mal.

Reply

Marsh Posté le 20-08-2004 à 11:50:27    

RiderCrazy a écrit :

clavier blo
 
 
 
 
bon, on va repartir sur un bon vieux troll codage compatible ie ou alors codage aux normes w3c.... déjà vu et ça n'a jamais rien donné de bon comme topic. Je ne rentrerais pas dans ce troll... Ma position pour ceux qui la connaisse pas: w3c. mais j'essaie de rester compatbile avec une majorité de navigateur [:spamafote]


 
c'est pas moi qui l'ai lancé.  
 
mais je vais vous dire un truc, j'ai chargé une librairie soi disant qui est compatible de ns4 jusque les dernieres versions. j'avais ie5 à l'epoque.  
 
alors c'est vrai que c'etait pratique à programmer. un jour je vais sous ns4 pour visualiser ce que ca fait. rien ne se passe, je vais dons dans de site sous ns4, rien d'autre que de "erreur  javascript, entrer javascript: pour message d'erreur en clair".  
alors je code une fonction donnée, par exemple celle qui consiste à mettre des images en fond de tableaux, de la manière la plus triviale possible. ensuite si je veux une fonction évoluée, qui va fait des images tournantes, je vais faire aussi de la manière la plus simple possible du genre "document.images[0].src" pour faire tourner.  
 

Reply

Marsh Posté le 20-08-2004 à 13:15:16    

Netscape 4 c'est un peu ce qu'il y a de pire vis à vis des normes :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 21-08-2004 à 04:01:58    

Hello,
Donc j'ai suivi les conseils de p lejarre, mais sous IE les images ne s'affiches toujours pas, avant il acceptait quand meme les tablaux IE il y à peine 6 mois je n'avait pas tout ces problèmes sa doit évoluer en fait( d'autant que c'est IE qui m'interresse)?
Si quelqu'un veux bien m'éclairer, s'il vous plait ?
http://jojo.la.frite.9online.fr/projet.html
 
<HTML>
<HEAD>
<TITLE>hub</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style>
#essai {
 background-image: url(images/projet_01.jpg);
 width: 790px; height: 414;
 background-repeat: repeat;
}
#essai2 {
 background-image: url(images/projet_02.jpg);
 width: 790px; height: 596px;
 background-repeat: repeat;  
}
</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=790 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 <TR>
  <TD id = "essai">  mon texte devrai s'afficher normalement !
   </TD>
 </TR>
 <TR>
  <TD id = "essai2">
  </TD>
 </TR>
</TABLE>
</BODY>
</HTML>
Merci de votre aide.

Reply

Marsh Posté le 21-08-2004 à 06:40:56    

autre chose j'ai fait un découpage d'image ready,
sur firefox aucun probleme, mais sur IE rien ne va plus il ne voie meme pas les images, vous pouvez constatez j'ai fait que deux images pour vous simplifier la vie, la sintaxe pôur moi est bonne ces deux pauvres images dans une cellule ?
et pourtant il fait comme si il ne les trouvais pas!
Pourquoi sa ne s'affiche pas alorshttp://jojo.la.frite.9online.fr/bonus.html

Reply

Marsh Posté le 21-08-2004 à 08:36:07    

artotal a écrit :

autre chose j'ai fait un découpage d'image ready,
sur firefox aucun probleme, mais sur IE rien ne va plus il ne voie meme pas les images, vous pouvez constatez j'ai fait que deux images pour vous simplifier la vie, la sintaxe pôur moi est bonne ces deux pauvres images dans une cellule ?
et pourtant il fait comme si il ne les trouvais pas!
Pourquoi sa ne s'affiche pas alorshttp://jojo.la.frite.9online.fr/bonus.html


 
Si tu fait http://jojo.la.frite.9online.fr/images/bonus_01.jpg tu verra que l'image ne s'affiche pas non plus avec IE :sweat:


Message édité par Flyman30 le 21-08-2004 à 08:36:26
Reply

Marsh Posté le 21-08-2004 à 14:03:41    

si tu peux ne pas réster dans les suggestions, moi je ne sais pas ce qui se passe, c comme devenir fou, j'ai beau raisonner  prendre le temps et tout et je comprend toujours pas ?
merci

Reply

Marsh Posté le 21-08-2004 à 17:07:30    

artotal a écrit :

si tu peux ne pas réster dans les suggestions, moi je ne sais pas ce qui se passe, c comme devenir fou, j'ai beau raisonner  prendre le temps et tout et je comprend toujours pas ?
merci


 
je suppose qu'il y a un soucis dans le nom de l'image essaye de renommer en bonus01.jpg

Reply

Marsh Posté le 22-08-2004 à 00:22:08    

Utilise la méthode de cet   article http://www.alistapart.com/articles/sprites/  
Une image http://www.alistapart.com/d/sprites/blobs.gif
te donne une page http://www.alistapart.com/d/sprites/ala-blobs2.html qui se charge rapidement, plutôt que de charger les découpes une à une.

Reply

Marsh Posté le 22-08-2004 à 00:56:18    

artotal a écrit :

Hello,
Donc j'ai suivi les conseils de p lejarre, mais sous IE les images ne s'affichent toujours pas


 
aie, mais c'est logique y a des erreurs dans ton code. je dirais meme en stock
 
1 - les images existent pas. généralement la convention est pas de les mettre dans un dossier images (ou à la rigueur de les coller dans dossier commun à tout le site situé sur la racine du site). Donc "projet_01.jpg" (attention le nom de fichier doit etre en minuscules, y compris l'extension).
 
2 - généralement faut plutot mettre dans des GIF
3 - il faut mettre les " (guillements) dans les url.  
4 - faut que le tableau ait la meme largeur que les images.  
5 - le body est une horreur, faut pas mettre d'image en fond de body mais une image dans un tableau sinon ca va etre la croix pour superposer les imformations et les graphismes.  
6 - et les " (guillemets) ne sont pas refermés au niveau du body
7 - ensuite le background-repeat: no-repeat; pas repeat;  
8 - dans les styles y a des ; pele mele il faut mettre  
 
background-repeat: (deux points) no-repeat; (point virgule). Des fois tu as des lignes comme width; (point virgule) alors bien sur ca marche pas.  
 
un bon truc pour vérifier les <table> c'(est de mettre border = "1" dans la balise <table>

Citation :

soit <table border="1">

on voit les cellules de la table et on peut vérifier.
 
sinon ca doit marcher avec un peu de méthode.


Message édité par p lejarre le 22-08-2004 à 01:31:45
Reply

Marsh Posté le 22-08-2004 à 11:34:03    

p lejarre a écrit :


 
2 - généralement faut plutot mettre dans des GIF


 
Ça dépend du genre d'image.
Convertir un jpeg en gif n'est pas une bonne solution. S'il n'a pas l'image d'origine il vaut souvent mieux la laisser en jpeg.
Et à tous les coups le png est plus compact que le gif.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 22-08-2004 à 11:38:50    

(le code secret en javascript c'est une blague? [:w3c compliant])


---------------
IVG en france
Reply

Marsh Posté le 22-08-2004 à 11:40:43    

uriel a écrit :

(le code secret en javascript c'est une blague? [:w3c compliant])

euh... non :/

Reply

Marsh Posté le 22-08-2004 à 12:29:54    

antp a écrit :

Ça dépend du genre d'image.
Convertir un jpeg en gif n'est pas une bonne solution. S'il n'a pas l'image d'origine il vaut souvent mieux la laisser en jpeg.
Et à tous les coups le png est plus compact que le gif.


 
faut penser qu'il y a des gens qui ne visualisent pas le png : ceux qui ont de vieux navigateurs.  
 
le GIF est visualisé par tout le monde. On peut faire des animations qui sont pas forcément si triviales que ca.  
 
bon il pèse lourd.  le png fait de maniere plus compacte. mais il faut un editeur optimisé pour ce format. ca coute de l'argent en développement. Ou alors on code selon des scripts et le visiteur a le droit de ne pas activer les javascripts. donc il visualise pas l'animation et le préchargement des jpeg est lui aussi assez long.  
 
alors au final est ce que le GIF est si mal que ca.  
 

Reply

Marsh Posté le 22-08-2004 à 12:34:04    

p lejarre a écrit :

faut penser qu'il y a des gens qui ne visualisent pas le png : ceux qui ont de vieux navigateurs.  


 
Oui, ceux qui ont Netscape 3 ou IE 3.
Combien en reste-t-il ?  
Y a-t-il des sites (à part Google) qui fonctionnent avec ces navigateurs ?
 

p lejarre a écrit :


le png fait de maniere plus compacte. mais il faut un editeur optimisé pour ce format.  


 
Tu le fais en BMP puis avec BMP2PNG tu convertis tout en un coup de manière optimisée. Sinon n'importe quel soft le fait (Paint Shop Pro, et pas mal de softs gratuits).
 

p lejarre a écrit :


Ou alors on code selon des scripts et le visiteur a le droit de ne pas activer les javascripts. donc il visualise pas l'animation et le préchargement des jpeg est lui aussi assez long.  


Je vois pas le rapport :??:


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 22-08-2004 à 12:43:29    

[citation=828754,30,5][nom]RiderCrazy a écrit[/nom]euh... non :/[/citation
 
en effet, on prends un formulaire avec le mot de passe et la page est calculée par le biais du mot de passe.  
 
donc  

Citation :

<head>
 
<script>
<!-
function affichePage () {
var passe = documents.forms[0].elements[0].value;
 
location.href = "ad"+passe+"/index.html";
}
//-->
</script>
</head>
<body>
<form onsubmit = "affichePage ()">
<input type="password" length = "8" maxlength = "8">
<input type="submit" value="connexon">
<form>


 
pour changer de mot de passe on change le nom du dossier en ftp.

Reply

Marsh Posté le 22-08-2004 à 12:49:22    

p lejarre a écrit :

[citation=828754,30,5][nom]RiderCrazy a écrit[/nom]euh... non :/[/citation
 
en effet, on prends un formulaire avec le mot de passe et la page est calculée par le biais du mot de passe.  
 
donc  

Citation :

<head>
 
<script>
<!-
function affichePage () {
var passe = documents.forms[0].elements[0].value;
 
location.href = "ad"+passe+"/index.html";
}
//-->
</script>
</head>
<body>
<form onsubmit = "affichePage ()">
<input type="password" length = "8" maxlength = "8">
<input type="submit" value="connexon">
<form>


 
pour changer de mot de passe on change le nom du dossier en ftp.

C'est pas de ça qu'on parlais (enfin, pas moi en tout cas...). C'est du mot de passe qu'il a mis pour accéder à son CV

Code :
  1. <SCRIPT language="JavaScript" title="G1SCRIPT">
  2. function passWord() {
  3. var testV = 1;
  4. var pass1 = prompt('Entrez votre password []','il vous faut le mot de passe pour accéder à cette page');
  5. while (testV < 3) {
  6. if (!pass1)
  7. history.go(-1);
  8. if (pass1.toLowerCase() == "artotal" ) {
  9. alert('Ok, vous êtes redirigé!');
  10. window.open('http://artotal.9online.fr/C_V.html');//OK
  11. break;
  12. }
  13. testV+=1;
  14. var pass1 =
  15. prompt('Accès refusé. Veuillez recommencer!','mot de passe');
  16. }
  17. if (pass1.toLowerCase()!="artotal" & testV ==3)
  18. history.go(-1);
  19. return " ";
  20. }
  21. </SCRIPT>

Reply

Marsh Posté le 22-08-2004 à 12:59:48    

ui, je parlais de ca aussi, on voit et le mot de passe et la page de destination


---------------
IVG en france
Reply

Marsh Posté le 22-08-2004 à 13:08:55    

antp a écrit :

Oui, ceux qui ont Netscape 3 ou IE 3.
Combien en reste-t-il ?  
Y a-t-il des sites (à part Google) qui fonctionnent avec ces navigateurs ?


 
 
ces gens là ont le droit d'accéder à l'information, à avoir des fonctionnalités interessantes sans avoir à changer de version.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed