Bonjour !

Je suis actuellement en cours de réalisation d'un site internet, enfin d'un design via photoshop. J'ai appris comment découper un design sous image ready.
Jusque là ça va encore.

Mais j'aurais deux ou trois problèmes trop complexe à mon goût. J'ai essayé de me renseigner sur le css et cie mais j'ai abandonné vu la complexité pour moi de ce domaine, rien de bien accessible au parfait zéro... ça parle de header, div et je ne sais quoi mais perso ça m'a vite saoulé. Dommage il parait que c'est LA manière de manier un design du mieux possible.

Tant mieux ça ne risque pas d'être mon cas personnellement.

Bon j'en viens donc au fait

Le design actuel en ligne

Voici ma misérable réalisation, gros joueur de world of warcraft j'ai tenté de créer un espace dédié au groupe de potes avec lesquels je joue. La création a été on ne peu plus simple vu que j'arrive à maitriser photoshop. Puis ensuite j'ai découpé certains morceaux avec image ready puis tenté quelques modifs avec front page.

1 er souci : avec frontpage j'ai des soucis de mosaique. J'ouvre ma page crée via image ready, j'ai donc un espace blanc sur la page non recouvert par l'image centrale. Je fais donc un arrière plan de la page avec la même texture. Mais si j'ai le malheur d'utiliser la mauvaise j'ai une mosaique en arrière plan ce qui est très très laid donc je suis tenu de trouver une texture où ça passe... Comment résoudre ce souci à l'avenir ?

2 eme souci : je souhaite mettre des liens sur les menus. Etant donné que les écritures sont faites sous photoshop et qu'elles font partie intégrante du design c'est pas évident. Gros noob que je suis j'ai essayé de mettre des formes automatique par dessus sans bordure ni fond pour servir de lien par dessus chaque " menu"0.... Résultat ? ben un résultat 0 vu que la forme se barre ou ne répond pas au clic...
Si vous auriez des conseils à ce sujet...

Je suis vraiment paumé avec ce genre de détails donc si il vous était possible de me dépanner en termes simple que je puisse piger quelques chose...

Je vous remercie d'avance.

PS : pour réaliser un design-site quel serait la meilleure combinaison de logiciel après photoshop ?

image ready ? fireworks ? puis drem weaver ou frontpage ? le tout utilisé par un gros zéro bien sûr : moi

Bon déjà, le reflex "image Ready" n'est pas le meilleur. Et vu que tu semble t'être penché un peu sur les CSS, je pense que tu comprendra facilement que tout est plus simple avec un code simple et clair, comme tu le ferais en Xhtml CSS.
 
Si ce que tu veux c'est un tuto pour les zéros, il y a un site qui porte bien son nom et qui te propose ce que tu cherche : http://www.siteduzero.com/tuto-3-6 [...] e-web.html
 
Tu verras, ça peut paraitre un peu long, mais ça va très vite !

Bonjour,
il est vrai qu'en utilisant les CSS, les choses se feraient beaucoup plus facilement.
Tiens un petit coup de pouce
et de 1
et de 2
et de 3
et de 4
 
et j'en passe...

En fait j'ai parcouru un peu toutes sortes de tutos mais le souci qui demeure c'est l'intégration d'un désign en css...
 
J'ai pu voir enfin tenter de comprendre avec difficulté le fonctionnement mais je ne vois que des moyens d'intégrer des couleurs de fond, ce que je souhaiterais c'est comprendre comment réussir à faire de même avec mon design sorti de photoshop...

Bon j'ai fouiné à droite à gauche via vos liens mais cela ne m'aide pas plus que ça...
 
Je m'explique afin d'éviter toutes confusion :
 
Je crée mon design sous photoshop en 1024 x 768, je fais en fait mon dessin : texture, fond, menus etc etc titre...
 
C'est la suite qui me gêne : j'ai un fichier psd terminé, pourriez vous m'expliquer ensuite la meilleure façon de procéder et avec quel logiciel.
 
Il vaut mieux que je reparte de zéro pour repartir sur de meilleures bases que celles utilisées à présent.
 
Pour le css j'ai vu comment écrire etl texte en bleu, celui là en ceci etc etc mais ce n'est pas ce que je cherche en fait : juste mettre mon design en ligne avec des liens sur le menu point c'est tout et je me rends compte que c'est un peu la croix et la bannière...
 
NB je viens de voir un tuto sur ce forum où la démarche est expliquée mais désolé je n'y pige rien du tout
 
NB2 : est ce possible de découper ce psd et coder (?) en css pour que chaque tranche d'image soit à sa place initiale ensuite ?  
 
dixit mon exemple actuel : la quasi totalité est un seul morceau à l'origine ! tout est ensemble, je n'ai pas crée plusieurs images que j'ai superposé : la texture, les menus, le titre, les images tout est ensemble à l'origine... Donc est ce que déjà c'est réalisable ?

Attends, attends  
Bon première chose à savoir c'est le format image pour le web. Tu as le jpg, le gif et le png (l'avenir même si pas encore au point chez Microsoft - pour ne pas changer!).
 
Tu comprends donc que ton psd ne te servira pas grand chose pour le web.
 
Néanmoins, j'insiste et j'exige que tu apprennes le CSS  lol
Blague à part, en fouinant un peu partout je t'ai trouvé ceci qui j'espère pourra t'aider. Je n'ai pas essayé mais en le parcourant, tu comprendras un peu mieux les CSS tout en y integrant ton design.
 
Si tu ne comprends pas, bein...reviens. Mais pas de suite car moi c'est l'heure de  

raaaaaaaaaaaaa tu me sauves ! voilà la réponse à ma question je me suis mal expliqué au début ^^ Géant ce tutos je vais essayer ça dès demain ^^ merci msieur

voilà qui est chose faite ! Superbe ! merci à ce tuto d'exister
 
Bon maintenant il me reste à savoir une chose : mon code css est il optimisé ? je suppose que non mais qu'est ce que cela veut dire optimisé ? qu'est ce que on entends par là ?
 
http://pikafr.free.fr/site/site.html
 
je remets l'adresse, je n'ai pas ajouté la texture d'arrière plan pour le moment...
 
PS : une question au passage : si je veux mettre une texture d'arrière plan sans qu'elle devienne mosaique comment puis je faire ? ceci afin d'éviter d'avoir à mettre obligatoirement une texture unie...

 
Si je comprends bien ce que tu demandes, dans ton div tu dois lui demander que le background ne se répete pas sans quoi une mozaique sera créée:
 

 
@+

ok ok de cette façon ma texture remplira le blanc sans effet de mosaique... Mais comment connaitre l'endroit exact pour mettre ce code ?
 
désolé je ne veux pas jouer les boulets mais de cette façon j'arrive plus à progresser plutot que de faire des bêtises en jouant sur la page de code.
Avec votre aide je peux prendre mes marques ce qui est utile pour des projets futurs vu que j'aurais mes repères ^^
 
Une autre question : j'ai tenté de centrer mon design, j'ai pu voir
 

 
sur ma feuille css via notepad, j'ai donc essayé comme un bon gros débutant de changer absolute par center pour en fait centrer mon design en milieu de page mais à priori ce n'est pas tout à fait bon, ça a en effet modifié la place de certaines images mais pas comme voulu  
 
J'ai pu lire sur la toile que centrer ce genre de choses était assez complexe mais sans trouver une réponse claire à ma question : je veux dire par là il y a des codes réponses mais quand à savoir où ranger ça    
 
PS : merci de votre patience ^^

Bon!
Je te réponds assez rapidement afin que tu ne perdes pas espoir et ne t'arrache les cheveux  
 
Comme tu peux constater dans ton code tu as

 
Ce qui signifie que tu as une largeur de 1024 et une hauteur de 468px, qui à mon sens doit être le bloc principal de ta page. Il se colle à 0px à gauche et 0px au dessus. Ce qui veut dire qu'il sera mis contre le bord sup gauche.
Si tu veux que ton image de fond prenne toute la page, il faut avant tout que cette image est la dimension du bloc sans quoi tu auras un espace blanc(vide).
Tu peux donc demandé qu'il te place l'image d'arrière plan sans la répétition.
 
Voilà, je dois me sauver.
Mais avant tout essaie de bien comprendre les differents tutos. Ils sont bien fait. Moi, ça m'a beaucoup aidé.
 
@+

merci pour ces généreux conseils je vais me mettre à l'oeuvre