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

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

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 : 2474
Ven 20 Jan 2017 - 6:30
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}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Ven 20 Jan 2017 - 6:50
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
avatar

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 : 2474
Ven 20 Jan 2017 - 23:10
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}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Sam 21 Jan 2017 - 7:30
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
avatar

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 : 2474
Sam 21 Jan 2017 - 22:45
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}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Dim 22 Jan 2017 - 5:24
"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
avatar

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 : 2474
Lun 23 Jan 2017 - 4:08
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}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Ven 27 Jan 2017 - 22:12
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
avatar

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 : 2474
Sam 28 Jan 2017 - 20:06
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}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Dim 29 Jan 2017 - 0:58
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
avatar

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 : 2474
Dim 5 Fév 2017 - 5:35
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}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Lun 6 Fév 2017 - 11:39
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
avatar

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 : 2474
Sam 11 Fév 2017 - 5:13
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}… >

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Mer 22 Fév 2017 - 19:53
Kikou ! je suis vraiment désolée pour ces longs jours sans réponse j'ai eu des soucis, alors j'ai essayer de faire le début avec le display : inline-block  mais j'ai eu quelques soucis avec le texte et l'image qui sort du cadre donc je ne vois pas très bien d’où vient le problème ;/
Code:

<div class="parent">
<div class="bloc">sssssssssssssssssssssssssssssssssssssssssssssssssssss</div>
<div class="bloc"><img src="http://img11.hostingpics.net/pics/28584860866524p0.jpg"></div>
</div>

Code:
.parent{
  width: 400px;
  height: 300px;
  background: #fff;
  border:  solid #f4f;
  
}

.bloc{
  width: 150px;
  height: 200px;
  border: solid  #fdcfdc;
  display: inline-block;
  margin:  45px 0px -188px 25px;
  vertical-align:top;
color: #D4A765;
text-align: center;
font size: 10px;

}
Administratrice - Maxi-codeuse
avatar

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 : 2474
Mar 28 Fév 2017 - 1:43
Hey ! :)
pas de soucis t'inquiète ! Je répond moi même pas très régulièrement ! :$

Pour ce qui est du texte qui sort de ton cadre, c'est parce que ton "mot" est trop long. En effet, il y a un soucis avec les codes quand tu écris juste un mot trop long, il ne fait pas coupure... c'est pour ça qu'on utilise du lorem ipsum quand on a la flemme d'écrire un truc précis, car composé de plusieurs mots, plutôt qu'un truc à rallonge tout coller.

Pour ce qui est de l'image qui dépasse du cadre, c'est parce que tu ne lui a pas dit de se redimensionner. Il faut préciser que ton image, tu veux qu'elle fasse 100% de la taille disponible du conteneur. Là, elle se met juste à sa taille à elle. Tu vois ce que je veux dire ?

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Mar 28 Fév 2017 - 3:06
Grâce à tes conseils sur le chatbox (encore merci) voici ce que cela donne. Si ce n'est pas bon n'hésite pas à me le dire!

HTML:
Code:

<div class="parent">
<div class="bloc">Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis .</div>
<div class="bloc-un"><img src="http://img11.hostingpics.net/pics/28584860866524p0.jpg" width="150" height="250" style="border-radius: 10px;"></div>
</div>

CSS:
Code:
.parent{
  width: 400px;
  height: 300px;
  background: #fff;
  border:  solid #f4f;
}

.bloc{
  width: 150px;
  height: 200px;
  border: solid  #fdcfdc;
  display: inline-block;
  margin:  45px 0px -188px 25px;
  vertical-align:top;
color: #D4A765;
text-align: center;
font-size: 15px;

}

.bloc-un{
  width: 150px;
  height: 250px;
  border: solid  #fdcfdc;
  display: inline-block;
  margin:  20px 0px -188px 25px;
  vertical-align:top;
color: #D4A765;
text-align: center;
font-size: 15px;
border-radius: 10px;

}
Administratrice - Maxi-codeuse
avatar

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 : 2474
Jeu 2 Mar 2017 - 4:02
Perfecto ! :D

Il y a juste que là tu as mis le CSS de ton image dans le HTML, évites de faire ça, pour une raison simple, si tu veux y revenir plus tard dessus (admettons tu changes la couleur de la bordure), et que tu as 15 membre avec cette fiche... soit tu laisses l'ancienne version soit tu reviens sur TOUT les codes, soit tu modifies 1 ligne de CSS... la dernière version est quand même plus pratique ! :)

donc à l'avenir, sépare le HTML du CSS :)

Je te laisse continuer à coder la fiche ? :)
tu peux faire des blocs plus petits, mais tu dois mettre les titres, et les différents alignements etc ... :)

ça te permet de réviser les propriétés CSS ! :)

à moins que tu préfères qu'on code un schéma à toi ? comme tu veux :)

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Jeu 2 Mar 2017 - 20:03
Kikou j'ai continuer la fiche et je l'ai finit je pense :3 voici les codes!

HTML:
Code:

<div class="parent">
<div class="bloc-zero"></div>
<div class="bloc">Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis .</div>
<div class="bloc-un"></div>
</div>
<div class="parent-deux">
<div class="bloc_deux">Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.

Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas </div>
<div class="bloc_deux">Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.

Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas </div>
<div class="bloc_deux">Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.

Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas </div>

<div class="title">Mon titre</div>
<div class="title-un">Mon titre</div>
<div class="title-deux">Mon titre</div>
<div class="title-zero">Mon Titre</div>
</div>
<div class="parent-trois">
<div class="bloc_trois">Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque </div>
<div class="titre-quatre">mon titre</div>
<div class="bloc-quatre"></div>
</div>


CSS:
Code:
.parent{
  width: 400px;
  height: 500px;
  background: #fff;
  border:  solid #CE746A;
  border-radius: 500px 500px 0px 0px;
}

.bloc{
  width: 150px;
  height: 200px;
  border: solid  #CE746A;
  display: inline-block;
  margin:  25px 0px -188px 25px;
  vertical-align:top;
color: #D4A765;
text-align: center;
font-size: 15px;

}

.bloc-un{
  width: 150px;
  height: 250px;
  border: solid  #CE746A;
  display: inline-block;
  margin:  10px 0px 0px 25px;
  vertical-align:top;
border-radius: 10px;
background-image: url('http://img11.hostingpics.net/pics/687373020202.jpg');
box-shadow: #000 0px 0px 5px;
}

.parent-deux{
  width: 400px;
  height: 1400px;
  background: #fff;
  border:  solid #CE746A;
  margin-top: 10px;
}

.bloc_deux{
  width: 350px;
  height: 400px;
  border: solid  #CE746A;
  display: inline-block;
  margin:  45px 0px 0px 22px;
  vertical-align:top;
color: #D4A765;
text-align: center;
font-size: 15px;

}


.title{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  -1326px 0px 0px 0px;
  vertical-align:top;
color: #CE746A;
text-align: center;
font-size: 20px;


}
.title-un{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  -893px 0px 0px 100px;
  vertical-align:top;
color: #CE746A;
text-align: center;
font-size: 20px;


}

.title-deux{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  -460px 0px 0px 170px;
  vertical-align:top;
color: #CE746A;
text-align: center;
font-size: 20px;


}

.title-zero{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  -1711px 0px 0px 0px;
  vertical-align:left;
color: #CE746A;
text-align: center;
font-size: 20px;


}

.parent-trois{
  width: 400px;
  height: 370px;
  background: #fff;
  border:  solid #CE746A;
  border-radius: 0px 0px 500px 500px;
  margin-top: 10px;
}

.bloc_trois{
  width: 350px;
  height: 100px;
  border: solid  #CE746A;
  display: inline-block;
  margin:  40px 0px 0px 22px;
  vertical-align:top;
color: #D4A765;
text-align: center;
font-size: 15px;

}

.titre-quatre{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  -124px 0px 0px 100px;
  vertical-align:top;
color: #CE746A;
text-align: center;
font-size: 20px;


}

.bloc-quatre{
  width: 350px;
  height: 200px;
  display: inline-block;
  background-image: url('http://img11.hostingpics.net/pics/363707010101.png');
  vertical-align:top;
color: #D4A765;
text-align: center;
font-size: 15px;
 border-radius: 0px 0px 500px 500px;
 margin: -5px 0px 0px 25px;
 box-shadow: #000 0px 0px 5px;

}

.bloc-zero{
  width: 370px;
  height: 200px;
  display: inline-block;
  background-image: url('http://img11.hostingpics.net/pics/363707010101.png');
  vertical-align:top;
color: #D4A765;
text-align: center;
font-size: 15px;
 border-radius: 500px 500px 0px 0px;
 margin: 5px 0px 0px 15px;
 box-shadow: #000 0px 0px 5px;

}
Administratrice - Maxi-codeuse
avatar

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 : 2474
Sam 4 Mar 2017 - 4:23
Coucou ! :)

Alors, si tu veux bien, on va prendre une petite habitude dès maintenant pour ranger ton CSS ! :)
on place les classes dans l'ordre où elles apparaissent dans le code HTML.

du coup :
- parent
- bloc-zero
- bloc
- bloc-un
etc...

pour que je puisse corriger plus facilement et m'y retrouver dans tes différentes classes ^^

ensuite retour sur ton code HTML :
pourquoi avoir mis les blocs contenant le texte en haut et les titres en bas ??? Je ne comprends pas bien la logique derrière ! :)
Surtout qu'après, tu es obligé dans le CSS de venir forcer l'affichage du titre bien plus haut que prévu avec un margin négatif de dingue ! Ce n'est pas optimisé comme méthode ... Laisse les éléments dans le flux autant que possible !!

Le code CSS :
du coup, il faut remettre dans l'ordre les éléments, ainsi que dans le HTML, ce qui va permettre de supprimer quelques lignes de code ! ;)

Alors dans ton parent-un, je ne vois que cette ligne à relever :
Code:
border: solid #CE746A;
sauf erreur de ma part, il faut tjrs préciser un nombre de px pour la largeur de la bordure ... Même si ça semble fonctionner sans ... :mh: je vais me renseigner !

pour la class : bloc-zero. Pourquoi avoir mis un display:inline-block ? et du coup un vertical-align:top ? Tu peux m'dxpliquer ton choix ? :)
Et aussi, pourquoi avoir mis en background l'image ? Ce ne sera pas modifiable par un membre donc ?

j'ai aussi constaté 3 lignes de codes pour la mise en forme de texte. Pourquoi les avoir mis puisque ta balise ne contient aucun texte à personnaliser ? :)


Pour ton bloc :
pourquoi avoir mis un margin-bottom négatif avec cette ligne ?
Code:
margin:  25px 0px -188px 25px;
Je ne vois pas très bien l'utilité ...

Cela étant dit, dans ce cadre, tu pourrais faire une liste des éléments à compléter, au moins nom/prénom/avatar. Et faire une différence dans le CSS pour l'intitulé du champ et le texte rempli. :)

Je te laisse remettre les titres au bon endroit pour la partie numéro 2.
pour ta class : bloc_deux.
Un text-align center, sur des long paragraphe ce n'est pas très lisible, du coup, tout à gauche (ou éventuellement justify pour certains forums), c'est mieux ! :)
D'autre part, j'ai vu que tu avais choisit de mettre une hauteur à ton bloc. Ok. Mais comment gères-tu les utilisateurs très inspirés qui écrivent un roman pour l'histoire du personnage ? :)
Aussi, tu as écris : display: inline-block; pourquoi ajouter cette modification de position du bloc ? :)


Et je vais m'arrêter là !
ça fait déjà beaucoup ! N'hésites pas à me redemander si je suis pas claire ! ;)

_________________________________________

Life is a journey, enjoy the ride

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

avatar
Newbie
Voir le profil de l'utilisateur
Sexe : Féminin Date d'inscription : 28/12/2016
Messages : 35
Lun 6 Mar 2017 - 19:37
@Jamy a écrit:
Coucou ! :)

Alors, si tu veux bien, on va prendre une petite habitude dès maintenant pour ranger ton CSS ! :)
on place les classes dans l'ordre où elles apparaissent dans le code HTML.

du coup :
- parent
- bloc-zero
- bloc
- bloc-un
etc...

pour que je puisse corriger plus facilement et m'y retrouver dans tes différentes classes ^^

D'accord je suis désolée, c'est vrai qu'un code bien ordonner il est plus facile de lire et de régler les problèmes, du coup j'ai replacer tout ceci correctement.

@Jamy a écrit:
ensuite retour sur ton code HTML :
pourquoi avoir mis les blocs contenant le texte en haut et les titres en bas ??? Je ne comprends pas bien la logique derrière ! :)
Surtout qu'après, tu es obligé dans le CSS de venir forcer l'affichage du titre bien plus haut que prévu avec un margin négatif de dingue ! Ce n'est pas optimisé comme méthode ... Laisse les éléments dans le flux autant que possible !!

J'ai eu l'habitude de mettre un peu mes codes n'importe comment XD dés fois j'oublie de mettre un code alors je l'ajoute en dernier. Mais effectivement le fait de faire cela je me retrouve avec des margin en négatif énorme!

@Jamy a écrit:
pour la class : bloc-zero. Pourquoi avoir mis un display:inline-block ? et du coup un vertical-align:top ? Tu peux m'dxpliquer ton choix ? :)
Et aussi, pourquoi avoir mis en background l'image ? Ce ne sera pas modifiable par un membre donc ?

j'ai aussi constaté 3 lignes de codes pour la mise en forme de texte. Pourquoi les avoir mis puisque ta balise ne contient aucun texte à personnaliser ? :)

Je pensais que si on avait la propriété display, il fallait automatiquement ajouter le vertical-align XD , pour les images si j'aimerais que les membres puisse modifier mais je n'arrive pas à mettre les image en HTML et leurs donner des formes arrondit....Je sais pas pourquoi mais j'y arrive pas. Pour les trois blocs qui contenait des code pour la mise en forme du texte on été enlever :)


@Jamy a écrit:
Pour ton bloc :
pourquoi avoir mis un margin-bottom négatif avec cette ligne ?

Comme dit plus haut vue que mes codes n'étais pas bien placer dans l'ordre y'avait énormément de négative dans la marge.

@Jamy a écrit:

D'autre part, j'ai vu que tu avais choisit de mettre une hauteur à ton bloc. Ok. Mais comment gères-tu les utilisateurs très inspirés qui écrivent un roman pour l'histoire du personnage ? :)

Pour cela il suffit d'ajouter un overflow: auto; non?

Voici le code modifier et un peu plus propre ^^ :

HTML:
Code:

<div class="parent">
<div class="bloc-zero"></div>
<div class="titre-zero">Mon Titre</div>
<div class="bloc">Illud autem non dubitatur quod cum esset aliquando virtutum omnium domicilium Roma, ingenuos advenas plerique nobilium, ut Homerici bacarum suavitate Lotophagi, humanitatis multiformibus officiis .</div>
<div class="bloc_un"></div>
</div>

<div class="parent-deux">
<div class="title">Mon titre</div>
<div class="bloc_deux">Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.

Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas </div>


<div class="title-un">Mon titre</div>
<div class="bloc_deux">Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.

Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas </div>

<div class="title-deux">Mon titre</div>

<div class="bloc_deux">Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.

Et prima post Osdroenam quam, ut dictum est, ab hac descriptione discrevimus, Commagena, nunc Euphratensis, clementer adsurgit, Hierapoli, vetere Nino et Samosata civitatibus amplis inlustris.

Sed tamen haec cum ita tutius observentur, quidam vigore artuum inminuto rogati ad nuptias ubi aurum dextris manibus cavatis offertur, inpigre vel usque Spoletium pergunt. haec nobilium sunt instituta.

Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas </div>
</div>

<div class="parent-trois">
<div class="titre-quatre">mon titre</div>
<div class="bloc_trois">Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque </div>
<div class="bloc-quatre"></div>
</div>


CSS:
Code:
.parent{
  width: 400px;
  height: 500px;
  background: #fff;
  border:  3px solid #CE746A;
  border-radius: 500px 500px 0px 0px;
}
.bloc-zero{
  width: 370px;
  height: 200px;
  display: inline-block;
  background-image: url('http://img11.hostingpics.net/pics/363707010101.png');
 border-radius: 500px 500px 0px 0px;
 margin: 5px 0px 0px 15px;
 box-shadow: #000 0px 0px 5px;

}

.titre-zero{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  10px 0px 0px 60px;
color: #CE746A;
text-align: justify;
font-size: 20px;
vertical-align:top;
}


.bloc{
  width: 150px;
  height: 200px;
  border: solid  #CE746A;
  display: inline-block;
  margin:  0px 0px 0px 20px;
color: #D4A765;
text-align: center;
font-size: 15px;
overflow: auto;

}


.bloc_un{
  width: 150px;
  height: 250px;
  border: solid  #CE746A;
  display: inline-block;
  margin:  -5px 0px 0px 20px;
border-radius: 10px;
vertical-align: top;
background-image: url('http://img11.hostingpics.net/pics/687373020202.jpg');
box-shadow: #000 0px 0px 5px;
}




.parent-deux{
  width: 400px;
  height: 1400px;
  background: #fff;
  border:  3px solid #CE746A;
  margin-top: 10px;
}

.title{
  width: 200px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
  margin:  0px 0px 0px 150px;
color: #CE746A;
text-align: justify;
font-size: 20px;
}

.title-un{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  0px 0px 0px 150px;
  vertical-align:top;
color: #CE746A;
text-align: justify;
font-size: 20px;


}

.title-deux{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  0px 0px 0px 150px;
  vertical-align:top;
color: #CE746A;
text-align: justify;
font-size: 20px;


}
.bloc_deux{
  width: 350px;
  height: 400px;
  border: solid  #CE746A;
  display: inline-block;
  margin:  10px 0px 0px 22px;
color: #D4A765;
text-align: center;
font-size: 15px;
}


.parent-trois{
  width: 400px;
  height: 370px;
  background: #fff;
  border:  3px solid #CE746A;
  border-radius: 0px 0px 500px 500px;
  margin-top: 10px;
}

.titre-quatre{
  width: 200px;
  height: 20px;
  display: inline-block;
  margin:  0px 0px 0px 80px;
  vertical-align:top;
color: #CE746A;
text-align: justify;
font-size: 20px;


}
.bloc_trois{
  width: 350px;
  height: 100px;
  border: solid  #CE746A;
  display: inline-block;
  margin:  0px 0px 0px 22px;
color: #D4A765;
text-align: center;
font-size: 15px;

}



.bloc-quatre{
  width: 350px;
  height: 200px;
  display: inline-block;
  background-image: url('http://img11.hostingpics.net/pics/363707010101.png');
  vertical-align:top;
 border-radius: 0px 0px 500px 500px;
 margin: 20px 0px 0px 25px;
 box-shadow: #000 0px 0px 5px;
}

Administratrice - Maxi-codeuse
avatar

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 : 2474
Dim 12 Mar 2017 - 8:32
Yo ! :)
Citation :
D'accord je suis désolée, c'est vrai qu'un code bien ordonner il est plus facile de lire et de régler les problèmes, du coup j'ai replacer tout ceci correctement.
Pas de soucis, c'est pas bien grave, mais en effet, ça me fait gagner du tps quand je te relis ! et même toi, tu t'y retrouveras plus facilement ! :D

Citation :
J'ai eu l'habitude de mettre un peu mes codes n'importe comment XD dés fois j'oublie de mettre un code alors je l'ajoute en dernier. Mais effectivement le fait de faire cela je me retrouve avec des margin en négatif énorme!
haaa d'accord, je comprends mieux ! :D
On revient souvent sur ses codes... On va à fond les ballons et puis on réalise qu'on a oublié un truc ^^ Mais dans ce cas là, faut remonter dans le code, et ajouter des lignes ! ^^ Et c'est possible sur les ordis, c'est pas comme si on pouvait pas créer de la place comme quand on est sur papier ! x)

Citation :
Je pensais que si on avait la propriété display, il fallait automatiquement ajouter le vertical-align XD , pour les images si j'aimerais que les membres puisse modifier mais je n'arrive pas à mettre les image en HTML et leurs donner des formes arrondit....Je sais pas pourquoi mais j'y arrive pas. Pour les trois blocs qui contenait des code pour la mise en forme du texte on été enlever :)
Non pas forcément obligé ^^ il faut l'ajouter si c'est nécessaire. Mais ma question était plus : pourquoi mettre cette div en display inline-block ? Pourquoi changer son affichage par défaut (block) par un inline-block ? Alors, si les images sont personnalisables, on les remets dans le html avec la balise html, et on va voir pour leur appliquer un arrondis ! ;)
Pour les suppressions de lignes, super, mais n'hésites pas si je te fais des remarques que tu comprends pas le sens ! :) le but c'est que la prochaine fois que tu codes tu ais intégrés ces notions et n'utilises plus la même façon de faire ! ;)

Citation :
D'autre part, j'ai vu que tu avais choisit de mettre une hauteur à ton bloc. Ok. Mais comment gères-tu les utilisateurs très inspirés qui écrivent un roman pour l'histoire du personnage ? :)

Pour cela il suffit d'ajouter un overflow: auto; non?
c'est tout à fait ça ! :D


Nouveau retour sur tes codes :

- tjrs la question précédente sur l'utilisation du display:inline-block sur le bloc-zero.
- enlever le background et le mettre dans le html l'image
- dans bloc_un enlever le bck aussi et le mettre dans le html
- pourquoi avoir défini une hauteur au block .parent-deux ? en effet, il contient trois blocks qui ont chacun une hauteur, mais est-ce vraiment utile ? D'autant que du coup, j'ai moi, on a un espace pas très joli du coup en dessous du derniers blocks.
- même question que la 1er, pourquoi avoir changer le display de la balise qui a te sert à mettre en page les titres ?
- quelle est la différence entre ton : .title, .title-un et .title-deux ? J'ai rien vu de différent ! pourquoi en avoir 3 différents du coup ? ça allonge ton code inutilement ...
- pense à ajouter le overflow, car le texte déborde sur les bordures à certains endroit ! ;)
- idem dans dernier block sortir l'image.

Pour personnaliser une image qui est dans un block, il faut la cibler, soit tu ajoutes une class à ton image, soit tu vas dire dans le CSS : dans la class .machin récupère l'img et mets là comme ça.

exemple avec la façon de récupérer :
Code:
.bloc-zero img{
/* ici propriété pour l'image */
}

du coup, ici, tu vas pouvoir dire la taille que tu veux qu'elle fasse, les bordures (ou non), les bords arrondis etc.. :D


N'hésites pas si tu as des questions ou que je suis pas claire ! :D

_________________________________________

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