Bonjour a tous
Je suis nouveau ici et j'ai déjà un petit problème
J'ai créé mon design avec photoshop, et j'aimerai le découper.
Mais je ne sais pas du tout comment faire pour qu'il soit compatible aux normes du w3c, xhtml....
Pour cela, il faudrait le découper avec des div
Est-ce que quelqu'un pourrait m'aider?
voila l'image à découper  
http://pascal.cormier.free.fr/design.jpg
Merci d'avance

Bah tu découpe chaque partie dans une image séparée (header, en tête de menu...) et tu assemble tout ca avec du CSS

Ouai, j'ai déja fait cela, je découper mon design avec fireworks, mais la page qu'il cré automatiquement et construite a partitr de tableau et elle est très lourde.
Je ferais comme ca si je n'est pas d'autres solutions

En fait, Natopsi, bonne chance pour ton bac

Je croit que tu peut positionner tes elements avec des coordonnées (x,y)

g trouvé un tuto
http://www.siteduzero.com/tuto-3-3 [...] s-div.html
Je vais essayer de me débrouiller avec ca.
Je vais commaencer par découper toutes mes images

Ca y est, g découper mes images
reste le code
En fait, qu'eque que vous pensez de mon design?
Je sais que c pas terrible.
Je ne suis pas un expert en graphisme

 
Ben tu réponds à ta question là. Donc y'a plus rien à dire.

Enlève le flou sur l'écriture

daccord

sinon c pas trop mal?
c mon premier vrai design, alors...

Bon, je viens de comprendre comment marcher les div.
Ils fonctionnent comme les tableau, sauf qu'il sont spécialisé dans le design.
G juste un problème :  
 
g une image, baniere, qui fait 156 px de hauteur
pourquoi je la vois en double avec ce code :  
code html :  
<div class="design">
<div class="baniere">
</div>
code css :  
.design
{
 
width : 800px ;
}
 
.baniere
{
background : url("images/baniere.gif" ) left repeat-y ;
padding-top : 156px ;
height : 100% ; /* Pour que toute la place disponible soit utilisée, et qu'ainsi tout le fond soit visible */
}  
 
Je suis obligé de mettre  padding-top : 137px ;  
pour la voir normalement.
G du me trompé quelque part mais je ne sais pas ou.
Je pense qu'il ne faut pas utiliser paddin top.
Pouvez vous m'aider
merci  

http://gatsu.ftp.free.fr/Modele/ro [...] ntage.html
 
Time line :    

 
J'ai mis au point un système de box extensible (cf le menu) qui est composé de 5 div imbriqués et que tu peux reutiliser partout dans la page.

 
Le design est en principe extensible (sauf le header à cause de son image, mais ça peut être réglé facilement). Sinon tu as juste à régler la largeur du menu et paf le reste se dimensionne comme il faut    
 
J'ai aussi revu la largeur de ton site que j'ai porté à 760px, car un user en 800x600 se tapera les scrollers si ton site est en 800px de large.
 
sinon je pense que ton header est beaucoup trop gros, réduit sa hauteur de moitié, ou sinon intègre le titre dans l'image avec les robots
 
sinon, si vous voyez des zoom:1 dans la CSS, c'est normal, c'est une propriété CSS de IE, elle me permet de corriger certains bugs d'affichage en forcant son layout
 
edit : Ah oui : compatible IE5.5+, FF1.x+, Opera 8+, Safari
PS: c'est une mise en page simple, c'est pour cela que j'y ai rajouté quelques petites choses sympathiques
 
Mise à jour : J'ai fait en sorte que tout le site soit Accessible (en parlant en terme d'accessibilité). Donc l'image du header n'est pas chargée, le texte s'affiche quand même
 
Je viens de refaire une dernière update et promis c'est la dernière , j'ai corrigé le bug des 3px float left sous IE et rendu plus compatible l'affichage sous Opera 8.5
donc affichage identique sous IE, FF, Safari, Opera

Il va être content thekiller2 42.
Je trouve ça vraiment sympa de ta part Gatsu35!  

edit: quand tu dis que le design est extensible, tu veut bien dire en hauteur?? ('suis un noob là dedans )

C'est surtout pour que les autres en prenne de la graine et voient que ce n'est pas si compliqué, bien sur ya tout un tas de connaissances derrière et de techniques de hack (ex:display:table, inline-block). Mais ça fonctionne si bien , et là le code est le plus minimaliste possible,
sauf les 5 divs imbriqués pour faire le cadre du block.
 
Jvais regarder si ya pas moyen de se limiter à 3 div pour faire un cadre complet extensible comme on le souhaite

extensible en largeur, en principe un design doit toujours etre extensible en hauteur

re quote, fausse manip de ma part

je comprends pas en quoi elles ont extensibles en largeur
 
Les boites de titre ne sont pas extensibles
je ne comprends pas tout mais il doit être possible de supprimer des divs et d'avoir des boites de titres extensibles en hauteur (parceque là qd on augmente la taille de typo le texte sort de la boite).
 
4 cotés défini pour la première barre de titre (avec le haut du cadre de menu inclu ds le bottom)
3 côtés pour le 1er menu (avec le haut du second menu inclus ds le bottom)
3 côtés pour le 2me menu.
 
non ?

Mon cher skopos tu n'as pas tout compris voire pas du tout
 
les boites de titres ne sont composées que d'un <h2><span></span></h2>
ce sont les blocs du menu qui sont composés de 5 div, et crois moi on peut pas faire plus simple .
 
quand je parle extensive en largeur c'est par le fait que si tu change la largeur du menu, c'est finger in the noze, automatiquement le menu prend la largeur qui lui faut et tu n'as pas besoin de modifier quoi que ce soit .
 
Si le design est fixe ici c'est que le visuel recu était en 800x600 et difficilement elargissable.
Je m'en vais vous faire une démo du bestiau avec un layout fluide

ah ok
effectivement j'avais pas compris (chui noob moi ) mais t'étais pas clair non plus

et pourquoi tu mets un span ds le h2 ?

pour faire justement une boite qui s'étire
J'ai un background avec la gauche de l'image sur le H2, et j'ai tout le reste de l'image dans le span
 
http://gatsu.ftp.free.fr/Modele/ro [...] luide.html
 
tiens voila. 1 minutes pour le rendre fluide . J'ai juste eu a modifier les unités de 2 bloc
 
C'est justement pour cela que j'ai fait un layout et des box autoextensibles. Car notre cher ami a juste à passer de 760px à 980px (pour les ecrans en 1024px) et baste

pourquoi pas un div (plutot qu'un span inblock)    

ah oui ok

Parce que dans un Hx, P tu n'as pas le droit sémantiquement parlant de mettre un élément de type block, donc pas de div.
c'est pour ça que je mets un span, et comme je lui spécifie display:block, ben le span se comporte du coup comme un div.
 
Alors je reste propre sémantiquement et je peux faire mon truc.

Je voulais surtout dire que comme il a fait sont design pour des petites résolutions et qu'un jour il veut passer à un site plus large, ben il n'aura aucun soucis, sauf pour son image du header qu'il devra faire plus large

(je vais y'arriver à m'exprimer clairement, je vais y'arriver   )
Je reformule: pourquoi pas un h2 dans un div ? c pas correct ?

J'avais compris.
Merci de prendre du temps d'exliquer en tt cas

Si ca peut l'etre, mais étant donné que j'utilise déjà pas mal de div, j'ai préféré avoir un ptit H2 et un span et je trouvais que ca sonnait bien au niveau sémantique. Ca peut etre sujet à discussion tout ça

Merci beaucoup, Gatsu35, t's vraiment trop sympa. Comment te remercier?
T'as un site? Je te met en partenaire.
Dis moi l'adresse de ton site.

En fait, pour le design extensible, je fait comment?
Je vais retrécir le header comme tu m'a dit.
Si je veux mettre une image en fond, est-ce que j'ai vraiment besoin du design extensible?
Merci a toi, aussi, Spokos

Heu, en fait, tu peut m'envoyer ledesign extensible et le design extensible avec le css et les images par email ou par autre moyen?
merci.
J'ai commendé mon nom de domaine et mon herbergement
Et encore une fois, merci Gatsu35.

14h27 : Recup du fichier
14h37 : enregistrement de header.jpg (choix de la meilleure qualité d'image/compression possible)
14h43 : Enregistrement bkg_titlebox (choix du png 8bits, 64 couleurs comme meilleur rapport)
14h57 : fin du decoupage et modification des 5 images composant la box (celle de droite)
15h02 : fin decoupage footer
15h17 : fin ecriture HTML, début CSS
15h37 : fin de mise en page CSS, quelques réglages
15h53 : fin des corrections.
 
Et bien, dis donc , t rapide!

mon adresse est quentincormier@gmail.com
si tu veut des invitations gmail, fait le moi savoir, je t'en rnvoi tout de suite.

Laisse tomber pour le truc a envoyer par email, j'ai réussi a tout récuperer sur ton serveur free.
J'ai rétréci le header, et le résultat, tu as raison, est bien meilleur.

Mais comment faire avec le header pour le design extensible?

houla tchusss tout cool là, apparament ça marche plutôt pas mal
 
maintenant quelques recommandations
 
-ton header est encore bien de trop grand, 200px pour un header c'est énorme, raccourci le à 100px je pense que c'est un très bon compromis (et c'est déjà beacoup).
il faut que ton site reste accessible et bien visible, avec un header aussi gros c'est mal barré.
 
-Bon passons au doctype, j'ai vu que tu as utilisé un doctype xHTML alors je te recommande bien sur de tout écrire désormais en xHTML
 
-Pour la CSS j'espère que tu la mettras à part dans une feuille de style
 
-La balise Meta destinée à spécifier le charset de ta page, tu veux bien la mettre juste après title avant la CSS, merki
 
-sinon l'image de fond qui compose le header, au sujet de sa largeur, tu n'est pas obligé de découper cette image à 760px exactement, étant donné que c'est une image de fond, même si ton image fait 1000px de large elle passe (il suffit de regarder les images qui composent mes boites extensibles, elles font 3000px en dimension )
 
 

daccord, merci gatsu. Bon alors, avant de lire ton message , g transphré le site sur mon espace free est ca donne ca :  
http://pascal.cormier.free.fr
Je vais encore reduire le header, mettre le css dans une feuille de style, tout mettre en xhtml. Merci pour les conseilles
Je vais faire comme tu m'as dis
@+

J'ai déjà vu le resultat (je suis allé sur ton site web (la ptite maison en icone)

Prends le gros texte et met le entre la tête et la telecommande.
Fait de même avec le petit de facon a ce qu'il soit décalé au max que tu peux sans bouffer l'image. Ca devrait pas mal reduire la hauter

Merci Gatsu et Natopsi
Pour info, j'ai finit la page avec le css.
Je vais suivre ton conseille Natopsi.
Dès que j'ai finit, je met tout ca en ligne
@+

Salut a tous
 
C'est pas mal tous ça dites donc
Mets vite ton travail en ligne thekiller242, j'ai hate de voir ce que tu nous a fais
 
Une petite question, pourquoi que ma page créée (page html faisant appel à des fichiers css) ne s'affiche pas pareil dans IE et FF??
Sous IE le menu s'affiche correctement mais sous FF il est décalé sur la droite.Y'a t'il un moyen d'y remédier??
Vala merci
 
Et bon courage thekiller242 pour la suite  
 
edit: C'est penible de devoir s'arranger pour que la page s'affiche normalement sous differents navigateurs.  
En ce qui concerne mon problème (qui n'en est plus un maintenant) : par defaut FF laisse 40px sur la gauche afin d'avoir assez de place pour les puces, IE lui s'aligne directement à gauche. Un padding-left à 0px permet de forcer FF à s'aligner à gauche.