AccueilAccueil  Epic'Top  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

classe 1 - Saia
 :: Codage :: Entraînement :: Cours :: Classe Jamy
Administratrice - Maxi-codeuse

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2276
Jeu 19 Jan - 21:00
Hello ! :D J'espère ce tutorat te plaira ! N'hésites pas à poser des questions et tout ça ... Lovely

Citation :
Qu'est ce que le HTML, comment s'écrivent les balises ? :les balises du html peuvent être des < div class > ou alors avec des < table > c'est ce qui va permettre de placer le texte, les images etc
Alors, attention, sans les balises code, je pouvais pas voir ce que tu avais écris ... Tes balises sont interprétées dans le message... ce qui fait planter le code ensuite ... Moi, ce que je fais, c'est que je mets des espaces à l'intérieur, comme ça, c'est une erreur, et ça n'est pas interprété ! ;) Mais on se comprend.

Cela étant dit, c'est tout à fait ça ! :)
Pour la définition du CSS et des exemples de propriétés:valeurs c'est également ça ! :D

Citation :
Qu'est ce que le BBCode, est ce judicieux de l'utiliser ?:le BBcode c'est faciliter la mise en forme d'un message et qui permet entre autres de mettre du texte en gras, de le souligner, de faire un lien ou bien d'autres choses encore. Donc d'un coter il est plutôt utile pour l’esthétique encore une fois
ouep, c'est ça, ça permet de faciliter la mise en forme, mais uniquement sur ForumActif du coup ! Dès que tu vas sortir de ces cadres de messages, il te faut utiliser le CSS, du coup, ici, on va tout le temps le proscrire, car le mélange n'est pas appréciable ! ;)

Pour les codes, c'est pas mal du tout ! :D

Je commence par la PA si tu veux bien ! Il a quelques points à reprendre ! Tu as un éditeur de code sur ton ordinateur ? J'aime bien utiliser bracket. Il existe d'ailleurs un tuto ici, mais peut être tu en as un autre, sublime text, notepad++ ... ça m'est égal :)

J'ai créer une nouvelle page HTML pour y placer ton code, tu connais le fonctionnement des pages HTML ? Je suppose que oui, vu ton niveau avancé ! Mais n'hésites jamais à me reprendre et demander des explications si j'oublie un truc que tu connais pas ! ;)

Ce que j'aimerai que tu fasses, c'est tu crée également une page HTML sur un éditeur de code, ce que j'aime bien avec bracket, c'est que j'ai des extensions, et j'ai notamment la possibilité d'avoir une indentation du code automatique, pour vérifier que toutes tes balises sont bien imbriquées et fermées.
Et aussi, pour voir si tu as des erreurs dans tes codes, ça les surlignes...

Là, avec ta PA, je note quelques erreurs ! :)
Et du coup, je te propose de commencer par revoir ces petites choses !

Je pose bcp de question ! ahahaha, c'est parce que je ne compte pas te donner les réponses, mais plutôt t'aiguiller à réfléchir de la bonne façon pour te corriger/apprendre ! J'espère cette façon de travailler te conviendra !

1) tu ne fermes pas tes balises img ... Pourquoi ? :)

2) au niveau du CSS, j'ai noté plusieurs slash qui se balade, un px qui n'a pas de valeur ...

3) tes blocs tu mets bcp de
position: absolute;
float: left;
est-ce bien utile d'avoir les deux ??
à quoi sert le float ? à quoi sert le position ? Tu connais d'ailleurs les autres façon de positionner un élément ?

4) je constate aussi, quand tu fais tes hover, tu répètes toutes les propriétés d'un élément. Ce n'est pas utile en fait ! :)
tu peux déclarer uniquement ce qui change ! :)

5) j'ai vu dans la partie HTML, par endroit, tu as mis es ID à tes balises, pourquoi ? N'ayant vu aucun id dans ton CSS ... à quoi ils servent ?

Et je vais m'arrêter là pour ce premier message ! hahahaha

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/12/2016
Messages : 29
Jeu 19 Jan - 21:20
Bonsoir! Déjà je tiens à te remercier de m'avoir prise dans ta classe! je te remercie infiniment! Alors je vais répondre à toute tes questions!

"Je commence par la PA si tu veux bien ! Il a quelques points à reprendre ! Tu as un éditeur de code sur ton ordinateur ? J'aime bien utiliser bracket. Il existe d'ailleurs un tuto ici, mais peut être tu en as un autre, sublime text, notepad++ ... ça m'est égal :) "


Alors mon éditeur de code en réalité j'utilise CSSDesk qui me permet de voir à coter de mon code se que cela donne :) après Bracket non je ne connaît pas, mais faut bien un début à tout XD Donc je pense l'utiliser durant notre cours :) Mais sinon oui j'ai Notepad++


"Ce que j'aimerai que tu fasses, c'est tu crée également une page HTML sur un éditeur de code, ce que j'aime bien avec bracket, c'est que j'ai des extensions, et j'ai notamment la possibilité d'avoir une indentation du code automatique, pour vérifier que toutes tes balises sont bien imbriquées et fermées.
Et aussi, pour voir si tu as des erreurs dans tes codes, ça les surlignes..."



Alors je t'ai un peu perdu ici XD tu aimerais que je face rapidement un code mais sur une Page HTML? ou tu aimerait que je place mon code de la PA sur un éditeur comme bracket par exemple et que je mettent cela au propre?



"1) tu ne fermes pas tes balises img ... Pourquoi ? :)

2) au niveau du CSS, j'ai noté plusieurs slash qui se balade, un px qui n'a pas de valeur ...

3) tes blocs tu mets bcp de
position: absolute;
float: left;
est-ce bien utile d'avoir les deux ??
à quoi sert le float ? à quoi sert le position ? Tu connais d'ailleurs les autres façon de positionner un élément ?

4) je constate aussi, quand tu fais tes hover, tu répètes toutes les propriétés d'un élément. Ce n'est pas utile en fait ! :)
tu peux déclarer uniquement ce qui change ! :)

5) j'ai vu dans la partie HTML, par endroit, tu as mis es ID à tes balises, pourquoi ? N'ayant vu aucun id dans ton CSS ... à quoi ils servent ? "


Alors pour revenir sur le contexte avant de tout répondre ma PA je l'avais faîtes en 2013 XD donc depuis j'ai compris et changer certaine choses XD (j'avais rien de plus récent on va dire XD) Mais je vais quand même répondre à tes questions bien évidemment :)

3) la position absolute nous permet de placer un élément n'importe où sur la page tandis que le Float (je crois) lui se contente de flotter au dessus d'un block et ne peu en sortir.
Pour les autres positionnement je ne connais que le relative les autres non malheureusement.

5) Pour être tout à fait honnête avec toi je n'ai jamais vraiment utiliser le #id généralement pour se genre d'effet je me contente d'aller chercher sur internet. ce qui fait que je ne pourrais pas te répondre à quoi il sert :/
Administratrice - Maxi-codeuse

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2276
Ven 20 Jan - 13:40
Mais de rien ! J'espère que tu vas apprécier, n'hésites pas à faire des retours ! ;)

Citation :
Alors je t'ai un peu perdu ici XD tu aimerais que je face rapidement un code mais sur une Page HTML? ou tu aimerait que je place mon code de la PA sur un éditeur comme bracket par exemple et que je mettent cela au propre?
Pardon, j'étais pas très claire ! x)
Je voulais que tu prennes ton code de PA et que tu le mettes dans ton éditeur mais bien sûr avec les balises html autour sinon, ça marche moins bien ! x)

Et du coup, on va clean cette PA, comme ça, on va revoir quelques petits points ! :)
Mais je comprends, si elle est un peu vieille !
tu vas corriger des choses rapidement ! ;)


Du coup, première vague de correction >> la syntaxe.
Je t'ai dis, plus haut, les balises n'étaient pas fermées, et puis, y'a le px, les slash ... :)

Ensuite, un petit aparté sur le ID. En fait, quand on utilise un id="nom_class"; ça revient au même qu'écrire avec l'attribut class. On va attribuer à la balise un nom de class, qu'elle va devoir aller chercher le CSS correspondant. La différence c'est qu'on peut répéter un nom_class plusieurs fois dans la page HTML, lorsqu'on l'a mit dans l'attribut class= mais une seule et unique fois quand on le met dans le id...

C'est à dire :
CORRECT :
Code:
<div id="back">
<div class="bloc">
</div>
<div class="bloc">
</div>
</div>

FAUX
Code:
<div id="back">
<div id="bloc">
</div>
<div id="bloc">
</div>
</div>

là, le bloc est dans 2 id ça ne marche pas ! Tu vois la nuance ?
Quand utiliser class et quand utiliser id ??
Moi personnellement, je n'utilise jamais id quand je dois personnaliser des éléments HTML. On va voir ça au fur et à mesure, pour optimiser tes codes, mais les noms de classes sont suffisantes, et puis, on peut utiliser les sélecteurs ...
Je laisse l'utilisation des id quand je dois ajouter du JavaScript à mes codes ! :)

Du coup, je te laisse modifier ça aussi dans ton code ! :)


Ensuite, 3ème vague >> le positionnement.
Citation :
3) la position absolute nous permet de placer un élément n'importe où sur la page tandis que le Float (je crois) lui se contente de flotter au dessus d'un block et ne peu en sortir.
Pour les autres positionnement je ne connais que le relative les autres non malheureusement.
Il y a l'idée je crois ! Tu as saisi un peu le concept de flux c'est déjà bien ! :D

En effet, y'a bien un flux dans une page HTML. De base les éléments sont soit en block, soit en inline (les deux plus courant) mais peuvent être également un mix entre les deux (inline-block), ou encore en table.
Cet affichage se gère avec la propriété display.

Lorsqu'on a un bloc, on a un retour à la ligne. Pas quand c'est inline. ça c'est facile, et c'est ce que tu maîtrises avec l'utilisation de span /div.
Quand le navigateur interprète un code, il récupère toutes les données qu'il a dessus et les affiches les uns à la suite des autres si c'est des bloc, ou cote à cote si c'est inline. Sauf contre indication.

Le float est une contre indication.
Si un élément block est mis en float, alors il sort du flux. Mais il ne va pas se placer au dessus d'un élément block, il va simplement arrêter de faire un retour à la ligne, et accepter qu'un élément se mette à côté de lui (si cet élément a de la place).

Pour bien visualiser ce concept, je te propose de jouer avec 3 blocs dans un blocs parent.
Code:
<div class="parent"><div class="bloc"></div><div class="bloc"></div><div class="bloc"></div></div>
CSS :
Code:
.parent{
  background: grey;
  padding:10px;
}
.bloc{
  width:75px;
  height:75px;
  background: black;
  margin: 8px;
}

quand je test des codes comme ça, j'utilise bcp aussi codePen ou CSSdesk, là, ne t'embête pas à faire une page HTML, voir en direct, c'est bien ...

du coup, de base, les cadres se mettent les un à la suite des autres. test pour modifier le display de ces blocs, puis de les mettre flottant... tu te rendras compte que ça marche plutôt bien ! les bloc se calent les uns à côté des autres si ce n'est que le bloc parent en oublie sa propre hauteur, car ce qu'il contient ne sont plus dans le flux ... Du coup, il faut hacker le code, pour rétablir le flux... il existe plusieurs façon de faire ... soit écrire une balise :
Code:
<div style="clear:both;"></div>
avant la fermeture du bloc parent, soit un code un peu plus compliqué en CSS : (mais qu'on me fait utiliser en cours ^^)
Code:
.clearfix:before, .clearfix:after{
display:table;
content: '';
}
.clearfix:after{
clear:both;
}
et le nom de class clearfix à ajouter au bloc parent.
ou encore, au bloc parent, lui mettre la propriété :
Code:
overflow:auto;

teste les possibilités, et voit ce qui te plait le plus ! :D

Ensuite, pour terminer sur le positionnement, il y a ensuite la propriété position.
qui peut être :
fixed, absolute, relative...

On a un petit tuto sur ces positionnements ici, qui parle en plus des propriétés associés à la position. A chaque fois qu'on va définir une position, il faut choisir un point de référent. En effet, le position absolute permet de placer un élément n'importe où dans la page, mais si il est contenu dans un bloc qui contient la propriété relative, alors il se placera n'importe où par rapport à ce dernier...

Je vais te laisser lire le tuto, me dire si tu as des questions, et en attendant ta réponse, je vais te préparer des petits trucs pour maîtriser le positionnement ! :)



HA et dis moi, si je te demande trop ne même temps, ou quand mes explications sont pas suffisantes ! :) Parfois je m'emballe ... mdrrrrr

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/12/2016
Messages : 29
Ven 20 Jan - 22:00
Kikou alors j'ai un peu de mal à suivre XD premièrement lorsque j'utilise Bracket pour avoir une visualisation sur une page j'ai "erreur lors du lancement du navigateur" "le navigateur google chrome est introuvable " Donc c'est un peu difficile pour voir mes erreurs XD

Pour le ID si j'ai bien compris c'est plus ou moins la même chose que le div class qui peut être répéter plusieurs fois tandis que le ID n'est utiliser qu'une seule et ultime fois. On il est surtout utiliser lorsque le code contient du Javascript.

Ensuite pour le petite exercice avec le positionnement, j'ai tester des truc mais je suis pas sur que mes explications soient bonne XD

Les colonnes sont alignée les unes en dessous des autres et que quand j'utilise la propriété du positionnement absolue sur le .bloc les 3 block se retrouve les un sur les autres. et celui-ci sort du parent.

pour le display: inline-block; les colonnes se retrouve les une alignée au autres. Mais reste dans le parent.

Le Float: laisse les 3 block alignée les un à coté des autres sauf qu'il n'est plus envelopper par le parent.

Ensuite avec le clearfix je n'ai absolument pas compris de comment cela fonctionne XD je sais absolument pas ou le placer dans le code.

J'ai du mal à comprendre qu'elle est la meilleurs astuce pour facilité le codage sans bug entre le display/le float et le position, j'avoue ne pas très bien comprendre cela.
Administratrice - Maxi-codeuse

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2276
Sam 21 Jan - 13:15
hello ! ha désolé ! je m'emballe et j'explique mal ! sorry !
Je reprends ! :)

Citation :
premièrement lorsque j'utilise Bracket pour avoir une visualisation sur une page j'ai "erreur lors du lancement du navigateur" "le navigateur google chrome est introuvable " Donc c'est un peu difficile pour voir mes erreurs XD
>> ça c'est étrange ! :mh:
tu utilises l’aperçu en direct ou tu double clique sur le fichier html ? Et on navigateur, c'est chrome de base ?

Citation :
Pour le ID si j'ai bien compris c'est plus ou moins la même chose que le div class qui peut être répéter plusieurs fois tandis que le ID n'est utiliser qu'une seule et ultime fois. On il est surtout utiliser lorsque le code contient du Javascript.
Oui c'est exactement ça ! :D


Pour ce qui est des testes, ce n'est pas grave si tu n'y arrives pas dès le premier coup à expliquer, le tout c'est que tu ais essayé ! :D


1) position: absolute;
Citation :
Les colonnes sont alignée les unes en dessous des autres et que quand j'utilise la propriété du positionnement absolue sur le .bloc les 3 block se retrouve les un sur les autres. et celui-ci sort du parent.
Ce qui serait bien, c'est que tu me montres tes codes en même temps, pour que je vois, tu as ajouté des couples de propriété valeurs en plus que de la position absolute ?

C'est normale que les cadres sortent de leur parent. Quand tu places un élément en position absolute, ce dernier va se caler par rapport à un élément qu'il va prendre en référent. S'il n'y a rien de précisé : il va se caler par rapport à la fenêtre du document > soit par rapport à la balise body. Dans le petit tuto, ils expliquent comment définir un référent il me semble.

Essayes de me donner un code où :
- le parent a un fond gris et sert de référent
- 3 cadres de fond de couleur différentes, qui sont positionné :
* un en haut à gauche
* un autre en haut à droite
* et le dernier au milieu du cadre

2) pour le display: inline-block;
Citation :
les colonnes se retrouve les une alignée au autres. Mais reste dans le parent.
>> oui tout à fait ! :D
d'ailleurs, avec le inline-block, sache que tu peux utiliser la propriété : vertical-align. Admettons que ton 2ème cadre soit plus haut que les autres, tu peux tous les aligner par le haut, par le bas ou au middle.

tiens >>
Code:
<div class="parent"><div class="bloc"></div><div class="bloc"></div><div class="bloc" style="height:150px;"></div></div>
Code:
.parent{
  background: grey;
  padding:10px;
}
.bloc{
  width:75px;
  height:75px;
  background: black;
  margin: 8px;
  display: inline-block;
  vertical-align:middle;
}

NOTE : là, j'ai utilisé la propriété style dans le HTML, c'est vraiment pour toucher rapidement à un élément et visualiser les différences de comportement, tu peux faire pareil quand tu bidouilles pour comprendre, mais la façon propre de coder ensuite, c'est t'attribuer une classe différente à ce 3èm bloc et de bien séparer HTML et CSS ! ;)


3) Le Float:
Citation :
laisse les 3 block alignée les un à coté des autres sauf qu'il n'est plus envelopper par le parent.
Ensuite avec le clearfix je n'ai absolument pas compris de comment cela fonctionne XD je sais absolument pas ou le placer dans le code.


3 cas donc pour rétablir le flux et qu'un élément parent qui a des enfants floattant les prennent en compte.

* a) ajouter une balise qui contient un clear both juste avant la fermeture de la balise parente.
Code:
<div class="parent"><div class="bloc"></div><div class="bloc"></div><div class="bloc"></div><div style="clear:both;"></div></div>

* b) ajouter un overflow:auto; à la balise parente.
Code:
.parent{
  background: grey;
  padding:10px;
  overflow:auto;
}

* c) la plus compliqué, mais qu'on me fait utiliser car plus propre ...

on créé une nouvelle class ... Et on définit des propriétés qui s'applique avant et après les blocs qui vont avoir cette classe.
Code:
.clearfix:before, .clearfix:after{
display:table;
content: '';
}
.clearfix:after{
clear:both;
}

et ce nom de class on l'ajoute au bloc parent :
Code:
<div class="parent clearfix"><div class="bloc"></div><div class="bloc"></div><div class="bloc"></div></div>


C'est plus clair ainsi ? :)
N'hésites pas à redemander !
------------


Citation :
J'ai du mal à comprendre qu'elle est la meilleurs astuce pour facilité le codage sans bug entre le display/le float et le position, j'avoue ne pas très bien comprendre cela.
La meilleure astuce, c'est de se poser les bonnes questions. On utilise une technique plutôt qu'une autre en fonction de ce qu'on veut faire.

Si par exemple, tu as une PA, qui a pour fond une image, et que tu dois caler des blocs dans des encarts, alors tu vas utiliser les positions absolute plutôt. Cela étant dit, cette technique de position absolute est à utiliser le moins que possible !

Si c'est juste pour avoir 3 colonnes côte à côte, là, la façon de faire la plus simple, c'est le inline-block. ça reste dans le flux, ça se cale bien sans trop de problème..

Si c'est pour mettre une image, et du texte à droite : je privilégie le float.

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/12/2016
Messages : 29
Sam 21 Jan - 19:54
"Essayes de me donner un code où :
- le parent a un fond gris et sert de référent
- 3 cadres de fond de couleur différentes, qui sont positionné :
* un en haut à gauche
* un autre en haut à droite
* et le dernier au milieu du cadre"


Voici pour le petit code :)

HTML:
Code:
<div class="parent">
<div class="block" style="background:#ff0;"></div>
<div class="block" style="background:#f40;"></div>
<div class="block" style="background:#140;"></div>
</div>
CSS:
Code:
.parent{
  background: grey;
width: 240px;
height: 80px;
position: relative;
padding: 10px;
}

.block{
  width: 75px;
  height: 75px;
   display: inline-block;
}


Cela me semble quand même vachement compliquer mais je pense commencer à plus ou moins comprendre XD le Display me sert vraiment cas positionner cote à cote les éléments dans le flux (exemple avec les partenariats)
Le float encore est un élement qu'on utiliserait plutôt pour mettre un élément à droite ou à gauche d'une texte. Et pour la position absolute et relative c'est partout sur la page même si le relative sert de référent pour la position absolute juste après donc souvent très utilisé dans le codage pour les catégories, QEEL l'avatar etc ?

Encore désolée si je n'arrive pas trop a assimilé XD
Administratrice - Maxi-codeuse

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2276
Dim 22 Jan - 18:38
Coucou !

alors, du coup, j'ai mal expliqué .. .sorry ! :s je voulais ça :


Je crois que j'ai voulu aller trop vite en t'expliquant toutes les façons de positionner un élément ... mea culpa ! Mais tu t'en sors très bien, c'est exactement ça ! Je pense tu as compris !

display >> sert à garder des éléments dans le flux
float >> pour sortir du flux l'élément -> nécessite de rétablir la hauteur du conteneur de ces éléments floattant
position >> relative, ou bien absolute, ou bien fixed ... >> sort du flux, et positionne un élément par rapport à un référent.

C'est exactement ce que tu as dis ! :)

Du coup, ton code est presque parfait pour le inline-block ! il ya juste, pourquoi avoir précisé la position du parent ? Cela n'est pas nécessaire quand tu utilises le display ou le float pour le positionnement.

Préciser un référent n'est nécessaire que si tu as un position absolute ! :)
du coup, l'exercice que j'ai mis en haut en schéma, fait le absolute et pense bien au référent ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/12/2016
Messages : 29
Ven 27 Jan - 12:42
plop je suis désolée pour mon retard j'ai eu des jury pour mon année et j'ai pas trop eu le temps d'aller voir ^^'

ahhh d'accord donc a part quand je veux mettre du absolute j'ai pas besoin de préciser la position du parent 'o' je savais pas merci XD
Administratrice - Maxi-codeuse

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2276
Sam 28 Jan - 10:36
pas de soucis, prends ton temps ! :) je suis en partiel la semaine pro en plus, alors je vais ralentir un poil la cadence jusqu'au week end pro ! ;)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/12/2016
Messages : 29
Sam 28 Jan - 15:28
oki ba bon courage à toi alors! sinon je vais faire quelque exercice si tu veux en créant une nouvelle PA! :D ou se ce que tu veux, même des fiches pour cette semaine et on voie ensemble un topo le week prochain si tu veux :D
Administratrice - Maxi-codeuse

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2276
Sam 4 Fév - 20:05
Pardon de pas avoir répondu, j'étais vraiment hyper bookée.

Pour le coup, tu ne voulais pas terminer l'exo sur le positionnement absolute/relative que je t'avais proposé ?

sinon, on peut bosser sur une autre de tes créations si tu avais des notions que tu voulais apprendre ! ^^ corriger ton code me semblait juste judicieux pour reprendre les points qui me semblait flou ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 27/12/2016
Messages : 29
Lun 6 Fév - 2:09
Non ne t inquiète pas je peu comprendre :)
Ah euh justement si j aimerais approndir les positionnement. Mais je me suis dit que se serait utile de faire par exemple des fiches avec justement l entraînement des positionnement. J ai l'habitude d apprendre en pratiquant et ensuite mon code est ancien je prefere faire quelque chose de prof et net maintenant pour m entraîner plus facilement :). Du coup si tu aurait des exemple de fiche que je pourrais réaliser ou si ty préfère que se sois moi qui le face n'hésite pas a me le dire! :3

Ps: pour bucket je suis bien sur chrome de reference et la projection sur une page web ne marche pas :( (je clic sur l image avec un signe d eclaire)

Ah et autre question( pour en être sur xD) j'utilise le display pour les fiches et Pa et pour le position je l utilise pour les template (QEEL, categorie, profil etc)?
Administratrice - Maxi-codeuse

Fiche Membre
Lots gagnés:
Administratrice - Maxi-codeuse
Administratrice - Maxi-codeuse
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 31/10/2013
Messages : 2276
Ven 10 Fév - 19:43
Alors, je vais commencer par répondre à ta dernière question ! ^^

Citation :
Ah et autre question( pour en être sur xD) j'utilise le display pour les fiches et Pa et pour le position je l utilise pour les template (QEEL, categorie, profil etc)?

Il faut utiliser le display et le position au minimum ! De base, normalement, on garde les display qui sont pré-enregistré pour les éléments (block pour div, inline pour span).

Mais en général, les PA et les QEEL, ouai, on utilise des positions pour faciliter les agencements.


On va commencer par vérifier le display ! Tu connais d'ailleurs l'intermédiaire ? le display: inline-block; ?
cela pourrait t'être utile ... on va commencer par une fiche relativement simple :
c'est un vieux code à moi ^^ pas la peine de reprendre la même charte graphique, ou les couleurs, tu es libre pour adapter !
Et ne code pas tout, fait juste le premier encadré, là où l'image est à droite (j'avais juste la flemme de rogner l'image ... hahahah)

Spoiler:
 

N'hésites pas à me demander si tu as besoin ! :)

_________________________________________

Life is a journey, enjoy the ride

< I would love to [change] the world, but they won't give me the source {code}… >
Contenu sponsorisé
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum