Tutoriel vidéo xHTML-CSS : Créer un site web : Intégration

Dans ce tutoriel vidéo vous apprendrez à utiliser le xHTML et le CSS pour coder une page Web à partir d'une maquette. Il est nécessaire d'avoir visionné le premier tutoriel pour bien comprendre l'utilisation des images.

Voici un schéma permettant de mieux comprendre comment la page va être codée :

schéma du codage

Tags : CssXhtmlCodageW3cStrictValidationNotepad++

Tutoriel xHTML-CSS posté Lundi 23 Juin 2008
 293 Commentaires
Ils l'ont utilisé
Vos commentaires

julien (Vendredi 08 Août 2008 à 14:17):

Félicitations,
Tout d'abord pour le design de ton site car il est vraiment bien fait
ensuite pour le contenu qui est excellent,
et ensuite pour tes excellents tutoriaux vraiment très bien expliqué avec tout a dispo et pour mettre au point des sites très beau et le tout expliqué du début a la fin vraiment chapeau
Et merci pour tout ce que tu viens de m'apprendre

danWor (Vendredi 08 Août 2008 à 19:47):

Enfin un tuto qui explique de A jusqu'à Z comment on fait un site web....moi jdis bravo ! tchuss jojo

Quakouned (Vendredi 08 Août 2008 à 19:48):

je l'attendais avec impatience ... MERCI Beaucoup !!!

Pouti (Vendredi 08 Août 2008 à 19:48):

Les autres site devraient tous prendre de la graine dessus sérieux, expliquer comme sa même un gosse de 4 ans pigerais direct lool, franchement rien à dire il est parfais, tout expliqué comme je le souhaite chapo bas. Excellent tuto.

manu36back (Vendredi 08 Août 2008 à 19:49):

Ya pas a dire ton tuto il cartonne sérieux...
La découpe c'est niquel-chrome j'ai tout compris, et je suis sur que ca va aider pas mal de débutants =].

Enorme boulot (surtout quand c'est filmé avec Camtasia ^^, je parle en connaissance de cause) et franchement CHAPEAU.

TchuSs' raton, et je te remercie encore pour ton codage de mon folio

Guillaume (Vendredi 08 Août 2008 à 19:49):

Très bien, le menu avec les différentes couleurs va bien m'aider. Merci a toi Raton Laveur !

Zfnix (Vendredi 08 Août 2008 à 19:49):

Merci, pour ce tutorial.
Vraiment très bien fait.
Bonne continuation.

NucléR (Vendredi 08 Août 2008 à 19:49):

Excellent tuto
je l'attendait avec impatience et il m'a permis de faire exactement ce que je voulais faire ^^
vivement les prochains ... ^^,
très bonne continuation :D

Rhox (Vendredi 08 Août 2008 à 19:50):

Merci beaucoup pour ce tutoriel extrêmement bien expliqué j'ai commencer a coder mon design j'ai quand même eu des problème notamment dans le css #menu "lu li" a:hover{} pour que les animations marche il a fallut que j'enlève le "lu li". J'aimerai bien savoir aussi coder les menu que l'on place a gauche (ou droite) les sous menu je crois que cela s'appelle.
Merci encore une fois je suis sur la bonne voix je pense pour mon design. A bientôt.

Grafikart (Vendredi 08 Août 2008 à 19:50):

@Rhox : Envoi moi un lien avec un exemple de ce que tu veux savoir coder. Je ferais peut être un tutoriel dessus

Rhox (Vendredi 08 Août 2008 à 19:50):

Est par exemple un site avec une barre de navigation en haut et un menu a droit ou a gauche un peu comme cela. Je ne pense pas qu'il doit y avoir une grande différence mais je ne suis pas arriver.Meci
www.grafik-system.com/

Grafikart (Vendredi 08 Août 2008 à 19:51):

@Rhox : En effet, il n'y a pas de grande différence. Il te suffit de supprimer l'écart entre les boutons et de modifier les images et tu auras le même résultat. Sinon, laisse ton adresse email ou MSN.

Yu-K (Vendredi 08 Août 2008 à 19:51):

Énorme !

Depuis le temps que j'attendais ça !!

Merci ! >_<'

LeLoup (Vendredi 08 Août 2008 à 19:51):

55 minutes de vidéo, hé béh, chapeau !

julbut (Vendredi 08 Août 2008 à 19:51):

Alors je suis ravi de voir que le tuto est en ligne je me le mate demain sans faute, j'avais adoré le premier !!
En plus tout le monde à l'air content.
Merci encore en tout cas !

julbut (Vendredi 08 Août 2008 à 19:51):

C'est vraiment très pro comme tutoriel.
Un GRAND bravo pour ton travail, et un GRAND merci !

Nicojanmu (Vendredi 08 Août 2008 à 19:52):

Vraiment un grand bravo pour ce tuto :-)

Mais j'ai une petite question...
Lorsque l'on clique sur un lien du menu de navigation, comment faire pour que les pages s'affiche dans la <div> des news ? (comme une iframe par exemple)?

Merci

@+

victor (Vendredi 08 Août 2008 à 19:52):

Je viens de trouver ce site et moi, je dois vous dire aussi bravo! C'est juste ce que je cherchais. Je n'arrivais pas à bien comprendre comment entamer à construire un site avec CSS. Félicitations pour le tuto.

PD. Je suis un débutant avec le CSS.
victor
Montreal-Qc.

Seb (Vendredi 08 Août 2008 à 19:52):

Vraiment merci beaucoup, tu ne peux pas imaginer à quel point ton tuto m'a aidé.
Un grand bravo!!
a+

ThVi (Vendredi 08 Août 2008 à 19:52):

Super les tutos en vidéos! Ça nous fait gagner beaucoup de temps dans l'apprentissage: on assimile plus et mieux.
Continuez dans ce sens.
Je suis également demandeur de vidéos sur les CMS: entre autres sur Joomla! et ses templates. Il existe quelques séquences vidéos à ce sujet, mais elles sont anglophones dès lors je ne saisis pas forcément toutes les nuances des techniques évoquées.
Quoi qu'il en soit, le travail que vous réalisez est formidable pour la communauté.

stefff83 (Vendredi 08 Août 2008 à 19:52):

Merci a toi jojo pour ce super tuto.

C'est vraiment fantastique de faire partager tes connaissances à d'autres personnes par le biais de vidéos.

J'ai réellement adoré, vivement d'autre tuto du même type.

Et encore merci à toi.

Stéphane.

geez (Vendredi 08 Août 2008 à 19:52):

Super tutoriel. Juste une petite question qui ne figure pas sur le tuto : comment placer une image (par exemple un logo) servant à illustrer le texte dans la partie du contenu?

En tout cas bravo pour ce tuto qui m'a bien mieux aidé à comprendre la puissance des CSS

Grafikart (Vendredi 08 Août 2008 à 19:53):

Pour placer une image dans le contenu il te suffit pour cela de la mettre dans une borne HTML :
<img src="tonimage.jpg"/>

MaG (Vendredi 08 Août 2008 à 19:53):

Salut, tout d'abord super tuto vidéo c'est vraiment bien expliqué et bon les gens comme moi qui y connaisse un minimum ça passe tout seul.

petite question: comment fait on par la suite pour rajouter en dessous de la case "navigation" une nouvelle case "navigation 2" avec de nouveau liens ?
voilà, merci encore pour ce tuto.

Grafikart (Vendredi 08 Août 2008 à 19:53):

@MaG: Il te suffit de dupliquer les 2 divs qui ont las class bloc et finbloc.

Antony (Vendredi 08 Août 2008 à 19:53):

C'est vrai que ton boulot est excellent !
Moi qui aime designer et bien là, je serais plus indépendant grâce à ton tutoriel : plus besoin de demander à Pierre Paul ou Jacques lol

Bonne continuation surtout !

Pers0nne (Vendredi 08 Août 2008 à 19:53):

Commme toujours. Rien à dire

A plus jojo, très bon tuto.

Bye. ( Faut faire tourner le lien du site )

:/

Le Cavalier Fou en E1 (Vendredi 08 Août 2008 à 19:53):

Bonjour,
Tout d'abords un tout grand merci pour ce tutorial conséquent et si claire, ça coule de source c'est limpide. Le seul soucis est que je n'ai pas répeté l'exemple au pied du code et ayant pérsonnalisé mon prototype qui fera office de site, ce dernier apparaît différemment d'un naviguateur à l'autre. Et dernier point le code <br clear="all"/>"?" est utile mais le tuto ne dit pas comment y remédier.
J'aimerai bien t'envoyer mon prototype pour que tu puisse nous faire un tuto intermédiaire. Encore une fois un grand mrci.

Grafikart (Vendredi 08 Août 2008 à 19:54):

@Le Cavalier Fou en E1 : Je t'ai envoyé un mail

roudy (Samedi 09 Août 2008 à 20:43):

Bravo, pour ce tutoriel vraiment explicite.Tellement explicite que j'ai informé ma femme qu'elle pouvait dorénavant apprendre à faire un site en une heure grâce a ce tutoriel.
Pour répondre a Le cavalier Fou en F1,Il faut faire une class "clear".
.clear { float: both; }.
A plus pour de nouveaux tutoriels tout aussi géniaux.

Darik (Dimanche 10 Août 2008 à 05:33):

Un grand merci a toi ! Car j'avais déjà regardé ton premier tuto sur le découpage et il m'avait beaucoup aidé pour découpé mon folio (en ligne depuis un bon moment , et c'est surement grâce à ton tuto ^^) , maintenant celui la me sera surement encore utile , car je me suis lancé dans la v2 de mon folio , certes je commence déjà a toucher au html/css , mais tes explications sont tellement claire , que je ne peux que de continuer a apprendre des choses, encore une fois : MERCI ! Je te souhaite une très bonne continuation =)
Moi je retourne sur la v2 de mon site xD

Starbuck018 (Dimanche 10 Août 2008 à 19:43):

Tres bon tuto... d'ailleur c'est le meilleur et le seul que je comprend! Mais j'ai une question... J'ai un petit probléme avec mon menu. Ce n'est pas le même type que le tien et les images ne restent pas sur la meme ligne ce qui me fait sa: http://img300.imageshack.us/my.php?image=exxb9.png

Grafikart (Dimanche 10 Août 2008 à 22:30):

Si les liens ne reste pas sur la même ligne c'est parcequ'il ne rentre pas en largeur.

Popietteou (Mercredi 20 Août 2008 à 18:02):

Bonjour!
Tout d'abord un grand merci pour ce tutoriel qui est "quasi" parfait!
C'est rarissime d'en trouver d'aussi bonne qualité!

En revanche, j'ai un problème lorsqu'il s'agit de vérifier si mon site est valide: cette erreur s'affiche et étant débutant je ne sais comment la corriger :S :

Line 1, Column 6: XML Parsing Error: XML declaration allowed only at the start of the document.
<?xml version="1.0" encoding="UTF-8"?>



Quelqu'un pour m'aider? Merci d'avance et encore bravo pour ce superbe tutoriel!

Grafikart (Jeudi 21 Août 2008 à 09:03):

@Popietteou: Je dirais que tu as mis des espaces avant cette lignes. Elle permet de définir l'encodage du document et doit donc être placé avant le premier caractère (donc pas d'espace avant ).

Jérôme (Jeudi 21 Août 2008 à 12:41):

Bravo pour le travail effectué, je sais que cela représente un paquet d'heures. Merci pour ce tuto qui est on-ne-peut-plus-clair. Je l'ai découvert aujourd'hui, je suis fan!

Bonne route.

neopreine (Vendredi 22 Août 2008 à 09:23):

Bonjour et merci pour tes tutoriels toujours très claires,

J'ai mis en application ce tutoriel.
Cependant, il fonctionne très bien sous IE7, FF3, SAFARI. Mais sous OPERA, nada. L'effet visuel ne fonctionne pas ...

Voici le http://www.neopreine.com/portofolio/test/menu3.html

Serais-tu pourquoi ?

Merci d'avance

Grafikart (Vendredi 22 Août 2008 à 14:41):

@neopreine: Pas besoin de mettre du code pour les liens à se transformer tout seul, c'est cool le Web 2.0 hein

Sinon j'ai regarder ton problème et j'ai le plaisir de te dire que c'est une énigme. Le problème vient du line-height dans le CSS dans le #menu li a:hover. Si tu le supprime le changement de fond marchera (si tout va bien )

Après faudra trouver une solution pour déplacer le textes (padding par exemple)

Laippe (Dimanche 24 Août 2008 à 01:12):

Bonjour (ou plutôt bonsoir)

déjà merci pour tes tutos très bien faits, aujourd'hui j'ai réalisé tes 2 tutos pour faire un site web, tout allait bien, mon design collait bien au site, tout était très beau.
Après j'ai fait une vérification w3c, et là ça m'indique une erreur, alors je la corrige, je refais le test, et là pas d'erreur.
J'ai voulu voir mon site une dernière fois, mais cette fois, quand j'ouvre la page web, tout est décalé, le fond ne se répète plus, le menu navigation se retrouve sous les news, et je ne trouve pas comment corriger l'erreur (j'ai oublié ce que j'ai corrigé sur le w3c validator).

Alors s'il te plait aide-moi ^^

(si tu veux le code demande moi à lelaippe@gmail.com ou alors demande le ici je t'enverrais un mail)


merci et bonne soirée

Laippe (Dimanche 24 Août 2008 à 01:58):

Ah je le répète c'est super gentil de m'avoir aidé à cette heure ci ^^
Maintenant c'est valide w3c et c'est comme je le voulais

merci:)

Jérôme (Dimanche 24 Août 2008 à 14:41):

Bonjour,
J'ai refait les deux tutos... nickel, grand merci encore. Fort de cette expérience je me suis lancé sur un psd que j'avais réalisé moi même... et tout c'est bien passé. J'ai cependant une question:

"Comment faire pour que le fond du div#news suive la taille de son contenu (dans le cas d'un CMS par exemple)en hauteur alors que le div#footer est d'une autre couleur?"

Pour le fond constitué de lignes horizontales, j'ai utilisé une ligne de 1px de large sur toute la hauteur du psd et je l'ai dupliquée en x.

Le site en demo: http://cmsgoa.goams.com/

Merci déjà pour m'avoir déjà lu.
Bon dimanche.

mikeys (Dimanche 24 Août 2008 à 16:37):

Un grand bravo pour ton travail! je trouve tes tutaux super bien fait et bien expliquer (grâce à toi je comprend maintenant mieux comment faire mes templates) je te tire mon chapeau ^^ bonne continuation et je n'hésiterais pas à conseiller ton site à mes amis qui débutes en css!

Djoh (Dimanche 24 Août 2008 à 19:55):

Wow super, merci !

C'est exactement ce que je cherchais ! Et c'est très bien fait.

laippe (Lundi 25 Août 2008 à 21:29):

Arf désolé de te faire chier encore, mais j'aurais besoin d'aide pour le faire fonctionner sous IE aussi (en plus ayant la version 6 les png ont du mal à être accepter).

Merci

Justice (Mardi 26 Août 2008 à 01:27):

Félicitations trés bon tuto

yodritt (Mardi 26 Août 2008 à 23:04):

Il y' a un bug sur la vidéo
31 minute 38 seconde
met sinon bon tutoriels

Kévin (Mercredi 27 Août 2008 à 14:13):

Bonjour je cherche quelqu'un pour m'aider a coder un design silvouplet.
J'ai demandé a Jojoleratonlaveur mais par manque de temps il na pu m'aider je me débrouille en design et je sais découper le seule probléme c'est le codage du CSS.
Merci par avance.
Me contacter sur mon msn : keke13@hotmail.fr

anox (Dimanche 31 Août 2008 à 19:17):

Félicitation pour ton site web et continues ton excellent travail.

Myriamax (Vendredi 05 Septembre 2008 à 01:24):

Bravo Bravo bravo!!!
pour ton travail et ta générosité.
J 'ai particulièrement trouvé le tuto sur le menu accordéon d'une très grange Classe,dans la manière dont tu élabores ta fonction "ascenceur"
maintenant je n ai plus peur de mettre la main dans le cambouis et de créer mes propres fonctions
Merci encore!

ader (Mardi 09 Septembre 2008 à 16:21):

Chapeau ! Merci Mille fois pour ce tutoriel vachement bien expliquer
Bonne Continuation

Zawi (Mardi 09 Septembre 2008 à 17:53):

Pourrais-tu faire un tuto sur comment faire une barre de recherche personalisée ?
Merci d'avance !

Et surtout merci beaucoups de ton travail fourni jusqu'à présent !

Grafikart (Mardi 09 Septembre 2008 à 19:50):

@Zawi : Question très pertinente et assez récurrente. Je prévois un tuto pour cette semaine sur la personnalisation des champs en HTML

Darik (Mardi 16 Septembre 2008 à 02:30):

Salut , j'ai déjà posté un commentaire plus haut (genre , bravo super tuto etc :D) , j'aimerais te solliciter quelques minutes (si possible bien entendu =D) : j'ai un petit problème pour coder un menu , je me suis aidé de la technique que tu enseigne , mais sa marche pas trop pour moi xDD je te montre l'image du webdesign : http://www.picdo.net/Fichiers/8584984ae92405e2dddcfa834a7dcd33/websiz.jpg

Si tu as une astuce pour réussir a coder ce menu (je sais ça craint de galérer sur sa xDD) , je te remercie d'avance , après si tu n'as pas le temps pour ça , je comprend , mais je te remercie quand même , parce que ton tuto est super xD

yodritt (Samedi 20 Septembre 2008 à 13:21):

Peux tu m'expliqué comment on fait comme sur ton site les arrondit et mettre son site dans un contenu comme sur ton site un fond puis un autre fond en plus

Grafikart (Samedi 20 Septembre 2008 à 13:51):

@Darik: Je vois pas trop pourquoi ça ne marcherais pas il faut juste que tu mette un fond à l'id menu et que ensuite tu fasse comme dans le tuto pour aligner les boutons

@yodritt: regarde les images qui compose mon site ça t'aidera à comprendre comment j'ai fait

Darik (Dimanche 21 Septembre 2008 à 03:40):

Encore merci jojo xD mais j'ai utilisé une autre méthode donner par une autre personne qui n'utilise pas le css (la méthode hein xD) c'était tout bête ^^ merci beaucoup en tout cas , car je me lasse pas de regarder ton tuto (c'est peux être ta voix d'ange qui fait sa héhé) *je rigole u_u*

Rugal 972 (Dimanche 21 Septembre 2008 à 16:54):

bonjour Grafikart, je travaille à partir de ton tuto pour mon propre site mais un probleme se présente à moi: je viens de placer le footer selon ta méthode tout es bien centré et le texte s'intègre bien mais j'ai une marge entre la fin de mon contenu et le footer lui même qui laisse un grand vide et je ne comprend pas d'où elle vient dans la mesure ou je n'ai pas d'erreur dans mes lignes de code. je signale par ailleurs que je n'ai pas mis le bloc navigation à droite ni les texte "publié le 0commentaire(s)" ... help ! please!

Grafikart (Dimanche 21 Septembre 2008 à 17:52):

Si tu as une marge non voulu je dirais que dans ton footer tu dois avoir mis un <p> ou une balise qui a par défaut des marge qui s'additionne à celle du footer et créant ainsi des espaces non voulu. Utilise Firebug (extension si tu utilise Firefox) pour voir ce qui ne va pas.

Rugal 972 (Dimanche 21 Septembre 2008 à 20:40):

ok bein merci je vais voir ce qu'il en est et je pense que tu as raison car firebug me révèle des marges surlignées en jaune au bas de mon contenu donc je vais revoir tout cela... merci

agentpro (Mardi 23 Septembre 2008 à 22:31):

Tout d'abords un tout grand merci pour ce big tutorial si claire, le seule probleme que j'ai eu c'est le blem d'affichage entre firefox et IE
, internet explorer ne s'affiche pas bien ,si quelq'un a une idée sur n'hésiter pas a le poster merci encore

Grafikart (Mercredi 24 Septembre 2008 à 00:44):

Essayez lorsque vous avez un problème de mettre un lien et une petite explication car il existe beaucoup de problème possible

Babou (Dimanche 28 Septembre 2008 à 18:09):

Salut,

J'ai un petit problème, alors enfaite le haut du contenu est bien placé ect .. Mais l'écriture est juste en dessous et ne veux pas se mettre dans le cadre, tient voici une image : ( ne tient pas comte des images j'ai fais sa juste pour voir, je fais correctement après )
http://www.pixelz.fr/d/f/4/56ec4a11ecb962d5a0dcfd3af650c.html

Grafikart (Dimanche 28 Septembre 2008 à 19:04):

Sans le code source j'ai du mal à évaluer d'ou peut venir le problème. Pourrais tu mettre ton site en ligne pour que je puisse trouver le souci ?

Babou (Dimanche 28 Septembre 2008 à 19:24):

Oui bien sûr, no problémo

Le voila : http://guillaume.bonhoure.free.fr/ :D
Je te le redit les images sont aléatoires

Grafikart (Dimanche 28 Septembre 2008 à 23:38):

Alors j'ai regardé et tout est bon juste que tu n'a pas d'image pour ton contenu. Mais sinon c'est normal que le contenu soit en bas du haut vu qu'il est dans une div en dessous.

Babou (Lundi 29 Septembre 2008 à 12:56):

Pour l'image du contenu c'est normal qu'il n'y a rien parce-que je n'est pas fini de faire ton tuto, mais je comprend pas pour la div :s

Babou (Jeudi 02 Octobre 2008 à 20:10):

J'ai essayé d'inverser les div mais cela ne fais rien :s

cam385 (Samedi 04 Octobre 2008 à 19:56):

Je me posais un question concernant les png sous IE6, je croyais que les transparences ne passaient pas bien, mais là j'ai pas le log pour tester, mais je me souviens avoir eu des problèmes d'affichage... Comment fais-tu?

Grafikart (Dimanche 05 Octobre 2008 à 01:25):

Alors là pour le design présenté dans le tutoriel je ne me suis pas préoccupé de l'adaptation sous ie6. Si tu veux un site bien compatible avec IE6 tu n'a pas le choix, tu ne dois mettre aucun PNG transparent

cam385 (Dimanche 05 Octobre 2008 à 12:27):

C'est quand meme bien sympa les transparents... Toi tu les as négligé les navigateur sous IE 6? Parce que rien que dans ton menu il y a du transparent...

Grafikart (Dimanche 05 Octobre 2008 à 13:53):

ui j'ai négligé IE6 mais pas totalement. La structure du site reste la même mais il est vrai que les PNG seront moche mais à la longue IE6 va disparaitre donc je ne m'en occupe plus trop.
Si tu veux faire un site qui soit identique sur Firefox et IE6 il faut que tu n'utilise que des images sans "semi-transparences"

cam385 (Dimanche 05 Octobre 2008 à 22:38):

D'accord, merci pour tes conseils.
Ton site est super et les tutos sympa et originaux. Tu as un métier en rapport avec ce que tu fais? Parce que là j'ai l'impression qui a quand même un bon niveau...

artkabis (Mardi 07 Octobre 2008 à 18:52):

Tout simplement, "chapeau bas".

J'ai découvert ton site il y a seulement deux jours et je trouve que tes tutoriels sont vraiment de très bonnes qualités, bref c'est du très bon travail. Je vais d'ailleurs le conseiller aux membres de mon forum.

Bonne continuation...

Ps: j'attends avec impatience le prochain tutoriel

Moyan (Dimanche 12 Octobre 2008 à 14:24):

Salut Il y a une petite erreur dans le css :D

#bas{
margin:0 auto;
padding:0 0 16px 40px ;
background:url(theme/bas.png) no-repeat;
width:517px;
height:25px;
color:#FFF;
line-height:25px;

C'est ton code source qui décale de deux petits pixels ton footer vers la droite :D

Du coup, tu pourrais le corriger en utilisant,

#bas{
margin:0 auto;
padding:0 0 16px 40px ;
background:url(theme/bas.png) no-repeat;
width:519px;
height:25px;
color:#FFF;
line-height:25px;

Voilà voilà :D

Moyan

Moyan (Dimanche 12 Octobre 2008 à 14:25):

Encore moi :D
Je débute en codage, peux-tu me dire par msn ( mon adresse est dans la partie Email ) comment créer un espace news/commentaires ?

Merci,

Grafikart (Dimanche 12 Octobre 2008 à 21:06):

Je te répondrais ici par manque de Temps. Pour ce que tu demande tu peux utiliser du PHP, c'est un langage assez complexe et je ne m'étendrais pas plus. Je t'invite à te rendre sur google pour chercher plus d'infos.

Babou (Mardi 14 Octobre 2008 à 20:24):

Merci pour tes tutos, j'ai réussi à faire mon site en entié sur le pixel-art codé par moi même ! A part le doctype :p
Lien de la page de maintenance : http://guillaume.bonhoure.free.fr/ et la page normal ( plus qu'à la remplir ! ) http://guillaume.bonhoure.free.fr/accueil.html
Merci beaucoup !

fred (Mercredi 15 Octobre 2008 à 19:16):

Salut alors super tuto !
mais je n'arrive pas a mettre la partie navigation en haut de la page n'y a mettre des images dans mon texte .

sa serait sympa de me repondre !

Babou (Vendredi 17 Octobre 2008 à 22:25):

Pour mettre une image, le code c'est cela il me semble :
<img src="tonimages"></img>

Voila :D

Grafikart (Samedi 18 Octobre 2008 à 10:58):

@BAbou et Fred : La balise permettant de placer une image est la balise img, c'est une balise courte:

<img src="url de ton image" alt="texte alternatif" />

Babou (Samedi 18 Octobre 2008 à 14:28):

Ah oui en effet, j'avais oublié le alt
Merci de m'avoir corrigé

Chewie (Dimanche 19 Octobre 2008 à 05:13):

J'ai pas très bien compris comment tu a "implanter" le system de commentaire sur un site....
J'ai fait plein de recherche sur google met en vain ...

Si un GRAND MERCI pour se blog qui m'aide beaucoup (j'adore le tuto des ombre chinoise)

Grafikart (Dimanche 19 Octobre 2008 à 13:16):

@Chewie : Mon site est entièrement conçu en PHP donc l'ensemble des fonctionnalités sont codé en fonction de la structure de mon site. Il n'est pas possible d'ajouter de telles fonctionnalités avec un "module".

Donc si tu veux faire un site avec des commentaires il faut que tu apprenne le PHP et les bases de données MySQL

Babou (Dimanche 19 Octobre 2008 à 19:15):

Tu feras des tutos sur le php, comme des espaces membres, système de news ?

Grafikart (Dimanche 19 Octobre 2008 à 20:18):

@Babou: Le PHP c'est assez compliqué est ça demande pas mal de connaissance surtout quand il faut passer par une base de donnée. Donc je ne sais pas trop, mais tout est possible.

Babou (Dimanche 19 Octobre 2008 à 21:04):

Eh bien j'espère que tu trouvera le temps de le faire :D

luuna (Lundi 20 Octobre 2008 à 20:45):

He bien, j'avais deja beaucoup aimer la video de decoupage mais celle-ci est encore meilleure.
Ce que j'aime ?
-L'accessibilite, meme pour un debutant en XHTML/CSS ta video est plus qu'abordable, n'etant pas debutant j'ai appris des petites astuces que je trouves vraiment interessante.
-Le fait que tu tiennes compte des standarts W3C, je vois trop de gens autour de moi s'en fiche, ca fait vraiment plaisir.
-La qualite de la video en elle-meme ainsi que de ta voix qui passe tres bien.
-Tes expliquations sont vraiment bonnes. Il y a un point negatif par contre c'est pour les boutons le fait qu'il "saute" lorque l'on passe dessus mais je pense que cela est du au fait que je ne maitrise pas les arrieres plans sur les ancres.

Pour conclure, je dirais que je ne suis pas du tout partisan de laisser des commentaires sur des blogs, mais vu la qualite de ton travail, je trouve cela important de d'en remercier.

Pour information, je fais passer les videos que j'ai vu autour de moi aux gens qui veulent faire du design web.

Continue comme ca je dirais. J'irais voir tes autres realisations plus tard.

Merci pour ce tutoriel.

WonderTonio (Lundi 20 Octobre 2008 à 22:55):

Salut !

Je t'ai contacté récemment par email à propos d'un problème de png transparent sous IE6.
J'ai eu depuis l'occasion de voir que tu avais déjà répondu à une question similaire dans les commentaires au dessus.
Donc désolé et merci de m'avoir quand même répondu.

Eclip5e (Mardi 21 Octobre 2008 à 21:19):

Un putain de bravo !

Daniel (Jeudi 23 Octobre 2008 à 13:19):

Un grand merci à l'auteur de ce tuto.

xfact (Mardi 11 Novembre 2008 à 14:11):

Super tuto - merci beaucoup

mimi (Mercredi 12 Novembre 2008 à 03:39):

comment récupérer un code couleur sur photoshope

GBGFX (Mardi 18 Novembre 2008 à 13:22):

Salut à toi l'ami, franchement merci beaucoup pour ces tutos, tu m'as redonné goût au graphisme et plus particulièrement au codage, aboutissement du travail préalable de design..

Je suis en train de refaire mon site portfolio, une fois fini je posterai un lien ici !

Pépito (Samedi 22 Novembre 2008 à 14:48):

Bonjour a tous, merci beaucoup raton pour ce merveilleux tuto qui m'a énormément fait progresser ! en revanche mon hébergeur étant free, le module rewrite n'est pas activer et je ne trouve pas d'alternative... si quelqu'un pouvais m'aiguiller

Mathieu (Dimanche 23 Novembre 2008 à 11:02):

Wouah bravo et merci pour cet excellent tutoriel !!!
Vraiment un pro celui qui a fait le tuto !
Maintenant j'ai plus d'excuse pour refuser le projet d'un pote qui veux que je lui code son site !!!!

pullman (Dimanche 23 Novembre 2008 à 17:38):

je tiens vraiment a te remercier c vraiment super, c grace a des gens comme toi que le web bouge et ca créer des petit enfants pour la création

vraiment trop bien ton boulot

x.om38 (Lundi 24 Novembre 2008 à 17:11):

J'ai un problème, je n'arrive pas à créer de nouvelle page html et css.
Car différemment à toi, je n'ai pas le titre tout entier (index.html) mais j'ai juste "index".
Est ce que tu pourrais m'aider please?
Ce problème m'énerve car ça me bloque dès maintenant, donc je ne peux plus suivre ton super tuto :S
Merci d'avance.

Bibil (Lundi 24 Novembre 2008 à 22:42):

bravo c'est très impressionnant de voir qu'il n'y a aucune erreur, et 1h de film franchement chapeau ! je pense que sur internet on a pas beaucoup de tutos de ce type et c'est bien dommage ! j'ai un peu de mal avec le codage, mais franchement a te voir faire, ça n'a pas l'air si sorcier ;-)
je vais surement (re)faire mon site avec ton tuto mais avec mon design ;-)
en tout cas chapeau, je te donne des nouvelles quand c'est fait :-)
bravo bravo bravo et surtout MERCI pour ce tuto si bien fait et de A a Z en + :-D

referencement manuel (Mercredi 26 Novembre 2008 à 16:08):

Bravo bravo bravo
Franchement c'est le tuto que beaucoup de personnes cherchent
Je te tire mon chapeau

974mazi (Vendredi 28 Novembre 2008 à 21:25):

Euh..;salut à tous j'ai un probleme dans la conception de la page.
(Je n'arrive pas à afficher les images en générale)

Exemple:CODE DANS STYLE CSS
body{
background:url (theme/fond.jpg);
}

J'utilise Mozilla 3x

974mazi (Vendredi 28 Novembre 2008 à 21:32):

RE Euh..
Après comparaison avec la maquette j'ai compris l'erreur !
J'aivais mis un espace entre url et (theme/fond.jpg)

body{
background:url ICI(theme/fond.jpg);
}
Au plaisir ! JL

dreadstock (Jeudi 04 Décembre 2008 à 13:41):

Bonjour,
tout d'abord merci pour ce tutoriel, en effet, vos tutoriaux sont géniaux, on apprend super vite.
Pour aller encore plus vite et pouvoir apprendre même dans les transports parisiens, je me demandais s'il ne serait pas possible de proposer sur votre site, des tutoriaux en PODCAST, pour que je puisse les voir sur mon Iphone.
D'ailleurs, aprés en avoir parlé longuement avec d'autres personnes sur des blogs, beaucoup pense comme moi !!
Voila une petite suggestion !!

En tout cas merci beaucoup pour ces tutoriaux et votre travail !!!!

Merci
dreadstock

Laura (Dimanche 07 Décembre 2008 à 13:07):

Wooooow.
Tutoriel très bien expliqué, qui a sûrement demandé beaucoup de travail et de temps.
C'est très professionnel,ce tutoriel m'aide beaucoup et vaut vraiment d'être populaire !!
Bravo =)

Stekino (Dimanche 07 Décembre 2008 à 21:03):

Super tuto !!! franchement il m'aide beaucoup pour mon nouveau site.

SFW (Mardi 09 Décembre 2008 à 20:10):

RE Salut,
a ce que je voit la question n'as pas encore été posée alors j'y vais...
Dans la vidéo tu n'as pas expliquer comment mettre les boutons en dessous de l'arrondi! :s Est-ce qu'il y a une balise particulière ou bien un ordre spécifique pour les div?
J'ai déja jetter un coup d'oeil sur Google mais c'est assez confus :s
Merci d'avance
SFW

Sikama (Jeudi 11 Décembre 2008 à 04:48):

Bonsoir...
je voudrez savoir comment integré du css dans un forum que je puisse mettre moi même mon design -_- SVP help

arnaud (Vendredi 12 Décembre 2008 à 20:55):

Tres bon travaille en trois mots : propre clair utile . inutile d'en dire plus :-(°) merci pour ton aide !!

Asti (Dimanche 14 Décembre 2008 à 15:54):

Hello !!
J'ai passé mon week-end à suivre tes 2 superbes tutos !! et franchement bravo !! je suis arrivé au bout !!!
Cepandant j'ai quelques petites question:
- Est-il possible de créer un système de news en PHP pour mettre àjour automatiquement la page accueil via myphpadmin ??
-Si oui comment procéder ??

Merci d'avance et encore bravo !!

Grafikart (Dimanche 14 Décembre 2008 à 16:58):

@Asti : Oui tout est possible.
Au fur et à mesure des tutoriels on va aller vers quelque chose de plus technique avec du PHP. Donc d'ici quelques temps un tutoriel sur un système de news sera disponible. Sois patient

Asti (Lundi 22 Décembre 2008 à 10:46):

Merci beaucoup, sinon j'ai entendu parler de spip un logiciel assez simple pour mettre à jour son site via une administration !!
Est ce bien??

M'hamed (Samedi 27 Décembre 2008 à 11:42):

et cmt on fais pour mettre un design extensible vers le bas ?

M'hamed (Samedi 27 Décembre 2008 à 11:43):

pour Asti ya cutenews, c en PHP et qui permet de mettre des article sasn avoir recours au codage du site, t'as qu'a l'instaler dans ton site

Konkis (Samedi 27 Décembre 2008 à 23:32):

Super tutoriaux, merci beaucoup!

hataka (Lundi 29 Décembre 2008 à 19:16):

Tu utilises quel thème pour windows ?

JOSPLAYER (Mardi 30 Décembre 2008 à 12:37):

HELP ME !!!!!!!!!!!!!!
Tous d'abord felicitation pour ce tutorial très complet et bien expliqué.
Cependant j'ai essayé d'utiliser la base de ton code pour refaire mon site web et en essayant d ajouter un 5 boutons dans le menu, j' ai constaté qu'il passait en dessous des 4 autres. En reduisant la taille de ceux ci j'arrive a les faire entrer sur la meme ligne mais la ligne qui contient les boutons est decalé sur la droite et plus petite par rapport au bloc qui contient le contenu comment les aligné pour que la longeur de la barre menu soit egal à la longeur du bloc de contenu. Je ne sais pas si j'ai été très clair, merci de ta reponse

Pouark37 (Mercredi 31 Décembre 2008 à 00:58):

J'ai déjà suivit votre tuto sur le découpage grâce a vous j'ai réussi a découper mon site
Il se fait tard est j'essayerai d'attaquer demain le codage, vu mon site ça va etre complexe :s
Mais merci pour ces tutos, c'est bien d'apprendre quand c'est son site c'est mieux que de payer pour le faire faire

Mélaine (Lundi 05 Janvier 2009 à 21:46):

HHaa Merci! je débute alors de voir du concret plutot que de lire les bouquins ça change tout!!Tu explique tellement bien que l'on a l'impression que c 'est facile!! En tout cas c 'est bien motivant je vais m'y mettre au plus vite! Mais j'ai juste une petite question si tu as le temps d'y répondre ou pas. Je débute avec dreamweaver MX2004. Est ce que je peux faire exactement la mm chose? Mise à part le language qui est en HTML. Mais incorporé mes fichiers préparé sur photoshop? Merci!! Tu peux me répondre sur stephan_melaine@hotmail.fr! Merciii!

Mélaine (Lundi 05 Janvier 2009 à 23:38):

Bon bha je désespere car il ne se passe rien quand j'entre les mm données mais avec mes propres images et mon propre titre mais rien ne s'affiche a l'aperçu! Grr c'est rageant! Enfin si tu pouvais me dire si c'est normal ou pas.Si tu me conseil un autre logiciel. Merci encore.

random script kiddie (Lundi 12 Janvier 2009 à 21:16):

Salut, bravo pour le tutoriel c'est vraiment de la qualité.

aimad (Mardi 13 Janvier 2009 à 23:04):

Etant développeur php je dois avouer que j'y voit clairement plus clair niveau intégration grâce à toi!
merci l'ami et continue!

mélanie (Jeudi 15 Janvier 2009 à 18:10):

Je cherchais un site pour comprendre design et intégration,

Merci beaucoup pour cette vidéo !

Kadus (Dimanche 18 Janvier 2009 à 15:42):

Salut,
Merci pour ce super tuto ^^ En fait je ne savais pas comment faire pour découper un psd, mais là je commence à comprendre. J'ai du pas mal bidouillé surtout pour les boutons où j'arrivais pas avoir à chaque fois la même taille mais j'ai finalement réussi.

Voici le lien : http://netdream.olympe-network.com/folio/

encore merci ^^

milde (Vendredi 23 Janvier 2009 à 18:37):

Tres bon tuto par contre j'ai une question pour avoir pris dans la DIV conteneur 538px?

Liath (Samedi 24 Janvier 2009 à 18:27):

Merci pour ce tuto vraiment très bien foutu.
Je compte m'en servir pour mettre sur pied un design de site dans lequel sera intégré ultérieurement du code Spip.
J'ai plus qu'à m'y mettre maintenant...

Merci

multras (Dimanche 25 Janvier 2009 à 21:57):

Salut, merci pour ce tuto, sauf que il y a un décalage sur IE6 ...
deux : il y a une différence entre "id" et "class" ... ??????

j'ai fais une page purement avec <div id=""> mais j'ai eu un problème de décalage entre les partie de la page.
Merci d'avance pour votre aide.

Grafikart (Dimanche 25 Janvier 2009 à 22:51):

@multras : Je n'ai pas tenu compte du rendu de ce site sur IE6 donc il y a surement quelques réglage à faire pour le rendre compatible (utilisation de hack par exemples...)

id ne doit être définit pour un élément unique, en bref 2 div ne peuvent pas avoir le même id. Mais au niveau rendu ça ne change rien de mettre id ou class.

ZoiVe75 (Lundi 26 Janvier 2009 à 13:50):

Salut, super tutoriel,mais j'ai un soucis,en faite je fait un menu en hauteur sur le même principe,tout est nickel sur firefox, mais sur IE ça créer un espace sous chaque image de lien.J'ai une image de séparation entre chaque lien.
<ul>
<li><div class= "menu_haut"></div></li>
<li><a href="#">Instalation</a></li>
<li><div class= "inter"></div></li>
<li><a href="#">Dépannage</a></li>
<li><div class= "inter"></div></li>
<li><a href="#">Mise au norme</a></li>
<li><div class= "inter"></div></li>
<li><a href="#">Devis</a></li>
<li><div class="menu_bas"></div></li>
</ul>

J'ai mis tout les margin et pading a 0 mais ça fait rien.
Merci d'avance pour votre aide.

Grafikart (Lundi 26 Janvier 2009 à 14:26):

@ZoiVe75 : Un lien vers le site où tu as ce problème serait beaucoup mieux pour évaluer ton problème.

JacOo (Jeudi 29 Janvier 2009 à 22:17):

Salut super tuto c'est claire et bien expliquer merci beaucoup je connaissait pas du tout le xhtml et le css et avec ce tuto j'ai tout appris d'un coup :D..

multras (Samedi 31 Janvier 2009 à 00:48):

Merci encore Grafikart.

QUESTION: IE6 ne gère pas la transparence des PNG, il y a une solution pour cette problème ????

Merci d'avance

Grafikart (Samedi 31 Janvier 2009 à 01:13):

@multras : Il faut utiliser du javascript. Je crois que certaines personnes ont développés des solutions. Mais idéalement il faut faire un style différent pour IE6 ou on évite les PNG et où on utilise de gif.

Lily (Samedi 31 Janvier 2009 à 05:44):

Ça doit bien faire 4 fois que j'essaie et ressaie d'apprendre le xhtml et le css, et oh god! Je viens de comprendre! Bon...faire en application devrais être plus difficile, sans aucun doute....
Sinon, y aurait-il un code spécial pour faire des rollbare verticale? et que le texte se suivent lorsqu'elle bougent aussi préférablement ^^"

Suuuuuuper tuto!

Josplayer (Mardi 03 Février 2009 à 14:01):

HELP ME !!!!!!!!!!!!!!
Tous d'abord felicitation pour ce tutorial très complet et bien expliqué.
Cependant j'ai essayé d'utiliser la base de ton code pour refaire mon site web et en essayant d ajouter un 5ème bouton dans le menu, j' ai constaté qu'il passait en dessous des 4 autres. En reduisant la taille de ceux ci j'arrive a les faire entrer sur la meme ligne mais la ligne qui contient les boutons est decalé sur la droite et plus petite par rapport au bloc qui contient le contenu comment les aligné pour que la longeur de la barre menu soit egal à la longeur du bloc de contenu. Je ne sais pas si j'ai été très clair, merci de ta reponse

Grafikart (Mardi 03 Février 2009 à 16:11):

@Josplayer : Je te déconseille d'essayer de partir de ma base pour la modifier. Essaie de partir du début avec ton design. Parceque chaque design n'est pas pareil et les parties ne se coderont pas de la même façon...
De toute façon un tutoriel sur "Comment résoudre ses problèmes en CSS/HTML" arrive.

bentenx (Mercredi 04 Février 2009 à 14:12):

Salut,

trop bien ton tuto mes 'ai un ptit probleme c'est que moi je voudrer continuer mes je ne c'est pas comment on fé pour ajouter un autre page.

EX: Donc on ouvre on tombe sur acceuil et quand on clic sur poin2 par exemple (comme sur tra video) pour tomber sur une autre page.

le seule truc quil me faudrais c'est comment les relier les deux page merci en esperent que tu pourra me répondre

sinon super ton tuto

Wr4d (Mercredi 04 Février 2009 à 19:53):

Salut merci pour ton tuto enfaite j'ai pas compris comment tu fais pour trouver la valeur de tes margin, sous photoshop j'ai pas trop trouvé si tu pouvais m'expliquer =) merci

JacOo (Jeudi 05 Février 2009 à 10:47):

Re salut, j'ai un petit problème avec internet explorer que j'ai pas avec firefox en faite j'ai insérez une images par dessus mon design donc j'ai créé une <div> avec tout les réglages qui faut, tout marche impec sur firefox mais sur Ie l'image est complètement décalé à droite il sort du design j'ai tout essayé mais rien y faire si sauf si je règle pour Ie mais la sur firefox l'image passe par dessus le texte :/.
Voici le code :
#image{
background:url(images/ecran.png);
width:268px;
height:362px;
position:absolute;
margin:20px 0 10px 935px;
padding:0;
}

Merci.

Grafikart (Jeudi 05 Février 2009 à 13:17):

@JacOo: la position absolute comme tu l'a définit ne donnera pas la même chose suivant la largeur du navigateur. Je te conseille de te renseigner sur la position:relative afin de placer tes éléments par rapport à leur élément parent.

bentenx (Jeudi 05 Février 2009 à 17:08):

personne ne peut répondre a ma question?

Grafikart (Jeudi 05 Février 2009 à 17:19):

@bentenx : J'avais zappé ta question. Il faut que tu utilise des liens. Par exemple <a href="photos.html">.

Thomas (Jeudi 05 Février 2009 à 17:49):

Franchement ton site c'est de la bombe !!!!
Je connaissais pas mal de chose mais cette présentation vidéos est vraiment adapté au débutant comme moi.
Très bon boulot et merci d'avance pour les prochains tutos ...
Pour PNG sous ie6 j'utilise ca http://jquery.andreaseberhard.de/pngFix/
++

bentenx (Vendredi 06 Février 2009 à 13:16):

ok merci si j'ai encor des probleme je te contact

super ton tuto

bentenx (Vendredi 06 Février 2009 à 13:17):

a oui j'aller oublier est ce qu'il faut que je le joignent a "style.css" si oui, je fais avec sa :
<a href="photos.html"> ????

bentenx (Samedi 07 Février 2009 à 00:09):

Salut alor j'ai encor un question :

la voila
Alor jai le fichier theme et jai un dossier "espace prive" et donc dedans y'a les fichier "espace prive.html" et je c'est pas comment on fait pour retourner dans le fichier theme a l'aide d'une balise vu qu'il est aprè le fichier theme
voila en esperent avoir un reponse merci

Zod (Mercredi 11 Février 2009 à 05:24):

Bah franchement bravo pour tes tutos, ça roxx du poney ! =]

Ah sinon, mdr Dofus-Arena, en flag ! =P

Zod (Mercredi 11 Février 2009 à 05:30):

@bentenx : Si tes deux dossiers ("theme" et "espace prive") sont dans le même dossier, il faut que tu indique dans ton CSS un "../", ce qui dit que depuis le fichier CSS il faut aller dans le dossier parent.

Donc, si ton fichier css est dans le dossier "espace prive" ça ferait :

h1
{
background: url(../theme/mon_super_bouton.png) no-repeat top left;
}

Grafikart (Mercredi 11 Février 2009 à 11:57):

@Zod : "Dofus-Arena, en flag ! =P" ??

Cosme (Vendredi 13 Février 2009 à 16:54):

Déjà merci pour ce fabuleux tutoriaux , pourrais tu nous faire un tutoriaux sur le CSS pour bien le connaître ? car j'ai beaucoup de mal avec le CSS !!
Cordialement Cosme

JNO10 (Vendredi 20 Février 2009 à 00:31):

Merci, magnifique tutoriel.
Ça m'a beaucoup aidé.

BedoZed (Vendredi 20 Février 2009 à 09:24):

Salut ! Je trouve le designe de ton site vraiment génial super léger et vraiment propre dans le cadre d'une formation professionnelle je dois réaliser un site web et je voulais juste savoir si lors de la réalisation de mon site je pouvais te faire part de quelques uns de mes problèmes que ce soit sous toshop ou en intégration avec dreamweaver . J'espère que tu pourras m'aider car c'est très important pour moi et je mise gros la dessus
j'espère que je pourrais compter sur toi merci par avance.
cordialement.

iris (Vendredi 20 Février 2009 à 11:26):

Bonjour
Félicitation pour ces deux tutos absolument claitrs et tres pro pour une débutante comme moi à la recherche d'infos.
Une question: je travaille sous Notepad++, j'ai crée ma page html, ma page css, mes images sont pretes ,le tout dans le meme dossier MAIS losque je souhaite attribuer l'image de fond à mon document (body{background:(image/fond.css);}l'éditeur refuse de prendre en compte la balise "body".Help et merci d'avance.

Nathalie (Vendredi 20 Février 2009 à 16:57):

Merci pour tes tutos "découpage et intégration en CSS". Ils m'ont appris énormément de choses. Actuellement je suis en train de refaire mon site (en suivant tes cours), j'ai terminé ma première page. Je l'ai enregistrée comme modèle (sur Dreamweaver) et je termine les autres (j'ai encore un peu de boulot).
Après avoir lu en entier "Dreamweaver 8" au Editions Eyrolles, je ne comprends rien à la partie PHP. Un chapitre est consacré à l'installation d'EasyPHP, mais en ce qui concerne les Mac !! C'est le néant. En clair, si tu te sens le courage de nous faire un tuto pour installer un serveur d'évaluation sous Dreamweaver et pour Mac OSx, je pense que tu ferais pas mal d'heureux ! A commencer par moi.
Mille merci et à binetôt !

Zod (Lundi 23 Février 2009 à 04:09):

@Grafikart : Dofus-Arena ça me rapelle de vieux souvenirs, c'est tout.

@iris : Dans ton commentaire tu as écrit "body{background:(image/fond.css);" et donc si dans ton code tu as mit la même chose c'est normal que cela ne fonctionne pas.
D'abord il faut préciser "url" avant la parenthèse et on indique dans la parenthèse l'emplacement de l'image en question, là tu écris fond.css donc ça ne risque pas de fonctionner étant donné que .css c'est le format de fichier pour les feuilles de style en cascade (CSS) et non pas une image.
Au final admettons que ton image de fond s'appelle "fond.jpg" alors tu devras écrire ça : body{background:url(image/fond.jpg);}

@Nathalie : Je sais pas si ça peut t'aider, mais pour MAC il existe un logiciel équivalent à EasyPHP lequel est MAMP, la version mac de WAMP (pour Windows) et LAMP (pour Linux)

Nathalie (Lundi 23 Février 2009 à 10:27):

Merci Zod, je vais chercher MAMP sur le web tout de suite ! Je te dirais si j'y arrive. Encore merci !

Nathalie (Lundi 23 Février 2009 à 10:43):

Génial, ça marche ! Encore merci Zod, et pour ceux qui ont le même problème que moi... J'ai trouvé un tutoriel d'installation ! http://www.apprendre-php.com/tutoriels/tutoriel-24-installation-et-prise-en-main-de-mamp.html
Bonne journée à tous !

Robin (Mardi 24 Février 2009 à 10:00):

Peut-être qu'un petit Tuto sur l'adaptation du css selon les navigateurs serrai bien.
Moi perso sa me ferrai beaucoup plaisir car c'est en grande majorité ce problème qui me bloque.

herr (Mardi 24 Février 2009 à 15:03):

Bonjour

J'ai testé presque tous les vidéos mais je vous demande de réalisé un site web comme celui de www.SpaceNet.fr car je trouve leur conception est si intéressante ils ont utilisé Flash pour réaliser l'animation des icônes du menu.
Bon courage

Franckys76 (Mercredi 25 Février 2009 à 23:54):

Tout simplement génial!!!
Cela fait un bon moment que je cherchais un tuto sur le CSS sur le web et impossible de trouver quelquechose de vraiment explicite.Quelle chance d'être tomber sur ce site
Continuer comme ça et merci!

GoldenBoy (Samedi 28 Février 2009 à 03:01):

Frais le tuto, Félicitation et merci.

lazy (Lundi 02 Mars 2009 à 22:16):

Merci pour ce tutoriel, et d'avoir pris le temps de le faire.
C'est explicite et vraiment bien construit, alors bonne continuation, je t'encourage pour la suite.

Bravo !

Thib-17 (Samedi 07 Mars 2009 à 14:35):

Merci pour ce tuto qui est vraiment trop bien.
Tout t'es tutos son super.

Fred (Dimanche 08 Mars 2009 à 01:41):

55 min de pur bonheur, j'y croyais pas mais du code vraiment très très bien !
2 mots => 1 Pro & Bravo

Merci pour cette leçon
Fred

iris (Mercredi 11 Mars 2009 à 22:30):

@zod : merci de ton aide ça marche et...j'avance j'en suis à positionner mes blocs, que penses-tu des floats pour cela?

Studio-W (Jeudi 12 Mars 2009 à 07:08):

Magnifique, tu devrais faire prof, etre aussi comprehensible c'est pas donné a tout le monde. J'ai mis 2h a coder mon site, alors que j'avais fait le design depuis plus d'une semaine. Avant de voir ce tuto jamais j'aurai pensé le coder moi même. Finalement je suis fier de l'avoir fait moi même (avec ton aide).
Merci mille fois Raton Laveur ^^.

Zod (Mardi 17 Mars 2009 à 03:49):

@iris : Bravo, si ça avance c'est que tu es sur la bonne voie.
Pour les floats, bah comme l'a écrit Grafikart c'est pas évident à comprendre quand on débute, donc je te conseil deux sites qui sont bien utiles quand on débute, même s'ils ne sont pas extrêmement complets il y a de quoi bien se débrouiller !
Le SdZ (Site du Zéro) : http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html
Le site d'Alsacréations : http://www.alsacreations.com/tutoriels/

floflo (Mercredi 18 Mars 2009 à 22:44):

salut une petite question qui releve plus du html on a un menu donc plusieurs pages pour que ces pages est le meme design faut til repeter a chaque fois tous les onds ou existe t'il une fonction pour ca (iframe i parait?)

Grafikart (Mercredi 18 Mars 2009 à 23:59):

@floflo : Evite si tu peux les iframe (c'est le mal !). Je te conseille de regarder ce tutoriel, http://grafikart.fr/tutoriels/video/31/decomposer-un-site-en-php pour mieux comprendre comment on peut séparer le contenu du design avec l'utilisation d'un peu de PHP

Xavier (Jeudi 19 Mars 2009 à 13:26):

Bonjour et merci pour ce tutoriel. Il semblerait que sous IE6, cela ne fonctionne pas. Pb de hack PNG d'une part et de CSS d'autre part.

floflo (Jeudi 19 Mars 2009 à 14:11):

je poste la mais ca concerne le tuto sur le decoupage du psd...
On peut apercevoir du texte sur son psd coment est-ce possible je croyais que c'etait juste la maquette et c'est qu'apres avec xhtml qu'on rahoute le texte
ps: faut il maitriser php pour réaliser la fonction include...?

Grafikart (Jeudi 19 Mars 2009 à 18:49):

@floflo : On met du texte sur les design fait sur photoshop ou autre pour avoir une idée de comment sera présenter le texte. Sans ça l'intégrateur ne sait pas quels styles il devra créer pour les paragraphes, titres...

Pour les include tu peux suivre ce tutoriel qui est abordable je pense : http://www.grafikart.fr/tutoriels/video/31/decomposer-un-site-en-php

Hoopla (Samedi 21 Mars 2009 à 02:30):

Tout d'abord , un grand merci , pour tes tutos ,simples et efficaces ,je suis entrain de faire mon site et j'ai reussi a pondre quelques choses grace a toi.
Par contre j'ai un seul petit soucis , je n'ai pas fais exactement comme to par rapport a mon template , je voulais modifié 2 3 truc , mais je crois que j'aurais pas dus car , mon contenu et mon footer , se ballade allegrement sur la page en fonction des diffentes résolutions , comment je peux reussir a les bloquer, alors que je n'ai aucun soucis avec mon header et mon menu.

l'adresse du sit:http://www.hooplafactory.fr
En te remerciant encore une fois et d'avance car ca doit etre tout bete.

mekal (Mardi 24 Mars 2009 à 21:00):

rien a redire c'est du nickel chrome

Monsieurcalin (Jeudi 26 Mars 2009 à 15:06):

Très clair et super utile !
Merci Jojo.

PS: tu ne serais pas un ancien de SRC ??

Skydred (Jeudi 26 Mars 2009 à 23:13):

Bonjour à tous et à l'auteur de ce site et ses magnifiques tutos !

Voilà je débute sur totoshop et le codage en XHTML / CSS, j'ai suivi le site du zéro avant de connaître ton site.

J'ai plusieurs questions a te poser =')

Je commence tout juste l'ébauche d'un site web via photoshop, que j'ai pris soin de découpé suivant ton tuto (j'ai rien fait de bien compliquer), mais je rencontre quelques difficultés d'ordre "présentation" du site web.

J'ai zappé totalement IE6, ce navigateur est totalement a la ramasse...

1) J'ai un fond en dégradé, comment puis je faire pour que le dégradé s'étende a toute la page et non pas seulement a la limite que je lui ai donné lors de ma création Photoshop ?

2) J'ai créer un header ainsi qu'un footer, qui passe en dessous du "corps/contenu" du site.

Comme ton tuto, pour limiter les images trop grandes, j'ai coupé en plusieurs partie, ce qui fait que j'ai du jouer avec les margin pour assembler le "header", le "corps", le "menu_haut" et le "footer".

Etant donnée que la taille de mon site semble être "fixe" est ce préférable que je fasse qu'une seule et même image qui regroupe le head, le corps, le menu, et le footer en une seule et même image ? plutôt que de faire des superpositions hasardeuses ?

Pourrais tu me donner une astuce sur comment tu t'y prendrais pour résoudre ce petit soucis (car mon corps contient également 2 dégradés gris->blanc au top et au bottom), du coup la le rendu est un peu moins jolie que sur photoshop.

Merci pour tes tuto très très explicites, même pour les novices, tu prends le temps de tout expliquer de A à Z, à conseiller a tout ceux qui commencent et même a ceux qui ont déjà acquis pas mal d'expérience apparemment

Merci également d'avance pour tes réponses !

Je me pencherais plus tard sur tes autres tutos j'ai déjà tout ça a régler)


PS: je t'ai mis une image sur mon ébauche photoshop, en général les images c'est beaucoup plus parlant que le reste !

http://skydred.free.fr/WebDesign01.jpg

et mon site en ébauche pour tester : http://Skydred.free.fr

iris (Vendredi 27 Mars 2009 à 11:28):

@zod:"Pour les floats, bah comme l'a écrit Grafikart c'est pas évident à comprendre quand on débute, donc je te conseil deux sites qui sont bien utiles quand on débute, même s'ils ne sont pas extrêmement complets il y a de quoi bien se débrouiller !
Le SdZ (Site du Zéro) : lien
Le site d'Alsacréations : lien "
Merci c plus clair maintenant suis en train de faire la refonte d'un site.....a++

Hoopla (Vendredi 27 Mars 2009 à 14:25):

Encore merci , j'ai reussi a solutionner mon probleme de cadre flottant en integrant l'ensemble dans une nouvelle balise <div>

Par contre , j'ai 2 autres petit soucis , pas tres grave dans l'absolu , mais lorsque j'utilise IE , mon footer qui est en png a tendance a venir se positionner pardessus la partie texte et cache les liens en fin de page , alors que dans FF , tous marche correctement...
toujours sous Ie ma div boutons pour le menu est decalé sur l'axe y et n'est plus collé , j'ai beau essayé de supprimer les marge , mais rien n'y fais ....

Bon c'est pas tres grave le site est fini http://www.hooplafactory.fr

Et Merci encore une fois pour tes tutos geniaux !

Skydred (Dimanche 29 Mars 2009 à 00:25):

Coucou a tous,

bon j'ai tout recommencé de A a Z, tout se passe bien en local, j'ai validé le CSS / HTML en W3C, mais lorsque j'upload le tout sur mon site, le contenu.png ne s'affiche pas -_-'

j'ai réuploader en supprimant tout , toutes les images 3 ou 4 fois de suite j'ai vérifier les noms etc mais rien n'y fait :'(

Toujours ma question au niveau du dégradé sinon ^^

Merci d'avance pour vos réponses , et merci encore pour le tuto, je m'y suis repris a 2 fois, mais malgré la fatigue c'est tellement bien expliqué que j'ai réussi a m'en sortir :p

Cdt

akromalt (Vendredi 03 Avril 2009 à 01:01):

Un grand bravo pour ce tuto tout simplement magnifique ! Je le conseille à tous ceux qui voudrait comprendre le CSS !

Merci !

Pascal (Lundi 06 Avril 2009 à 20:37):

Félicitation pour tes tutos, ils sont excellents et j'apprends beaucoup de choses grace à toi!

Mais j'ai un soucis avec IE6 et le menu, les liens s'alignent les uns en dessous des autres alors que sur les autres navigateurs, aucun souci! Une idee de comment résoudre ce problème?

D'avance merci et à bientot!

Mikiro (Mardi 14 Avril 2009 à 21:16):

Salut, je trouve tes 2 tuto EXCELLENTS. je partais de 0 et voila que je suis a 60% de mon site !! :p

Par contre j'ai un petit probleme, que j'arrive pas a résoudre: le bas n'est pas centré et aligné par rapport a mon contenu. Bien embêtant.... Et quand j'enlève le <br clear="all"> pour remplacer par la classe "clear" ca ne marche pas et je perd le fond gris. embêtant aussi :s. pourtant j'ai suivi a la lettre ton 2eme tuto.

Aliam (Lundi 20 Avril 2009 à 00:22):

Tout d'abord, merci beaucoup pour ce tutoriel !

J'ai une question à laquelle je ne trouve pas de réponses, et malgré mes tests, je n'arrive pas à avancer :
Quelle est la syntaxe à employée pour créer un lien (depuis un par exemple #menu) qui affichera le contenu du lien dans le #contenu ?

Merci d'avance !

Aliam (Lundi 20 Avril 2009 à 08:33):

Rectification, je crois avoir compris ^^

Evy (Jeudi 23 Avril 2009 à 07:35):

Magnifique tuto comme celui du decoupage! Je ne suis ps debutante et fais de la creation de site et graphismes mais vraiment j'ai trouve ta video extremement clair et precise!
Et quel patience aussi devant toutes les demandent innombrables et questions parfois repetitives de tous, car je pense que tu as une vie en dehors de ce site!
Donc un GRAND bravo je garde ton site dans mes favoris!

Aliam ta question a deja ete posee et la reponse detaillee est au dessus...

Evy (Jeudi 23 Avril 2009 à 08:30):

Skydred je me permet de te repondre,j'ai ete voir ton lien (il est vrai qu'avec les liens de poster ca parle toujours mieux que des questions sans)
Ouivtu devrais decouper ton site avec un "Header" et un "Footer" vu que tu as pose la question. Va a la section decoupe et suis bien ce que Grafikart a explique surtout que ton site est simple. Car du coup il parait petit. Pour le degrade je n'ai pas compris de quel degrade tu voulais parle et ou serait le souci par rapport a la decoupe du site.
Et tu devrais sur cette ligne dans ton code : <p class="droite">Posté le <a href="#">29/03/09</a>.<a href="#">9 Commentaires</a></p>

enlever les liens qui sont en double dans la meme phrase, puisque tu n'as pas indique d'adresse. Ou ne laisse qu'un seul lien si tu comptes ensuite ajouter l'adresse plus tard en faisant comme ceci:

<h4>Posté le 29/03/09 - <a href="#" title="commentaires"> 9 Commentaires</a></h4>

(mettre des h1/h2.. est une bonne chose aussi)et toujours penser a ajouter "title" sur les liens.

et dans ta css :
#news h4 {
margin-left: 10px;
}
Puisque c'est dans la Div "news" et tu places une marge-left puisque tu l'as place un peu sur la gauche, j'ai mit 10px mais a toi de voir selon ta marge

cellebrek (Lundi 11 Mai 2009 à 05:06):

Rien à dire, excellent travail que tu nous offres. Merci à toi et pourvu que cela dure. Et maintenant au boulot !

Skydred (Mardi 12 Mai 2009 à 13:18):

Merci Evy pour tes réponses (je suis encore au boulot T_T) je regarderais et modifierais tout ça une fois chez moi :')

au niveau du dégradé c'est normal que tu ne le vois pas car je l'ai tout simplement remplacé par un fond qui affiche des bandes en diagonale (un peu comme sur deezer)

que j'ai fait via Photoshop.

je pourrais le remettre si tu veux sur une page test

Pour ce qui est des liens effectivement, c'était juste pour faire des tests de visualisation ça pointe vers rien du tout :')

et le site est effectivement petit, j'ai essayé de l'allongé mais je trouve le rendu moins jolie donc je laisse comme ça il s'allongera au fur et a mesure que je posterais des choses dessus ^^

je me lance dans l'apprentissage du php/mysql en ce moment donc j'ai un peu laissé le site comme ça

Merci encore pour ton commentaire très instructif

Si tu veux mon contacte n'hésite pas

Cdt,

Sky.

cerise (Mardi 12 Mai 2009 à 17:05):

Franchement bravo

julien (Mercredi 13 Mai 2009 à 22:22):

Bonjour, après une longue recherche sur le net de création de site web en vidéos,je tombe sur ton tutoriels, qui est très bien, rien a dire, clair, précis, en plus moi qui n'y connais rien absolument rien, je suis resté sur ma chaise a te regarder jusqu'au bout. Je suis bouche-bée. En tous cas félicitation a toi. Je vais faire passé la vidéos a des amis qui veulent apprendre.

Merci et si j'ai des questions je me tournerais vers toi si tu n'y vois pas d'inconvénient.

Bonne soirée

Asm (Jeudi 14 Mai 2009 à 22:27):

Superbe tuto ! Il m'a énormément aidé lors de ma découpe.

Un grand merci à ce site !

Evy (Mardi 19 Mai 2009 à 02:49):

pour Skydred, comme je te l'ai explique il faut que tu decoupes ton site en Header etc.. pour qu'il ne paraisse pas si petit, il est toujours mieux d'avoir un site decoupé en plusieurs partie bien distinctes comme l'explique tres bien Grafikart dans son post sur cette partie. il est normal que tu ne puisses pas "l'allonger".. Avec photoshop son expliction sur la decoupe est tres importante en faite. Et vraiment on ne peut pas faire plus clair et plus pro que ses explications qui apprennent parfaitement aux debutants. Si tu ne connais pas bien Css, perso je te conseille de bien t'initier en premier dedans, mais c'est mon avis.. Oui si tu veux tu peux poster le site avec les degrades, mais en meme temps si tu l'as laisse tomber.. en tout cas encore un grand bravo a la personne qui s'est embete a faire ces post superbe travail!!

nik (Mardi 19 Mai 2009 à 23:51):

Merci, c'est impeccable !

Charles30 (Lundi 25 Mai 2009 à 03:15):

Super MERCI BEAUCOUP !! BON TUTO !!

WizArd (Mardi 26 Mai 2009 à 17:18):

Salut raton laveur, super tuto !! vraiment simple et super bien expliquer.
Une question par contre vu que tu es vite passer dessus, comment as tu fait pour récupérer le code hexadécimal de la couleur du fond ??? voila c'est juste sa

Phiip (Jeudi 28 Mai 2009 à 21:36):

C'est vraiment excellent... bon, je connaissais la plupart des notions, mais dans le désordre.
Merci !

T.OM (Vendredi 29 Mai 2009 à 22:28):

Bonsoir,

J'aimerais vous remercier bcp pour ce très bon Tuto et grace à ce Tuto que j'ai appris bcp de chose. Ce pendant j'aurrais besoin un d'aide s'il vous plait, car là, je suis bloqué sur ce que je voudrais bien faire.

J'explique le souci :

j'aimerais créer une 2e liste à puce juste en dessous du menu principal, et j'ai beau essayé avec plein de truc dans le Xhtml & CSS mais je n'ai pas réussi à la faire correctement.

pourriez-vous m'aider pour le code à insérer et l'endroit où y mettre pour que ça marche correctement s'il vous plait. Je vous en remercie bcp d'avance.

Voici ce que j'aimerais bien faire avec l'exemple juste en dessous.

http://miki19.free.fr/

Hackira (Samedi 30 Mai 2009 à 14:15):

Salut
Je cherchais un tut sur comment coder un site pour le faire proprement et bien je crois que je viens de trouver car il est très clair, très bien expliqué, et super simple quand n a suivi le découpage(très facile aussi et très bien expliqué). par contre j'aurais quelque petits problèmes a t'exposer donc si je peut te laisser mon adresse msn @+ et merci pour ce tuto formidable.

MegaTion (Mardi 09 Juin 2009 à 12:26):

Thx For this Tutreil. Good Job

oh (Samedi 13 Juin 2009 à 16:49):

http://www.azote51.fr

Aude (Vendredi 10 Juillet 2009 à 15:05):

Merci beaucoup pour ce tuto Grafikart. J'ai appris plein de choses concernant le codage. Grâce a toi mon site a une meilleure allure ^^. http://sweet-paradise.fr.cr (Encore en construction). Cependant , un problème subsiste. J'ai tout fait moi même (En regardant des tutoriels biensur) , quand je navigue sur mon site avec mon ordi' portable, tout est parfaitement a sa place. Tandis que si je navigue a partir de mon ordi' fixe , le footer est très décalé, c'est normal ? .. Je pense que ça viens de la taille de mon écran, qui est beaucoup plus grand sur mon ordi' fixe que sur mon portable, mais je ne sais pas si c'est vraiment ça.

J'espère que tu m'aideras. ^^
Aude.

Sex shop (Dimanche 12 Juillet 2009 à 14:03):

Bonjour,
Très bon ton tutoriel. Bravo

skar (Dimanche 12 Juillet 2009 à 14:22):

salut super tuto!!!!!!!!!!

et si je veut rajouter des photo ou des video je fais comment? MERCI

COB (Lundi 13 Juillet 2009 à 21:42):

Félicitation pour ce tutoriel.
Le premier tuto expliqué dans son intégralité sur le web.
Très bien expliqué...
Tu m'as donné envie de me lancer ds l'aventure de la découpe.
Encore merci

Zahikiel (Mardi 14 Juillet 2009 à 16:21):

@skar

Si je dis pas de bétise:

Pour placer une image dans le contenu il te suffit pour cela de la mettre dans une borne HTML :
<img src="tonimage.jpg"/>

ambar (Lundi 20 Juillet 2009 à 20:08):

Super tutoriel bravo. Est t'il possible de récupérer ton image de fond et travailler dessus pour un site ?

Ulmo (Mardi 21 Juillet 2009 à 16:02):

Génial comme tuto !! Merci !

3aguid (Lundi 03 Août 2009 à 01:27):

bonjour
j'ai pas trouver la vidéo de tutoriel .. ou je peux la trouvé ???

Tellure (Mardi 04 Août 2009 à 10:53):

Bonjour et merci pour ton tutoriel fantastique!

planete.game57 (Samedi 08 Août 2009 à 19:19):

Salut Jojo !

C'est un très beau travail !
Tout est clair et méthodique !
Merci!
Continue ainsi!

SQL86 (Mercredi 19 Août 2009 à 20:30):

FÉLICITATION,

Jamais vu un tuto aussi bien fait !
Je commence depuis 2semaine a me servir de photoshop et d'apprendre a codé, et bien tu m'a beaucoup aider !

Bonne continuation !

ilomir (Lundi 24 Août 2009 à 12:09):

très très bon! merci!

ilomir (Lundi 24 Août 2009 à 21:42):

par contre j'ai un petit problème avec mon site car quand j'essaye de mettre une balise <h2> ou un ul li le bas ou le haut de mon menu saute Oo http://ilomir.e3b.org/help.jpg

-=$!m0n=- (Lundi 31 Août 2009 à 09:59):

Excellent tuto ! Tu expliques vraiment bien, je viens de commencer avec photoshop et j'ai tout compris !
Merci beaucoup et bonne continuation !

MarcBook (Lundi 31 Août 2009 à 13:48):

Trop bien expliqué :O Merci beaucoup et continue :D

Fatzor (Jeudi 03 Septembre 2009 à 19:38):

Les tutoriels vidéos, c'est bien, surtout grâce à votre belle réalisation.
Néanmoins, question pratique, il serait préferable de réaliser à côter un tutoriel rédigé à l'écrit ( clavier :P ).

7alouma (Lundi 07 Septembre 2009 à 13:58):

Merci pour le tutoriel, mais j'arrive pas a le visualiser car il est venu de site dailymotion
et ici chez nous c'est un site malveillant est ce que je peux le voir autrement
Merci j'avais besoin

pitch67 (Jeudi 10 Septembre 2009 à 11:54):

La vidéo n'est plus accessible... dommage ce tutoriel m'aurait beaucoup aidé

pitch67 (Jeudi 10 Septembre 2009 à 11:57):

J'ai rien dit, c'est mon mac qui fait des siennes

Quatre_epices (Jeudi 10 Septembre 2009 à 22:20):

Bonsoir!
J'ai tout bien fait le découpage comme suivi dans le tuto précédent. Jusque là aucun soucis (enfin.. J'espère)
En revanche, impossible de trouver le chemin exact de mon image de fond pour qu'elle apparaisse dans le navigateur. J'ai essayé différents noms et rien
Qu'est-ce que j'ai fait de mal ? snif

Grafikart (Vendredi 11 Septembre 2009 à 02:34):

Aurais-tu un exemple en ligne ? Sinon je dirais que tu as surement mal indiqué le chemin (attention aux majuscules)

Psyco (Samedi 12 Septembre 2009 à 20:40):

Bonjour,
Très bon tuto néanmoins j'ai un petit soucis.
Lors que je mets mes boutons ils sont tous décaler sur la gauche.
Comment y remédier ?
J'ai utilisé le même code que dans le tuto.

Psyco (Dimanche 13 Septembre 2009 à 16:19):

Bonjour,

J'ai réussi à régler le problème des boutons, j'avais un ";" qui me manquait je ne sais plus ou :D
Mais tout de même j'ai un autre soucis ... :s
Sous IE toute les images qui contiennent un fond transparent (les bords arrondi ne doivent pas ce voir) malheureusement ils apparaissent...
Comment faire pour que ce ne soit pas le cas ?

Merci de votre aide.

Psyco (Dimanche 13 Septembre 2009 à 16:47):

Problème résolu j'ai mis toutes les images en .gif

Encore merci pour ce tuto vraiment complet

mask2mort (Mardi 15 Septembre 2009 à 19:30):

salut a tous j'avais une petite question : dans ce tuto j'ai remarquer que dès tu crées les menu ul li, elle s'affiche pas en retour à la ligne toute a droite mais légèrement décaler à partir de la droite. Est ce que c'est normal ?? parce que j'arrive pas à la placer mon menu toute a droite. merci de votre aide.

Delo (Samedi 19 Septembre 2009 à 00:22):

Vraiment, c'est un bon tutoriel

camaar (Lundi 28 Septembre 2009 à 21:54):

Bonjour,
Bravo pour ces tutos
J'ai quelques question:

- j'aimerai faire un design comme celui-ci sans barre de defilement
apres quelques recherches j'ai trouver la fonction { overflow: hidden; } mais ou le placer ? et comment ajuster le design en fonction ? quelle dimension quel code pour qu'il soit lisible sous IE et MF ?

- je voudrais aussi incorporer une galerie simple viewer dans le conteneur j'ai trouver ce code "INTEGRATION GALERIE SIMPLE VIEWER



<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="600" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=6,0,40,0"><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="xmlDataPath=http://cali2lille.free.fr/album/simpleviewer/gallery.xml " /><param name="src" value="http://cali2lille.free.fr/album/simpleviewer/viewer.swf " /><embed type="application/x-shockwave-flash" width="500" height="600" src="http://cali2lille.free.fr/album/simpleviewer/viewer.swf " flashvars="xmlDataPath=http://cali2lille.free.fr/album/simpleviewer/gallery.xml " bgcolor="#ffffff"></embed></object></p>
"mais le design ne suis pas meme lorsque je change les dimension de l'object
comment regler ce probleme ?


Merci d'avance



Cyrix (Lundi 28 Septembre 2009 à 22:24):

- Tu dois le mettre dans le body :
body {
overflow : hidden;
}

- N'utilise pas les scripts tout prêt, c'est pas très bon et jamais tu progresseras avec ça. Pour faire une galerie, tu as <a href="http://www.grafikart.fr/tutoriels/video/slider-javascript-jquery-54 ">un tutoriel qui est présent sur le site</a> et qui va t'aider. Bon, c'est une slider, mais le principe reste exactement le même.

Cyrix (Lundi 28 Septembre 2009 à 22:24):

Désolé pour le lien, il a foiré : http://www.grafikart.fr/tutoriels/video/slider-javascript-jquery-54

camaar (Mardi 29 Septembre 2009 à 17:50):

Merci bien

messie (Mercredi 30 Septembre 2009 à 17:18):

salut, je tiens tout d'abord à te remercier pour ce superbe tuto et j'aimerais savoir comment faire pour me procurer la video car j'ai pas tjours accès à internet...merci
mon mail est messie25@live.fr

Sex toys (Jeudi 01 Octobre 2009 à 11:53):

enfin un tuto clair et très visuel, merci

camaar (Samedi 03 Octobre 2009 à 21:09):

bonsoir,

J'aimerais faire le même menu que celui proposer ici mais vertical
comme ici "http://www.freetemplatesonline.com/templates/Free-Art-Photography-templates-119.html "

J'ai chercher un peu sur le net et bidouillé à partir des 2 templates mais je n'arrive pas à trouvé. Je pense qu'il faut changer le a:hover mais je debute et j'avoue etre un peu perdu ^^

Merci d'avance

camaar (Dimanche 04 Octobre 2009 à 15:25):

J'ai reussi à creer le a:hover mais les boutons se suivent et je n'arrive pas à les placer les uns au dessous des autres.

Merci

seo (Jeudi 15 Octobre 2009 à 22:52):

C'est vrai que c'est vraiment excellent comme tutoriel. L'ai indiqué à des débutants, ça va plus vite que de lire le site du zero et alsa réunis !!

Woa (Dimanche 18 Octobre 2009 à 18:57):

Merci pour ce magnifique tutorial,
mais je me pose une question,
il faut refaire le style css pour chaques pages?
(ex: je veut faire un galerie avec zoombow)
Je devrais refaire tout le style, ou juste recoder le contenue?

pamou (Dimanche 18 Octobre 2009 à 21:22):

1) c'est zoombox et non zoombow, non? ^^
2) si j'ai bien compris ta question, non tu n'auras qu'a adapter le contenu

A+
pamou

Woa (Mercredi 21 Octobre 2009 à 14:37):

Oui c'est bien ZoomBoX pardon ^^
Merci

Free-Lancer (Mercredi 21 Octobre 2009 à 19:00):

Bonjour et bravo pour ce tuto vraiment bien expliqué,

mais étant débutant je n'arrive pas a adapter cela avec un menu vertical sur la gauche au lieu d'un menu horizontal.

Je me demandais si il vaut mieux créer deux conteneurs au lieu d'un seul ?
(L'un pour le menu de 300px pour mon cas et l'autre de 700px pour le conteneur)

Voici une petite image de mon thème : http://www.servimg.com/image_preview.php?i=74&u=11807308

Cela serais plus simple à modifier par la suite non ?

Merci d'avance de votre aide.

Grafikart (Jeudi 22 Octobre 2009 à 00:54):

Pour le menu de gauche tu peux reprendre la technique utilisée dans le tutoriel pour réaliser la sidebar de droite.

Free-Lancer (Jeudi 22 Octobre 2009 à 11:51):

Bonjour et merci de ta réponse j'ai réussi a mettre en place mon contenu ainsi que mon menu de gauche, par contre je bloque maintenant sur la façon d'intégrer les photos présente sur ma page d'accueil. (imbriqué dans des div ? en css direct ? )

A savoir que cette page ne sera utilisé que pour ma page d'accueil, ensuite j'aimerais intégrer sur la partie de droite (contenu) du texte sur la gauche et une galerie photo sur la droite !!!

Ma question est donc : est ce que je dois créer une page css pour chacune de mes pages ? Car j'aimerais que par la suite je ne soit pas obligé de modifier tout le temps le css si je dois mettre une photo plutôt qu'un diapo, ou un texte, ou des liens,...

Merci d'avance de vos réponses.

PS: me serait il possible de t'envoyer mon code pour que tu me dise si il y a de grosse erreur de conception ?

Woa (Jeudi 22 Octobre 2009 à 18:50):

Bonjour, j'ai plusieurs questions!
Je voudrais savoir si il était possible de mappé l'image de fond?
(comme "aera" pour le html.)
Existe t-il une class ou autre pour faire un texte défilant verticalement dans un cadre défilent? (pour afficher les news plus facilement)

merci !

Woa (Jeudi 22 Octobre 2009 à 20:05):

Re bonjour et désoler pour ce double commentaire :o
J'ai trouver une solution pour ma première qui marche à merveille:
<div style="overflow:auto;width:XXXpx;height:XXXpx;"> votre texte ici </div>
Par contre, comment customiser la barre de droite (www.WoaWorld.com/test pour voir la barre)
J'ai aussi repéré un problème: quand je réduit la page internet le fond bouge, j'ai essayé le "background-position" cela ne marche pas.
Merci d'avance,
Amicalement, Woa

slimeVidas (Samedi 07 Novembre 2009 à 23:04):

Bravo pour ce magnifique travail.J'ai découvert ce site il y a un mois et depuis j'y passe pas mal de temps.
La musique de fond utilisée dans ce tuto me plait beaucoup.serait-ce trop vous demander de m'envoyer les noms des auteurs ou le titre de leur album ?
cordialement.


morgenstein (Mardi 10 Novembre 2009 à 18:46):

bonjour je suis membre premium depuis aujourd'hui et je tiens à te féliciter pour ce site extremement bien fait !

Par contre j'ai une question, comment fait-on pour se procurer les ressources que tu utilises pour ce tuto ? (tu dis au début que les ressources sont récupérables...)

Merci et bonne continuation

morgenstein (Mardi 10 Novembre 2009 à 19:03):

J'ai oublié un détail, j'ai tenté de faire ce tuto et tout à l'air de fonctionner, mais le fond du conteneur ne se duplique pas en Y pour arriver en bas de ma DIV.
J'ai bien le haut du conteneur qui s'affiche mais pas son "corps". Pourtant tout à l'air OK concernant mon .png de 1px de haut... Une idée là-dessus ? Si quelqu'un veut m'aider, je peux envoyer mon projet zippé. Merci d'avance !

Grafikart (Mardi 10 Novembre 2009 à 19:59):

Ah tu bien mis le clear après les float, le lien de l'image est bon ?
Sinon envois le lien vers une version en ligne de ton site, ça sera plus facil d'identifier le problème.

morgenstein (Mercredi 11 Novembre 2009 à 11:45):

Ca y'est j'ai trouvé, après avoir passé des heures à tout retourner dans tous les sens dans mon CSS, j'ai vu une ligne qui posait problème : j'avais mis un height de 800px au #conteneur. J'imagine donc que lorsque cette valeur est entrée, le repeat-Y ne marche pas. Désolé pour le dérangement et bonne journée à tous !

Lawy (Mercredi 11 Novembre 2009 à 14:21):

Super tuto *w*
Il me reste plus qu'une chose à faire, l'essayer et y arriver ^^!
En tout cas bravo et merci de l'avoir fait =3

stivinhoo (Mardi 17 Novembre 2009 à 18:50):

j'ai tout fait exactement comme toi mais mon je bloque dès le début (mon fond ne s'affiche pas). J'ai fait les dossiers comme toi, nommé comme toi, j'ai vérifié les majuscules etc... j'ai beau tenter 20000 trucs, nada! Ps: je suis sous mac et utilise smultron comme deiteur.

Baptiste (Mardi 17 Novembre 2009 à 19:22):

Salut!
tu bloc à partir d'où? dès l'installation du background? tu peux montrer tes débuts de code stp!
++

stivinhoo (Mardi 17 Novembre 2009 à 19:45):

Salut!

Voici mes codes:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to WARE FC OFFICIAL</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
</body>
</html>

et

body{
background:url (theme/fond.jpg);
}

je n'arrive toujours pas à trouver mon erreur, et ça me bloque la suite de mon apprentissage ^^. Le titre du site no problem, mais le fond...

Thanks!

29.02 (Mercredi 18 Novembre 2009 à 12:57):

<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>

Vérifie que le chemin est bon pour ta feuille de style.

stivinhoo (Jeudi 19 Novembre 2009 à 00:05):

euh c'est à dire ? oui je l'ai bien mis

Baptiste (Mardi 17 Novembre 2009 à 20:02):

alors je sais pas si ça change grand chose!
dans le css après background: tu mes un espace, mais pas d'espace après url: donc essaye comme ça:
background: url(theme/fond.jpg);
sinon je vois pas trop!

stivinhoo (Mardi 17 Novembre 2009 à 20:04):

Malheuresement j'avais déjà essayé :/

Badbart (Mercredi 18 Novembre 2009 à 00:45):

Comme Batiste la dit, enlève l'espace après ça marche sans problème. Enfin si tu as bien une image 'fond.jpg' dans un dossier 'theme' ...

stivinhoo (Jeudi 19 Novembre 2009 à 00:04):

non, non je confirme, même comme cela ça ne marche pas. et j'ai bien le fond.jpg dans le dossier theme. J'arrive pas à voir ce qu'il ne va pas.

Badbart (Jeudi 19 Novembre 2009 à 07:11):

En background alors au lieu de ton image met : background:#808080;
Si le fond ne change pas ton css n'est pas chargé.
Si le fond change, c'est ton image qui n'était pas chargé.
Dans les 2 cas tu devras BIEN vérifié tes nom de fichier+extention, et la location.
styleS.css au lieu de style.css , fond.PNG au lieu de fond.jpg , background: url(theme/fond.jpg); au lieu de background: url(../theme/fond.jpg); peuvent etre des erreurs bête par exemple...

stivinhoo (Jeudi 19 Novembre 2009 à 18:16):

Lorsque je mets une couleur effectivement ça me l'affiche. Mais pas l'image. J'ai beau tout verifier, je ne vois rien de mauvais dans mon ecriture. C'est insupportable lol

stivinhoo (Jeudi 19 Novembre 2009 à 18:20):

CA Y EST C'EST BON lol
Merci Baptiste, c'était effectivement:

background: url(theme/fond.jpg);

J'ai du mal le copier la dernière fois!

Merci à tous c'est sympa

stivinhoo (Jeudi 19 Novembre 2009 à 19:06):

Au passage, si quelqu'un souhaite m'aider ou me realiser mon site le temps que j'apprenne comme il faut, je suis largement preneur!

valentin45000 (Mercredi 02 Décembre 2009 à 18:39):

Bonjour, apparament il est impossible de faire un lien sur une div.
Et justement c'est se que je veut faire. En faite la div est vide, et je voudrais faie un lien dessus. Comment je peut faire ?

Merci d'avance.
Cordialement.

Grafikart (Mercredi 02 Décembre 2009 à 22:51):

Prend le problème dans l'autre sens, tu fais un lien et tu le stylise en CSS (en le mettant en display:block par exemple)

bentenx (Vendredi 04 Décembre 2009 à 19:17):

Salut moi j'ai un bleme c'est que quand je veux lier index.html et style.css et que je met le background ba kan je mais tout bien sa ne me mais rien meme si j'enregiste et que j'actualise la page apre c(est bizare HELP ME !!

Badbart (Vendredi 04 Décembre 2009 à 19:28):

Rien compris

Grafikart (Vendredi 04 Décembre 2009 à 20:21):

La même c'est pas clair. Le HELP ME en majuscule t'aide pas non plus

bentenx (Dimanche 06 Décembre 2009 à 17:44):

c'eest bon sa c'est resolut maintent quand je veux mettre mon top.pgn je fait comme toi et tous et après j'actualise ma page y'a pas mon top qui s'affiche

pmmtm (Lundi 07 Décembre 2009 à 23:21):

Bonsoir Jonathan(ou Grafikart), pourrais tu m'envoyer le code Html et css du site? stp. Précédemment il y 'avait un lien de download, peut être pour des soucis de rentabilité tu l'a enlevé, mais je te le demande par extrême nécessité. Merci

Grafikart (Mardi 08 Décembre 2009 à 00:06):

Je l'ai retiré suite à un trop grand nombre de personne qui utilisait le design pour leur site. Si tu es conscient du fait que tu n'a pas le droit de l'utiliser envois moi un mail et je t'enverrais le design.

Shine458 (Jeudi 10 Décembre 2009 à 07:40):

Salut, bravo pour ta pédagogie. Juste une remarque pour les PNG transparents : je doit souvent intégrer des design qui nécessitent de la transparence (ex : coin arrondi placé sur un bloc extensible avec un fond non-uniforme) et il existent des méthodes pour les rendre compatible avec ie6, sans utiliser de hack css ni de code javascript (il faut combiner plusieurs techniques). Vous pouvez me contacter sur mon site si vous désirez que je vous explique : http://preprod-sbeirnaert.fr

Iguanes (Dimanche 20 Décembre 2009 à 21:22):

Et encore parfait !

Sapri (Samedi 23 Janvier 2010 à 18:52):

Salut !!

C'est superbe ! Cela fait plus de 4 mois que je cherche un BON tutoriel sur internet pour apprendre à coder. J'ai essayer le SdZ mais la lecture n'est pas ma tasse de thé. J'ai trouvé plein de tuto en vidéos mais jamais satisfait. Et là je trouve quelque chose de magnifique superbement expliqué !

Bravo en tout cas et encore merci ! Ton site est trop beau !


Bien à toi.
Cordialement,

just4graph (Dimanche 31 Janvier 2010 à 15:04):

Salut !!
alors mon problème a moi c'est que le contenu.png ne s'affiche tout simplement pas pourtant le css est bon

#contenu{
padding:0 20px;
background-image:url(media/contenu.png) repeat-y left;
}

par rapport au fond blanc ( le contenu.png qui s'agrandi au fur et a mesure ) le mien j'aimerai qu'il fasse 900 px de large avec l'effet de d'ombrage compris dedans.

Akijah (Lundi 01 Février 2010 à 12:04):

Merci à toi pour ce tuto très bien expliqué il m'a été d'un grand secours !

lass (Dimanche 14 Février 2010 à 16:02):

bonjour je suis nouveau sur votre site et je trouve superrrrrr et voudrais tout d'abord obtenir cette image pour suivre votre tuto SVP

Rapha (Dimanche 14 Février 2010 à 16:59):

Je cite Grafikart :

Grafikart (Mardi 08 Décembre 2009 à 00:06):

Je l'ai retiré suite à un trop grand nombre de personne qui utilisait le design pour leur site. Si tu es conscient du fait que tu n'a pas le droit de l'utiliser envois moi un mail et je t'enverrais le design.

man11110000 (Mercredi 24 Février 2010 à 17:50):

bonjour,

grafi, pourquoi as-tu supprimé le poste?

mpassionate (Jeudi 18 Mars 2010 à 20:22):

Bonjour,
J'ai un problème avec la balise #contenu et la balise #footer (ces des noms que j'ai inventé). Il y a un espace qui se crée et je veux l'enlevé avec une balise "clear", mais le problème il ne veux pas l'appliquer pour enlever l'espace et que la balise #footer puisse collé à la balise #contenu.

Merci de votre aide en avance!

Drayark (Jeudi 18 Mars 2010 à 22:44):

Bonjour pour que l'on puisse t'aider il faut que tu nous donne plus de détailles ?
L'argument clear supprime un flottement float. Il ne sert pas à supprimer un espace.

++

mpassionate (Dimanche 21 Mars 2010 à 03:20):

Ok merci du conseil! Je vais faire plus attention la prochaine fois. :P

ham (Vendredi 09 Avril 2010 à 00:00):

Juste merci

coeos.pro (Mercredi 14 Avril 2010 à 11:54):

Bonjour, j'adore ce site, au début de la vidéo vous mettez que vous avez trouvez le doctype sur internet, je me permet de donner une adresse qui repertorie les différents doctypes: http://www.w3.org/QA/2002/04/valid-dtd-list.html

ilitch (Mardi 27 Avril 2010 à 16:38):

Juste un petit commentaire pour te dire bravo et merci pour ton tuto clair et précis.

davidh (Mardi 11 Mai 2010 à 21:39):

Bonjours je suis nouveau sur le site.
Je trouve les tuto super car je voudrais créer un site, mais le problème c'est que je ne connaissais pas du tout le langage html avant se tuto, et mon site est un peut différent... j'ai fait la moitié du tut mais là j'ai arrêté, ça fait pas du tout se qui faut et j'arrive pas à comprendre c'est quoi l'erreur... mes cadres se place pas au bonne endroit... si quelqu'un veux m'aider, je peux lui envoyer mes fichiers .html .css et les images...
merci d'avance.

solid-snake (Mercredi 26 Mai 2010 à 12:04):

Un très grand merci pour ce super tuto.

RUTHIEGrant20 (Mercredi 02 Juin 2010 à 00:37):

If you are in not good state and have no money to go out from that point, you would require to take the <a href="http://lowest-rate-loans.com/topics/home-loans ">home loans</a>. Just because that will aid you for sure. I take student loan every single year and feel myself fine just because of that.

Jatimix (Vendredi 04 Juin 2010 à 00:20):

Bon tutoriel et
Bonne musique, c'est rare d'entendre du cinematic orchestra...

melka75 (Vendredi 04 Juin 2010 à 00:49):

salut comment faire pour regarder ce tuto ? merci

emi (Dimanche 27 Juin 2010 à 16:22):

Salut,
Bon, je ne suis pas fan des commentaires, mais là, ..., CHAPEAU. J'ai découvert ton site il y a 3 jours, et cela fait trois jours que je dévore tes tutoriels. Je fais des études en graphisme et apres avoir explorer pendant un an du pré-presse, je m'interesse fortement aux sites web. Je n'y connaissais rien et je suis contente des informations apprises et de ton réel savoir faire ainsi que de ta manière tres professionnel d'expliquer. Merci beaucoup et bonne continuation

Raph (Dimanche 27 Juin 2010 à 19:01):

Bravo pour ton tutoriel je galerai trop a faire un menu tout é ta vidéo est tellemennt bien faite ke ji sui arrivé du premier coup !

Bonne continuation !

Cloud (Mardi 20 Juillet 2010 à 11:47):

Bonjour,
Merci pour ce tuto !
J'ai suivis toutes les étapes mais j'ai un petit problème qui est lié au redimensionnement du navigateur. C'est à dire que le background n'est pas fixe par rapport au bloc du menu. Ce qui implique que le background se décale vers la gauche quand on rétrécie le navigateur,ainsi je perds la moitié de l'image et on voit super bien le décalage, comment je peux faire pour éviter cela ?
Merci d'avance

MAX-ADRENALINE (Mardi 10 Août 2010 à 19:42):

merci pour ce tuto

MilkywQy (Mardi 17 Août 2010 à 04:13):

Bonsoir je vien de decouvrir ton site et je tiens a te remercier pour ce que tu fais.
J'ai regardé quelque une de tes video et franchement je te dis bravo, trés bien expliqué. Encore merci a toi.

Mister-d (Vendredi 20 Août 2010 à 15:10):

salut, moi j'ai a probléme a parti de 22min 32, je n'arrive pas a afficher mes boutons, j'ai bien suivi, mais les boutons du menu ne s'affiche pas.
Mais sinon félicitation pour ce tuto :p

 

Ajouter un commentaire

Si vous rencontrez un problème avec votre code et que vous avez une question spécifique utilisez plutôt les questions pour avoir une réponses rapide.

Vous devez activer javascript.
 

 

Suivre les commentaires de ce tutoriel