Créations Graphiques
 
AccueilFAQPortailGalerieRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Web design (codage)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Nimamoto
Petit démon


Masculin
Nombre de messages : 1395
Réputation : 0
Points : 11
Date d'inscription : 08/04/2005

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité:
Spécialités graphiques: Codeur

MessageSujet: Web design (codage)   Ven 01 Juin 2007, 21:53

Voilà un petit tutoriel réalisé après une demande :

Je ne sais pas trop ce qu'il vaut, ce qui est sur c'est qu'il n'est pas du tout destiné aux personne cherchant la perfection, qui ne pourra s'acquérir qu'en pratiquant, je donne ici quelques bases, conseil, à vous de faire le tri ;)

Cliquez ici !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Crash Bandicoot
Petit démon


Féminin
Nombre de messages : 623
Réputation : 0
Points : 0
Date d'inscription : 24/04/2007

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: Tous les jours tant que je suis au taf!
Spécialités graphiques: Bannière

MessageSujet: Re: Web design (codage)   Ven 01 Juin 2007, 22:23

salut,

je te remercie infiniment !!

Eli
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://coyote-girl90.skyblog.com
Haby
V.I.P.


Féminin
Nombre de messages : 5560
Logiciel : Photoshop CS & CS3
Réputation : 5
Points : 246
Date d'inscription : 16/05/2005

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: Quasi-quotidienne !
Spécialités graphiques: Globe

MessageSujet: Re: Web design (codage)   Sam 02 Juin 2007, 07:23

Très sympa, je trouve que pour une "introduction" au webdesign, c'est vraiment très bien.

Merci à toi Nima :Oeil:
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.facebook.com/carine.benoitgasull http://www.amoulesolo.net/haby/#album=1&photo=6
Ju
Petit démon


Masculin
Nombre de messages : 617
Logiciel : 13
Réputation : 0
Points : 0
Date d'inscription : 06/09/2006

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: Plutot en soirée, moins pendant les vacs ;)
Spécialités graphiques: Photomontage

MessageSujet: Re: Web design (codage)   Sam 02 Juin 2007, 10:48

Moi ce que je comprend très mal, c'est comment réellement faire un design extensible, en plaçant les %, mais si on met des %, comment on défini où est la zone? Parce que, j'ai essayé plusieurs fois, mais sur les grande résolution mon design est toujours sur la gauche...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://my-toxic-romance.com/
Nimamoto
Petit démon


Masculin
Nombre de messages : 1395
Réputation : 0
Points : 11
Date d'inscription : 08/04/2005

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité:
Spécialités graphiques: Codeur

MessageSujet: Re: Web design (codage)   Sam 02 Juin 2007, 17:24

Hum, si tu veux que ton design soit centré, tu dois ajouter les balises :
Code:
<center></center>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ju
Petit démon


Masculin
Nombre de messages : 617
Logiciel : 13
Réputation : 0
Points : 0
Date d'inscription : 06/09/2006

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: Plutot en soirée, moins pendant les vacs ;)
Spécialités graphiques: Photomontage

MessageSujet: Re: Web design (codage)   Sam 02 Juin 2007, 17:32

En fait je croit que le problème vient des div, vu que je met des truc comme top: 10px etc.. le design se colle à ses pixel quelque soit la résolution, ce qui fait que sur une plus grande résolution que 1024/768 le design est collé à gauche, même si je met center...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://my-toxic-romance.com/
gekko
Petit démon


Masculin
Nombre de messages : 704
Logiciel : Suite CS4 : Flash CS4, Dreamweaver CS4, Firework CS4, Photoshop CS4
Réputation : 2
Points : 95
Date d'inscription : 30/08/2006

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: Toujours
Spécialités graphiques: Aide technique

MessageSujet: Re: Web design (codage)   Dim 03 Juin 2007, 22:08

MERCO MON AMI!"
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.bozomedia.com
HammHetfield
Ange sympa


Masculin
Nombre de messages : 90
Réputation : 0
Points : 0
Date d'inscription : 09/04/2008

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: le week-end et les vacances
Spécialités graphiques: Codeur

MessageSujet: Re: Web design (codage)   Mer 09 Avr 2008, 04:57

Pour faire un design extensible, il faut en effet mettre des tailles en pourcentage plutot qu'en pixel, la valeur 100% étant la largeur de l'ecran.

Pour ce qui est de centrer, ca n'a rien a voir... il y a deux possibilité : soit faire un div id="all" comprennant toutes les autres div, en mettant un alignement a cette div, soit mettre un div aligne="center" a toutes les div...

La meilleure solution a mon gout étant la première, je la detaille un peu :



Entre la balise d'ouverture et de fermeture de la div qui a "all" pour id, on met TOUTES les autres div de la page comme on l'aurait fait normalement.

Ensuite dans le CSS lié, on écrira :

#all {
margin:10 auto;
}

ce qui mettra votre div a 10px du bord supérieur de la page et centrera tout!


Voila, j'espere que c'est clair sinon demandez moi des précisions!
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://stupblog.o-n.fr
gekko
Petit démon


Masculin
Nombre de messages : 704
Logiciel : Suite CS4 : Flash CS4, Dreamweaver CS4, Firework CS4, Photoshop CS4
Réputation : 2
Points : 95
Date d'inscription : 30/08/2006

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: Toujours
Spécialités graphiques: Aide technique

MessageSujet: Re: Web design (codage)   Mer 09 Avr 2008, 19:18

Ouais , mais si a meton mon div header, il nets pas extensible je le mets en pixels meme si tout le reste de mon deisgn est en %?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.bozomedia.com
HammHetfield
Ange sympa


Masculin
Nombre de messages : 90
Réputation : 0
Points : 0
Date d'inscription : 09/04/2008

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: le week-end et les vacances
Spécialités graphiques: Codeur

MessageSujet: Re: Web design (codage)   Jeu 10 Avr 2008, 06:20

On va prendre un exemple simple :

Nous avons seulement 2 div :

#header qui doit contenir l'image de notre header

#corps qui doit contenir le corps de notre message


On fait donc la div #all qui contient tout, centrée, ensuite dedans on met #header avec une largeur en %age, avec une couleur de fond et aprés, on ajoute #corps avec l'image de fond repeat-x et -y.

Ce qui donne :

#all {
width:100%;
margin: 0 auto;
}

#header {
width:100%;
height:hauteur du header en pixel;
background-color:#000000;
}

#corps {
width:100%;
height-min:20px;
background-url:url de l'image;
}




et dans le html, ca donne :


//Fermeture de la div header

//Fermeture de la div corps
//Fermeture de la balise corps




Voila, comme ca le header n'est pas redimmensionné ^^


A plus et reposez encore des questions si besoin est!
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://stupblog.o-n.fr
gekko
Petit démon


Masculin
Nombre de messages : 704
Logiciel : Suite CS4 : Flash CS4, Dreamweaver CS4, Firework CS4, Photoshop CS4
Réputation : 2
Points : 95
Date d'inscription : 30/08/2006

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: Toujours
Spécialités graphiques: Aide technique

MessageSujet: Re: Web design (codage)   Jeu 10 Avr 2008, 19:19

ALors même s'il nest aps extensible il ne repeat x pas?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.bozomedia.com
HammHetfield
Ange sympa


Masculin
Nombre de messages : 90
Réputation : 0
Points : 0
Date d'inscription : 09/04/2008

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: le week-end et les vacances
Spécialités graphiques: Codeur

MessageSujet: Re: Web design (codage)   Ven 11 Avr 2008, 16:34

Je ne comprends pas ta question...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://stupblog.o-n.fr
Norore
Admin


Féminin
Nombre de messages : 2606
Logiciel : Gimp - Inkscape
Réputation : 49
Points : 1010
Date d'inscription : 23/11/2007

Détails sur le membre
Logiciel principal: Gimp
Ma disponibilité: Dispo pour surveiller, pour grapher, faudra patienter...
Spécialités graphiques: Codeur

MessageSujet: Re: Web design (codage)   Ven 11 Avr 2008, 17:06

gekko a écrit:
ALors même s'il nest aps extensible il ne repeat x pas?

En fait, tu auras bien ton image, et ensuite, sur les côtés de ton image, tu auras la couleur de fond déterminée :Oeil: !





Merci Lilie Duciel !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://img408.imageshack.us/g/norore.png/ http://www.nororedreams.fr/
HammHetfield
Ange sympa


Masculin
Nombre de messages : 90
Réputation : 0
Points : 0
Date d'inscription : 09/04/2008

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: le week-end et les vacances
Spécialités graphiques: Codeur

MessageSujet: Re: Web design (codage)   Ven 11 Avr 2008, 17:12

Ah c'était ca la question? Ben la réponse a été donnée :D
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://stupblog.o-n.fr
gekko
Petit démon


Masculin
Nombre de messages : 704
Logiciel : Suite CS4 : Flash CS4, Dreamweaver CS4, Firework CS4, Photoshop CS4
Réputation : 2
Points : 95
Date d'inscription : 30/08/2006

Détails sur le membre
Logiciel principal: Aucun
Ma disponibilité: Toujours
Spécialités graphiques: Aide technique

MessageSujet: Re: Web design (codage)   Ven 11 Avr 2008, 19:58

d'accord msi :happy:
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.bozomedia.com
Contenu sponsorisé




MessageSujet: Re: Web design (codage)   Aujourd'hui à 14:16

Revenir en haut Aller en bas
 
Web design (codage)
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Top 3 level design - catégorie plateforme
» La SHOUTBOX d'Help-in-Design.
» Help in Design #Livejournal
» [tutos vidéo] Création d'assets sous max et level design.
» Nouveau Design !

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Angels Design :: A votre disposition :: Tutoriels :: Programmation web-
Sauter vers: