Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1512 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  Découper mon kit graphique

 


 Mot :   Pseudo :  
 
 Page :   1  2  3
Page Précédente
Auteur Sujet :

Découper mon kit graphique

n°837586
thekiller2​42
Posté le 14-06-2006 à 14:39:16  profilanswer
 

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

mood
Publicité
Posté le 14-06-2006 à 14:39:16  profilanswer
 

n°837588
Natopsi
☄️Just end it already!☄️
Posté le 14-06-2006 à 14:44:00  profilanswer
 

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 :D


---------------
ACH/VDSHFRCoin◈1435mm⚡
n°837589
thekiller2​42
Posté le 14-06-2006 à 14:52:07  profilanswer
 

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

n°837591
thekiller2​42
Posté le 14-06-2006 à 14:53:44  profilanswer
 

En fait, Natopsi, bonne chance pour ton bac

n°837592
Natopsi
☄️Just end it already!☄️
Posté le 14-06-2006 à 14:55:01  profilanswer
 

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

Code :
  1. div{
  2. position : absolute;
  3. left: 10px;
  4. top: 15px;
  5. width: 12px;
  6. height: 12px;
  7. }


---------------
ACH/VDSHFRCoin◈1435mm⚡
n°837602
thekiller2​42
Posté le 14-06-2006 à 15:11:56  profilanswer
 

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

n°838204
thekiller2​42
Posté le 15-06-2006 à 19:02:48  profilanswer
 

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

n°838436
Zedlefou
In cabbage we trust !
Posté le 16-06-2006 à 08:44:25  profilanswer
 

thekiller242 a écrit :

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.

n°838798
kmenslow1
:o)
Posté le 16-06-2006 à 16:24:15  profilanswer
 

Enlève le flou sur l'écriture


---------------
Bonjour !
n°838878
thekiller2​42
Posté le 16-06-2006 à 17:49:19  profilanswer
 

daccord

mood
Publicité
Posté le 16-06-2006 à 17:49:19  profilanswer
 

n°838880
thekiller2​42
Posté le 16-06-2006 à 17:55:02  profilanswer
 

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

n°839027
thekiller2​42
Posté le 17-06-2006 à 09:55:42  profilanswer
 

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  

n°839148
gatsu35
Blablaté par Harko
Posté le 17-06-2006 à 15:47:53  profilanswer
 

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

Citation :


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


 
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.

Code :
  1. <div class="box"><div class="b_r"><div class="b_b"><div class="b_l"><div class="b_cnr">
  2. contenu de la box
  3. </div></div></div></div></div>


 
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  [:kbchris]  
 
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 [:kbchris]
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 [:kbchris]
 
Je viens de refaire une dernière update et promis c'est la dernière :D, 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


Message édité par gatsu35 le 17-06-2006 à 19:52:11
n°839154
Profil sup​primé
Posté le 17-06-2006 à 16:02:39  answer
 

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 :D )

Message cité 1 fois
Message édité par Profil supprimé le 17-06-2006 à 16:05:07
n°839159
gatsu35
Blablaté par Harko
Posté le 17-06-2006 à 16:06:34  profilanswer
 

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 :D, 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

n°839160
gatsu35
Blablaté par Harko
Posté le 17-06-2006 à 16:07:58  profilanswer
 


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


Message édité par gatsu35 le 17-06-2006 à 16:08:07
n°839227
gatsu35
Blablaté par Harko
Posté le 17-06-2006 à 18:40:50  profilanswer
 

re quote, fausse manip de ma part

n°839240
Skopos
Posté le 17-06-2006 à 20:04:21  profilanswer
 

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 ?

n°839242
gatsu35
Blablaté par Harko
Posté le 17-06-2006 à 20:07:32  profilanswer
 

Mon cher skopos tu n'as pas tout compris :p voire pas du tout :p
 
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 :p.
 
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

n°839243
Skopos
Posté le 17-06-2006 à 20:09:33  profilanswer
 

ah ok :D
effectivement j'avais pas compris (chui noob moi [:cupra]) mais t'étais pas clair non plus :o

n°839244
Skopos
Posté le 17-06-2006 à 20:13:48  profilanswer
 

et pourquoi tu mets un span ds le h2 ?

n°839246
gatsu35
Blablaté par Harko
Posté le 17-06-2006 à 20:24:08  profilanswer
 

pour faire justement une boite qui s'étire :o
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 :o. J'ai juste eu a modifier les unités de 2 bloc :o
 
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 :o

n°839250
Skopos
Posté le 17-06-2006 à 20:39:17  profilanswer
 

gatsu35 a écrit :

pour faire justement une boite qui s'étire :o
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


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

gatsu35 a écrit :


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 :o


ah oui ok [:nybbas]

n°839253
gatsu35
Blablaté par Harko
Posté le 17-06-2006 à 20:44:14  profilanswer
 

Skopos a écrit :

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


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 :o

n°839261
Skopos
Posté le 17-06-2006 à 21:14:46  profilanswer
 

gatsu35 a écrit :

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 vais y'arriver à m'exprimer clairement, je vais y'arriver  :pt1cable: )
Je reformule: pourquoi pas un h2 dans un div ? c pas correct ?

gatsu35 a écrit :


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 :o


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

n°839263
gatsu35
Blablaté par Harko
Posté le 17-06-2006 à 21:17:43  profilanswer
 

Skopos a écrit :


Je reformule: pourquoi pas un h2 dans un div ? c pas correct ?)


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

n°839266
Skopos
Posté le 17-06-2006 à 21:20:52  profilanswer
 

:jap:

n°839479
thekiller2​42
Posté le 18-06-2006 à 12:10:14  profilanswer
 

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.

n°839481
thekiller2​42
Posté le 18-06-2006 à 12:20:01  profilanswer
 

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

n°839482
thekiller2​42
Posté le 18-06-2006 à 12:27:07  profilanswer
 

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.

n°839483
thekiller2​42
Posté le 18-06-2006 à 12:29:54  profilanswer
 

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! ;)

n°839486
thekiller2​42
Posté le 18-06-2006 à 12:38:40  profilanswer
 

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

n°839543
thekiller2​42
Posté le 18-06-2006 à 16:31:50  profilanswer
 

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.

n°839547
thekiller2​42
Posté le 18-06-2006 à 16:33:07  profilanswer
 

Mais comment faire avec le header pour le design extensible?

n°839580
gatsu35
Blablaté par Harko
Posté le 18-06-2006 à 19:12:53  profilanswer
 

houla tchusss tout cool là, apparament ça marche plutôt pas mal :D
 
maintenant quelques recommandations :o
 
-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 :o
 
-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 :p
 
-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 :p)
 
 

n°839595
thekiller2​42
Posté le 18-06-2006 à 19:49:37  profilanswer
 

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
@+

n°839597
gatsu35
Blablaté par Harko
Posté le 18-06-2006 à 19:51:06  profilanswer
 

thekiller242 a écrit :

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)

n°839598
Natopsi
☄️Just end it already!☄️
Posté le 18-06-2006 à 19:52:54  profilanswer
 

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


---------------
ACH/VDSHFRCoin◈1435mm⚡
n°839614
thekiller2​42
Posté le 18-06-2006 à 20:48:09  profilanswer
 

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
@+

n°840566
nasty44
Gneuuu !!!
Posté le 20-06-2006 à 15:17:25  profilanswer
 

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 :p
 
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  :hello:
 
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.  :sol:

Message cité 1 fois
Message édité par nasty44 le 21-06-2006 à 00:52:05

---------------
http://nasty3d.free.fr [site en REconstruction]    ## Electronicien/Infographiste/Gratteux ##
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2  3
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  Découper mon kit graphique

 

Sujets relatifs
recherche créateur graphiqueCréation d'un style graphique avec illustrator
écoles d'arts graphique[Tablette graphique] : Summasketch ca vaut quoi ?
charte graphique éléctriqueadapter une charte graphique sur Word
Apel à votre culture graphique[Blender] découper un objet grâce a un autre
Kit Graphique, légalitémaquette avec graphique....
Plus de sujets relatifs à : Découper mon kit graphique


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR