communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [En pause] [journal de bord]codage... gné?

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
amylet

Illustre illustrateur
avatar
Illustre illustrateur


Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: [En pause] [journal de bord]codage... gné?   Mar 11 Déc 2012, 10:07

Il y a un peu plus d'un mois, j'ai créé un blog sims sur Tumblr. Et j'ai compris qu'il était grand temps de se mettre au html et au Css, parce que je ne savais même pas faire un lien  albino Donc direction les tutos (je me suis aussi aidé du site du zéro) Après plusieurs semaines à patauger, je commence à m'en sortir, mais c'est pas encore ça xD

Mon objectif ultime, c'est de créer moi même l'apparence de on tumblr, mais bon, ça c'est pas vraiment réalisable :lol:donc je vais commencer par créer des pages annexes ^^


Donc je vais poster ici mes essais, réussis ou non, n'hésitez pas à commenter et à mes donner des conseils Smile

Pour commencer, voici mon essai le plus abouti, j'ai fait ça cette semaine, c'était sensé être la base de la page qui devait me servir pour les "resources" en CC de mes images, mais finalement ça a un peu (beaucoup) dévié, mais ça m'a permis de m'exercer pas mal.
J'ai pété quelques câbles en le faisant : pour l'image arrondie que j'arrivais pas à placer à gauche finalement j'ai réalisé qu'il fallat que je fasse ça avec "float") et pour les cadres textes qui arrêtaient pas de se mettre n’importe comment. (je vous passe les détails parce c'est toute une histoire  Rolling Eyes )









Amylet

[TITRE QUI TUE]

titre titre titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis turpis, tincidunt eu dictum sit amet, fermentum vitae arcu. Mauris a tristique dolor. Mauris sagittis, mi et cursus tincidunt, orci dui accumsan sem, ac lacinia est nulla sit amet odio. Quisque interdum dignissim urna, nec facilisis nisl vehicula eu. Donec nec mauris ac libero rutrum rhoncus. Maecenas nibh erat, imperdiet eu pellentesque sagittis, pharetra vel ante. Maecenas eleifend rhoncus aliquet. Curabitur eget ligula augue. Ut elementum dictum neque, id vestibulum purus lacinia quis. Etiam fermentum velit et nunc blandit quis vestibulum ipsum dapibus. Sed ac sodales lorem. Vestibulum porttitor sagittis enim luctus varius.

titre titre titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis turpis, tincidunt eu dictum sit amet, fermentum vitae arcu. Mauris a tristique dolor. Mauris sagittis, mi et cursus tincidunt, orci dui accumsan sem, ac lacinia est nulla sit amet odio. Quisque interdum dignissim urna, nec facilisis nisl vehicula eu. Donec nec mauris ac libero rutrum rhoncus. Maecenas nibh erat, imperdiet eu pellentesque sagittis, pharetra vel ante. Maecenas eleifend rhoncus aliquet. Curabitur eget ligula augue. Ut elementum dictum neque, id vestibulum purus lacinia quis. Etiam fermentum velit et nunc blandit quis vestibulum ipsum dapibus. Sed ac sodales lorem. Vestibulum porttitor sagittis enim luctus varius. Donec et venenatis erat.

titre titre titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis turpis, tincidunt eu dictum sit amet, fermentum vitae arcu. Mauris a tristique dolor. Mauris sagittis, mi et cursus tincidunt, orci dui accumsan sem, ac lacinia est nulla sit amet odio. Quisque interdum dignissim urna, nec facilisis nisl vehicula eu. Donec nec mauris ac libero rutrum rhoncus. Maecenas nibh erat, imperdiet eu pellentesque sagittis, pharetra vel ante. Maecenas eleifend rhoncus aliquet. Curabitur eget ligula augue. Ut elementum dictum neque, id vestibulum purus lacinia quis. Etiam fermentum velit et nunc blandit quis vestibulum ipsum dapibus. Sed ac sodales lorem. Vestibulum porttitor sagittis enim luctus varius. Donec et venenatis erat. Integer fringilla bibendum tortor sed feugiat. Curabitur laoreet, neque ac luctus volutpat, dui nibh euismod ipsum, a feugiat est tellus vel ligula. Integer porttitor fringilla diam, ut viverra odio egestas at. Maecenas diam quam, elementum vel malesuada sit amet, posuere quis augue. Etiam eget lorem et elit malesuada dignissim eu eu mi. Phasellus eu est nisl. Praesent sed leo tellus, vitae pellentesque magna. Nunc ac risus et purus sollicitudin tincidunt. Morbi lacinia velit id nulla fringilla vehicula. Suspendisse dapibus faucibus auctor. Nam facilisis ultricies bibendum. Integer interdum odio a dui aliquam in mollis odio iaculis. Nam congue vulputate accumsan. Nam sit amet leo nisl. orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis turpis, tincidunt eu dictum sit amet, fermentum vitae arcu. Mauris a tristique dolor. Mauris sagittis, mi et cursus tincidunt, orci dui accumsan sem, ac lacinia est nulla sit amet odio. Quisque interdum dignissim urna, nec facilisis nisl vehicula eu. Donec nec mauris ac libero rutrum rhoncus. Maecenas nibh erat, imperdiet eu pellentesque sagittis, pharetra vel ante.

titre titre titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis turpis, tincidunt eu dictum sit amet, fermentum vitae arcu. Mauris a tristique dolor. Mauris sagittis, mi et cursus tincidunt, orci dui accumsan sem, ac lacinia est nulla sit amet odio. Quisque interdum dignissim urna, nec facilisis nisl vehicula eu. Donec nec mauris ac libero rutrum rhoncus. Maecenas nibh erat, imperdiet eu pellentesque sagittis, pharetra vel ante. Maecenas eleifend rhoncus aliquet. Curabitur eget ligula augue. Ut elementum dictum neque, id vestibulum purus lacinia quis. Etiam fermentum velit et nunc blandit quis vestibulum ipsum dapibus. Sed ac sodales lorem. Vestibulum porttitor sagittis enim luctus varius. Donec et venenatis erat. Integer fringilla bibendum tortor sed feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce turpis turpis, tincidunt eu dictum sit amet, fermentum vitae arcu. Mauris a tristique dolor. Mauris sagittis, mi et cursus tincidunt, orci dui accumsan sem, ac lacinia est nulla sit amet odio.





le code:
 


Là dans l'immédiat, j'aimerais améliorer ce truc, et arriver à mettre le mot au milieu de l'image (mon pseudo en occurrence, mais j'aurais pu mettre autre chose) avec l'aide de ce tuto. Oui, je sais, il est déjà au milieu ... mais c'est parce que j'ai sauté des lignes  Laughing
Donc c'est pas top.


Sinon, vous en pensez quoi ? Comment je pourrais l'améliorer  ? (pas forcément des conseils de codage, de présentation ça me va aussi Smile)
Revenir en haut Aller en bas
http://amylet.tumblr.com/
idjya

Ange gardien
avatar
Ange gardien


Féminin Date d'inscription : 05/10/2009
Age : 38
Localisation : Cholet

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Mar 11 Déc 2012, 10:32

Première impression: Les ascenseurs en grand nombre c'est rédhibitoire... Faudrait que tu fasses un chapô à la place.
Revenir en haut Aller en bas
http://idjya.eklablog.com
Fuyaya

Admin
avatar
Admin


Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Mar 11 Déc 2012, 10:49

Alors en création de site on déconseille vivement les ascenseurs. Les gens peuvent scroller pour lire une page donc ça n'a rien de fatiguant. Là pour scroller les différents textes il faut se positionner dessus etc..; bref c'est super pénible. Donc d'un point de vue ergonomique c'est en gros : NON PLUS JAMAIS CELA !

Si tu veux absolument hiérarchiser et structurer ton texte alors demande toi s'il ne vaudrait pas mieux le subdiviser en page, autrement passe par un sommaire.

Mais les ascenseurs associés au textes on laisse tomber d'office


-----------------------

Pour ce qui est du code, afin de bien piloter le positionnement du mot Amylet, il te faut l'encadrer de balise pour pouvoir le commander.

Pour ce qui est des border-radius, il faut savoir que le code ne va pas fonctionner tel quel sur tous les navigateurs. Il faut afin de cibler le plus grand nombre ajouter les instructions pour les navigateurs de type chrome, mozilla et cie
-webkit-border-radius
-moz-border-radius


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
amylet

Illustre illustrateur
avatar
Illustre illustrateur


Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Mar 11 Déc 2012, 14:24

D'accord, merci beaucoup pour vos conseils, je vais organiser ça différemment et je vais rajouter des indications CSS pour les différents navigateurs Smile
j'en profiterai pour vérifier si le reste des fonctions fonctionne sous IE et chrome aussi, j'avoue ne pas avoir eu le réflexe de tester.
Pour les ascenseurs multiples, ça doit être le RP et ses fiches à tout-va qui déteint sur moi :mdr: (j'en fais peu mais ça m'a suffit pour avoir envie de mettre des ascenseurs partout moi aussi xD) J'ai pas pensé ergonomie sur le coup.
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Fuyaya

Admin
avatar
Admin


Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Mar 11 Déc 2012, 16:13

Par contre si tu veux permettre un accès rapide alors un petit sommaire au début compensera une hauteur éventuelle. Tu sais le faire en plus si je ne m'abuse Smile

Pour ce qui est de IE, il y a une fonction native F12 si ma mémoire est bonne qui te permet de visualiser l'apparence de ton blog selon les version d'IE, mais bon ne te traumatise pas trop avec ça.
Sans oublier que selon mac ou PC pour un même navigateur on a également toujours quelques pixels de différence. Moi ça me rend dingue personnellement...

Une petite question pourquoi n'as tu pas mis le H1, il est utilisé ailleurs ?


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
amylet

Illustre illustrateur
avatar
Illustre illustrateur


Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Mer 12 Déc 2012, 09:41

J'essaierai F12, merci Smile
Fuyaya a écrit:
Sans oublier que selon mac ou PC pour un même navigateur on a également toujours quelques pixels de différence. Moi ça me rend dingue personnellement...
affraid
Fuyaya a écrit:
Une petite question pourquoi n'as tu pas mis le H1, il est utilisé ailleurs ?
Ooops. Il y en avait un au départ, qui était au dessus, mais je l'ai enlevé et come j'ai une mémoire de poisson rouge, j'ai oublié de renommer les autres

Mais j'ai tout repensé, parce que je me dis que ça n'ira pas du tout. Merci pour l'idée du sommaire au fait, j'ai décidé d'en ajouter un du coup Smile

J'ai fait un schéma sur GIMP, et idéalement ma page devrait ressembler (à peu près) à ça :
(mais le sommaire sera moins long, normalement Laughing )

J'ai commencé le codage, pour l'instant je m'en sors, je vous montrerai le résultat bientôt. J'aurai peut-être un peu de mal avec le positionnement :je vois à peu près comment faire, mais il y a la théorie et la pratique Laughing
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Fuyaya

Admin
avatar
Admin


Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Mer 12 Déc 2012, 09:52

Alors premières impressions :

On aime bien que les choses soient calées au niveau des maquettes et de l'intégration donc ton fond de titre qui déborde de part et d'autre c'est assez étrange.

Ensuite pour la lisibilité l'effet au niveau du titre je ne suis pas convaincu, il faut penser que c'est une manière de présenter le titre qui doit être la même pour d'autre pages, comment fais tu si le mot est plus long ?

Au niveau des textes le contraste entre le fond et l'écriture n'est pas assez important. Le but est que les gens restent pour lire les choses, là les couleurs sont soutenus. Il te faut penser au confort de lecture et ce quel que soit l'âge (la vue et la sensibilité de l'oeil change) ou le moment de la journée. Là cela saute un peu trop aux yeux. Mettre de la couleur pour le peps mais il faut aussi être à l'aise pour lire.

Ensuite tu indiquais que le sommaire serai moins long, mais c'est bien dans une maquette de penser les choses en grand car il faut anticiper les évolutions.

Donc ce que j'aimerai savoir c'est la manière dont tu as prévu de procéder pour le codage de ces cadres du texte et du sommaire


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
amylet

Illustre illustrateur
avatar
Illustre illustrateur


Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Mer 12 Déc 2012, 16:04

Merci beaucoup pour ton avis et tes conseils Smile

Pour le cadre du titre, tu as bien raison en fait, donc je l'ai mis de la même largeur que le cadre du dessous finalement.
Fuyaya a écrit:
Ensuite pour la lisibilité l'effet au niveau du titre je ne suis pas convaincu, il faut penser que c'est une manière de présenter le titre qui doit être la même pour d'autre pages, comment fais tu si le mot est plus long ?
En fait, je ne me pose pas trop la question. En fait, ce sera la seule page que je vais utiliser qui ressemblera à ça, j'ai besoin de très peu de pages fixes pour mon blog, pour le reste il faudrait toucher au code html du theme, auquel je n'ose pas touche pour l'instant. Donc je vais garder l'effet je pense.

Pour les couleurs, j'avais pas pensé à ça non plus, merci de ta remarque, je vais changer tout ça Smile

Pour le cadre de gauche et le sommaire, le codage est en cours. Mais ce sera un div avec bordure contenant un paragraphe et un tableau dedans pour le cadre de gauche (j'ai juste codé le tableau pour l'instant). Et à l'intérieur même du tableau, j'ai mis des balises h3 avec ancres (pour le sommaire) et des balises p.
Et pour le sommaire, je vais utiliser un div avec bordure également, avec un h2 et un tableau en deux colonnes.
L'image et le cadre titre sont déjà codés, ça donne ça (faut juste que je change les couleurs) :
titre:
 
image:
 

C'est pour les placer que ça risque de se corser : pour éviter que ça ne fasse n'importe quoi dans une petite fenêtre/un petit écran, je pensais recourir au positionnement absolu. L'inconvénient, c'est qu'avec un très grand écran, par contre, ça risque de faire un truc tout tassé à gauche. :mdr:
Du coup, je me demande s'il est possible de placer tout ça grâce à un tableau de 2 colonnes par 2 lignes que je centrerais ? (en plaçant les élément les uns par rapports aux autres avec uppercase)
Mais peut-être que je me complique la vie Laughing


J'ai écrit un pavé xD

Merci encore pour tes conseils Smile
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Fuyaya

Admin
avatar
Admin


Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Mer 12 Déc 2012, 16:38

Vade retro tableau !!!!
On utilise des tableau uniquement pour créer des tableaux de données !

Pourquoi veux tu utiliser un tableau ? tu veux y mettre quoi dedans ? Si c'est du texte la balise paragraphe est amplement suffisante.
Si c'est le fait que tu veuilles tes paragraphes côte à côte alors tu donne à ta balise une propiété de type class. Imaginons : .colonne
Ensuite en propriété tu spécifie que ces balises doivent flotter à droite, avoir une largeur de temps, une marge intérieur de temps.
Ensuite pour déterminer une marge exterieur à droite soit au final tu ajoute une autre classe ce qui donnerait
Code:
<p class="colonne droite"></p>
Soit tu distingue d'office .col_dr et .col_gh avec la colonne de gauche qui a une marge extérieur de X px

Ce qui est important quand on utilise la propriété float c'est d'ajouter ensuite une division qui va bloquer la propriété comme une barrière pour eviter que cela n'ait d'impact sur els éléments suivant
Code:
<div class="clear"></div>

.clear {clear: both;}

Pour le cadre de sommaire ce n'est pas un tableau que tu devrais utilisé mais une liste. On utilise pas des titres pour un sommaires. Les titres doivent servir pour les titres uniquement car ils sont là pour structurer le texte. Ils sont référencés en priorité par les navigateurs qui analysent la syntaxe du site. Donc tu code les éléments de ta liste pour avoir le rendu que tu désires

Code:
<ul>
<li></li>
<li></li>
</ul>

La propriété min-width est là pour indiquer la taille minimale. Ton titre doit avoir une taille fixe donc c'est tout simplement width. J'ai également vu display: inline-block, saurais tu m'expliquer pourquoi ?

Donc là à l'heure actuelle, je pense qu'il y a un problème de méthode et de compréhension sur deux points.
Donc pour être sûre j'aurai tendance à te filer des devoirs...

1. Connais tu la différence entre une class (.machin) et un id (#truc), pourrais tu me l'expliquer ?
2. Il faudrait que tu reprennes ton image de ta page et que tu fasses un travail de découpe pour montrer visuellement via des cadres quels sont les éléments principaux et les sous éléments de chacun. Un peut comme pour des poupées russes.
Cela me permettra de voir comment tu comptes découper ta page et te corriger. Car tu m'as parlé de position absolu et je ne vois pas à quel moment cela interviendrait, sans compter des propriétés que je vois trainer de ci de là.

Si tu es d'accord bien sûr, c'est un journal alors rien ne t'oblige et cela orienterait plutôt les choses dans une aide perosnnalisée


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
amylet

Illustre illustrateur
avatar
Illustre illustrateur


Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Jeu 13 Déc 2012, 11:49

Merci beaucoup pour ta réponse Smile

Ah d'accord pour les tableaux, je ne savais pas merci, pour tes explications, je vais faire comme tu m'as dit Smile Merci du conseil également pour la liste.
Pour le min-width, c'est encore une fois que j'ai oublié d'enlever une propriété après avoir fait des modifs par manque d'attention (au départ c'était en %) j'ai enlevé le min-height, mais celui-là je l'ai raté. silent

Fuyaya a écrit:
Ce qui est important quand on utilise la propriété float c'est d'ajouter ensuite une division qui va bloquer la propriété comme une barrière pour eviter que cela n'ait d'impact sur els éléments suivant
Code:
<div class="clear"></div>

.clear {clear: both;}
Ah, super! Je savais pas. Ca va me simplifier les choses, merci Very Happy

Fuyaya a écrit:
J'ai également vu display: inline-block, saurais tu m'expliquer pourquoi ?
heuuu...

Fuyaya a écrit:
1. Connais tu la différence entre une class (.machin) et un id (#truc), pourrais tu me l'expliquer ?
2. Il faudrait que tu reprennes ton image de ta page et que tu fasses un travail de découpe pour montrer visuellement via des cadres quels sont les éléments principaux et les sous éléments de chacun. Un peut comme pour des poupées russes.
Cela me permettra de voir comment tu comptes découper ta page et te corriger. Car tu m'as parlé de position absolu et je ne vois pas à quel moment cela interviendrait, sans compter des propriétés que je vois trainer de ci de là.

Si tu es d'accord bien sûr, c'est un journal alors rien ne t'oblige et cela orienterait plutôt les choses dans une aide personnalisée
Il me semble qu'Id fonctionne comme class, à la différence qu'il ne peut être utilisé qu'une seule fois. Mais dans la pratique, j'hésite souvent sur lequel utiliser. (ça se voit tant que ça ? :mdr: )

Et voilà le découpage :
Spoiler:
 
Et ça ne me dérange pas du tout que tu me donnes des devoirs, bien au contraire. Smile Par contre, j'aimerais garder ce sujet dans "projet personnels", parce que j'ai commencé par cette page fixe pour mon blog parce j'en ai besoin, mais c'est aussi un bon pretexte pour m'exercer. Je ferai d'autres essais qui n'auront peut-être rien à voir ensuite, tout dépend de ce qui me passera par la tête. xD
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Fuyaya

Admin
avatar
Admin


Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Ven 14 Déc 2012, 09:59

Super, je te fais une petite correction expliquée ce soir et pas de soucis en journal c'est très bien on s'en sort aussi bien ici Wink
Il y a des petites modifications à faire et ce sera l'occasion de faire un peu sur id et class car oui des fois on à l'impression que c'est un peu au pif, mais c'est normal, pendant ma formation ça a été un point que certains ont mis du temps à appréhender

Par contre je me demande pourquoi au niveau du sommaire tu veux mettre deux listes côte à côte cela te limite vachement au niveau de la longueur des titres scratch


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
amylet

Illustre illustrateur
avatar
Illustre illustrateur


Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Ven 14 Déc 2012, 13:44

Ok, super, merci Smile

J'ai pas eu le temps d'avancer sinon aujourd'hui (pas allumé mon ordi avant ce soir, ça me change Laughing ), mais je continuerai ce weekend ^^
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Fuyaya

Admin
avatar
Admin


Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Ven 14 Déc 2012, 14:11

Citation :
Par contre je me demande pourquoi au niveau du sommaire tu veux mettre deux listes côte à côte cela te limite vachement au niveau de la longueur des titres

Tu m'expliques ?


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
amylet

Illustre illustrateur
avatar
Illustre illustrateur


Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Ven 14 Déc 2012, 15:09

Ah oui, oops désolée, j'avais oublié de répondre.

En fait c'est juste parce que j'aime bien comme ça Et mes titres sont très courts (un mot à chaque fois), donc à ce niveau là, pas de souci.
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Fuyaya

Admin
avatar
Admin


Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Ven 14 Déc 2012, 15:31

ok mais j'émet un doute pour la lisibilité. J'ai déjà fait mon image donc pour la compréhénsion un ou 2 ul ce sera la même chose

je rédige et je met cela


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Fuyaya

Admin
avatar
Admin


Féminin Date d'inscription : 29/09/2009
Age : 37
Localisation : Aubais

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Ven 14 Déc 2012, 16:12

Voici la manière dont je découperai la structure si je devais l'intégrer :



Je tiens à préciser que j'ai donné des noms aux class et aux divisions pour que ce soit plus facile de te faire comprendre de quoi je parle. Bien entendu tu les nommes comme tu veux.

Donc tu avais raison on indique un id quand c'est un élément unique sur la page et un class quand il va se répéter. On a également des balises natives tel que les titres que l'on peut utiliser et configurer sache que tout comme on peut styler un h1, on peut styler un body qui est le corps du site.

Je vais te présenter et argumenter en commençant par le plus grand ensemble puis ceux qui sont imbriqués.

-----------------------------------------------

Un développeur cherche à s'économiser et éviter les répétitions dans son code. Aussi on indique toujours au préalable dans son code css des propriétés qui vont s'appliquer à TOUS les éléments de la page. Comme on a une chronologie dans la page, tu pourras toujours contre carrer un ordre (couleur de police, marge) en l'indiquant plus bas.

Code:
* {
margin:0;
padding : 0;
border: 0;
font-family : verdana, arial, Helvetica, sans-serif;
color: #000;
font-size: 12px;}

Bien sûr pour le choix de police, la couleur et la taille c'est selon ton design, en revanche les 3 premières lignes sont importantes car les navigateurs n'imnterpètent pas pareil les marges et bordure, là en mettant à 0, tout le monde est mis à la même enseigne

Tu en profite également pour mettre au début des codes que tu vas utiliser régulièrement, un peu les classique. En l'occurence le code qui va annuler les consignes de flottement
Code:
.clear {clear: both;}

Tu peux ensuite attaquer le code spécifique à ton site

-----------------------------------------------

Il faut savoir que la balise body se trouve elle-même dans une balise html. Ces balises existent dans tous les sites quels qu'ils soient. Donc comment fait-on pour avoir une page de site bien centrée...
Par défaut html et body représentent toute la largueur d'un écran, on n'a pas besoin d'avoir deux balises qui font la même taille. Donc on va indiquer que body fait disons 900px et que l'on veut qu'il soit automatiquement centré par rapport à html ce qui donne :
Code:
body {width: 900px; margin: auto;}

C'est aussi simple que cela, tu es sûr que ton body sera toujours centré quel que soit la résolution de l'écran.

-----------------------------------------------

Pour ton design tu as choisi d'avoir une mise en page avec un corps de page qui fait les 2/3 et une partie latérale. Ce sont des proportions que l'on retrouve dans les éléments qu'ils contiennent. Il est donc logique d'avoir ces deux éléments qui soient des divisions et deviennent eux aussi des conteneurs. Ainsi leurs dimensions seront appliqués à leur enfants.
On va donc ainsi les positionner aisément l'un par rapport à l'autre.
Donc pour #corps et #lateral tu vas pouvoir indiquer leur taille et autres propriétés en css.
Afin qu'ils se mettent l'un à côté de l'autre pour les deux tu vas leur donner la fameuse propriété qui fait que les éléments flottent

Code:
#corps {float: left; width: 580px; margin-right: 20px;}
#lateral {float: left; width: 300px;}

Tu n'oublieras pas à la suite de ces divisions de rajouter une division avec la classe clear

-----------------------------------------------

Occupons nous du corps, à présent.

La classe h1 est déjà une balise de type block, donc tu peux lui mettre un arrière plan, il est donc inutile de le mettre dans une div.

En dessous on a la division page à laquelle tu vas pouvoir donner les propriétés de marge, de fond et de bordure.

Elle contient deux types de paragraphe, un paragraphe qui fait toute la longueur et des paragraphes qui doivent se disposer en colonne. Il en va de même pour les titres.

Pour distinguer les propriétés que l'on aux paragraphes qui font toute la largeur et les paragraphes flottant, on leur donne des classes. Il est possible que tu veuilles positionner plus bas dans la page un paragraphe qui fasse toute la largeur donc c'est la aussi une class.
Pour les faire flotter on procéde de la même manière que pour les divisons corps et latéral.

Les paragraphes de gauches sont affublées d'une classe supplémentaire qui permet d'indiquer la marge.

Code:
.gch {margin-right: 10px;}

Pense bien à donner à tes paragraphes et à tes titres une largeur définie.

-----------------------------------------------

Oui mais ce que l'on indique pour les titres h2 du corps s'appliquera aux titres h2 de la partie latéral...
C'est exact, c'est pour cela que l'on va utiliser une autre propriété de la feuille de style !

On a parlé de chronologie, en gros le dernier qui parle à raison, on a aussi une propriété d'hérédité.

Si j'écris :

Code:
 h2 {width : 200px;}

Alors TOUS les titres de type h2 auront une largeur de 200px. En revanche si j'écris

Code:
#corps h2 {width : 200px;}

Cela ne s'appliquera QU'AU titre de type h2 qui se trouvent dans la division corps. Ainsi pour économiser des lignes, on donne toutes les propriété communes à h2 puis on indique les spécificité en indiquant l'hérédité !

-----------------------------------------------

Pour finir on a la partie latéral, là rien de nouveau dans la compréhension parr rapport à ce que l'on a vu au dessus.
La balise img n'est pas de type block mais comme elle fait la largeur de la partie latérale, inutile de la mettre d'une une division. On peut parfaitement en l'état lui assigner une bordure. Mais si tu veux rajouter plus d'éléments par dessus l'image alors OUI il faut la mettre dans une division !

Pour ce qui est du titre de la partie latérale pour indiquer sa spécificité tu utilises l'hérédité dont je viens juste de te parler. Et pour tes listes c'est la même logique que les paragraphes. Si toutes tes listes doivent se mettrent côte à côte alors inutile de leur assigner une class, si ce n'est pas le cas alors tu en créé une.

-----------------------------------------------

Voilà je pense avoir fait le tour, dis moi si quelque chose n'est pas clair. Bien sû il y a de multiples manière de coder une page, mais en général ma logique fait que je n'ai quasiment jamais de soucis de compatibilité entre les différents navigateurs, à quelques pixels rès mais ça on ne peut y couper Suspect


Spoiler:
 
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
amylet

Illustre illustrateur
avatar
Illustre illustrateur


Féminin Date d'inscription : 07/02/2012
Age : 22

MessageSujet: Re: [En pause] [journal de bord]codage... gné?   Sam 15 Déc 2012, 17:32

Wouaw ! Merci pour ces super explications Fuyaya, c'est super clair et très complet, je comprends beaucoup mieux plein de trucs maintenant Very Happy
Merci merci merci

Je suis en train de mettre en pratique tout ça, je te montre le résultat dès que j'ai fini Very Happy
Revenir en haut Aller en bas
http://amylet.tumblr.com/
Contenu sponsorisé





MessageSujet: Re: [En pause] [journal de bord]codage... gné?   

Revenir en haut Aller en bas
 
[En pause] [journal de bord]codage... gné?
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [En pause] Journal de Bord : Centre équestre abandonné
» [En pause] [Journal de Bord] tenues 18ème siècle sims 2 à convertir en sims 3
» [En pause][Journal de bord] Le chemin sinueux de Stern sur Gimp 2
» journal de bord d'un jeune cpt
» Journal de bord du Malpartie2

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Section créative :: Vos projets :: Projets individuels :: Projets Individuels : Archivés & en pause-
Sauter vers: