Partagez | 
 

 Petit soucis de codage

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Tatous

Doyenne

Bons Points (BP) : 2543

Voir le profil de l'utilisateur

MessageSujet: Petit soucis de codage   Jeu 4 Jan - 20:38
Coucou par ici :3

Je sais que ça fait bien longtemps que je ne suis pas passée par là (et je comprendrai tout à fait que vous ne souhaitiez pas m'aider) mais je viens quand même tenter ma chance. Ayant enfin un peu de temps pour moi, je me remets doucement au codage par le biais de mes forums RP. Or, en voulant refaire la mise en page de mes liens, j'ai eu un petit soucis.

Pour essayer de clarifier les choses, j'ai voulu regrouper le CSS au début en utilisant des classes (vous m'excuserez si ce n'est pas le bon vocabulaire, je dépoussière tout ça :3). J'ai fait vraiment simple parce que je ne maîtrise pas encore trop, et il y a sûrement des erreurs, mais ça a l'air de fonctionner à peu près. Voila déjà mon code :

Code:
<style type="text/css" media="screen"> .description{overflow: auto; max-height: 100px;  font: verdana; font-size: 12px; text-align: justify; padding: 20px;} .lienpnj{font-weight: bold; color : #ffffff;} .imagepnj{border: 2px solid #ffffff; height: 100px;}</style>

<div class="liste-fiche"><!--
  <table><!--
      --><tr><!--
          --><td class="imagepnj"><img src="http://nsa39.casimages.com/img/2017/09/01/170901073909190252.png" /></td><!--
          --><td class="description"><span class="lienpnj">SAFI ─ Mère (†) </span>Il a débuté sa vie sous sa seule protection, jusqu'à ce qu'elle quitte Prideland pour vivre avec son père. Elle est morte assassinée par les Jangowas sous ses yeux, sans qu'il n'ait jamais compris pourquoi. Il en cauchemarde encore par moment, et s'il a appris à oublier, elle lui manque énormément.
[spoiler="RP en commun"]○ [url=nom du RP]nom du RP[/url] (Chapitre X)<br>○ [url=nom du RP]nom du RP[/url] (Chapitre X)<br>○ [url=nom du RP]nom du RP[/url] (Chapitre X)[/spoiler]</td><!--
        --></tr><!--
    --></table><!--
--></div>

L'image à gauche fera toujours 100*100 px, or j'aurai voulu que le texte ne dépasse jamais, et que du coup une barre de scroll apparaisse quand le texte est trop grand. Donc j'ai essayé de limiter la hauteur à 100 px et d'utiliser la balise overflow, mais ça ne fonctionne pas. J'imagine qu'il doit y avoir une erreur quelque part puisque ça déforme également ma bordure (qui est censée encadrer l'image). Et en plus de ça, je ne sais pas trop comment faire pour que la barre de scroll ne concerne que le texte (mais pas le spoiler ; j'aimerai qu'il apparaisse peu importe la quantité de texte). Je ne sais pas si j'arrive à bien me faire comprendre :/

S'il y a une gentille âme qui a du temps à perdre, ce serait très gentil :$

EDIT : Il doit y avoir une grosse bourde quelque part, puisque je ne peux pas afficher mon code sans les balises sans que ça déforme toute la page ._.
___________________


→ Ma Galerie      


Merci à M-Animals et Agnïeszka pour leurs cadeaux trop choupis ♥


avatar
En ligne

Elilith

Assistante

Bons Points (BP) : 2841

Voir le profil de l'utilisateur

MessageSujet: Re: Petit soucis de codage   Jeu 4 Jan - 21:53
Coucou ! Alors déjà première erreur, tu as un commentaire qui n'est pas refermé, d'où les bugs sans doute Very Happy

Code:
 <div class="liste-fiche"><!--
      --><table><!--
le code complet:
 

Ensuite on va essayer de voir point par point, déjà la déformation de sa bordure c'est dû au fait que ta bordure en question se trouve autour du td (de la case) et pas autour de l'image, tu peux régler le soucis très simplement en appliquant ta bordure non pas à la case mais à l'image :
Code:
.imagepnj img{border : 2px solid #ffffff}
le code complet:
 

Ensuite le soucis pour ton scroll c'est que les td (les cases donc) sont considérés comme des balises inline et pas comme des block (les balises inline ne peuvent pas vraiment avoir de hauteur), donc la solution, c'est de la transformer en inline-block comme ça :
Code:
.description{display : inline-block;}
le code complet:
 

Dernier problème donc : il faut que le spoiler ne soit pas inclut dans ton défilement. Du coup le défilement ne doit pas s'appliquer comme je l'ai fait plus haut à la case entière mais juste à un bloc interne. Je m'explique, dans ton code html, tu doit mettre ton texte entre balise div class="cequetuveux" (je vais mettre "texte" pour le test). Et du coup, le défilement ne sera plus sur .description mais sur .texte, et on lui mettra une hauteur en dessous de 100px (pour qu'il y ait la place pour mettre le spoiler). Donc pour ton html ça donnera ça :
Code:
<td class="description"><div class="texte"><span class="lienpnj">SAFI ─ Mère (†) </span>Il a débuté sa vie sous sa seule protection, jusqu'à ce qu'elle quitte Prideland pour vivre avec son père. Elle est morte assassinée par les Jangowas sous ses yeux, sans qu'il n'ait jamais compris pourquoi. Il en cauchemarde encore par moment, et s'il a appris à oublier, elle lui manque énormément.</div>
    [spoiler="RP en commun"]○ [url=nom du RP]nom du RP[/url] (Chapitre X)<br>○ [url=nom du RP]nom du RP[/url] (Chapitre X)<br>○ [url=nom du RP]nom du RP[/url] (Chapitre X)[/spoiler]</td>
le style de .description :
Code:
.description{font: verdana; font-size: 12px; text-align: justify; padding: 20px;}
(on enlève les choses inutiles)
et le style de .texte :
Code:
.texte{max-height : 50px; overflow : auto}
le code complet:
 


SAFI ─ Mère (†) Il a débuté sa vie sous sa seule protection, jusqu'à ce qu'elle quitte Prideland pour vivre avec son père. Elle est morte assassinée par les Jangowas sous ses yeux, sans qu'il n'ait jamais compris pourquoi. Il en cauchemarde encore par moment, et s'il a appris à oublier, elle lui manque énormément.

RP en commun:
 


(Là c'est encore un peu grand mais tu peux adapter la hauteur de .texte, après ça risque de faire un peu petit, donc ce que je te conseille c'est de laisser un peu plus de 100px d'espace à tout ça, mais de centrer verticalement ton image Very Happy )

Voilà est-ce que ça te vas :3 ? Si tu as des questions hésite surtout pas o/ !

(Et pourquoi on aurait pas envie de t'aider dis donc xD ? C'est n'importe quoi ça :calincanard: !)

EDIT : si tu vois ça avant que je corrige l'erreur : à la prévisualisation ça marchait très bien mais à l'envoi l'image est déformé, je regarde ça Very Happy!

EDIT 2: Alors je sais pas si le soucis apparaîtra chez toi, mais si ton image est écrasée dans la hauteur, tu auras juste besoin de rajouter ça :
Code:
.imagepnj{width : 125px;}
et normalement ça réglera le soucis ^^ !
___________________




Merci à Agnïeszka !
Mes badges de langues étrangères:
 
avatar

Tatous

Doyenne

Bons Points (BP) : 2543

Voir le profil de l'utilisateur

MessageSujet: Re: Petit soucis de codage   Ven 5 Jan - 14:48
Bouh, les bêtises What a Face

Ça a l'air tellement facile avec toi Razz
Je vais en profiter pour essayer de me coucher moins bête :3

→ Pour la bordure de l'image, le fait que tu rajoute le « img » devant, ça permet que les modifications s'appliquent juste sur l'image ? Du coup :
Code:
.imagepnj{border: 2px solid #ffffff; height: 100px;}
→ s'applique à la case du tableau ? (Mais dans ce cas, pourquoi la hauteur de la case n'est pas de 100 px ?)
Code:
.imagepnj img{border : 2px solid #ffffff}
→ s'applique uniquement à l'image ?

Et par exemple, si je voulais rajouter également une bordure à la cellule ou quoi (ça n'est pas le cas, mais autant comprendre jusqu'au bout) il faudrait créer une nouvelle classe du coup ?

En soi, une fois qu'on a compris ça me paraît tout de suite plus simple (même si c'est pas toujours le cas quand on est tout seul xD). En gros en fait, les attributs qu'on donne a une classe s'applique à tous les éléments compris entre les balises <*div class="...">...<*/div> ? Et du coup, quelle est la différence entre les balises <*div> et <*span> (j'ai cru comprendre que span c'était plutôt pour une petite partie/quelques mots [j'arrive pas à l'expliquer correctement é_è] mais je ne suis pas certaine de l'avoir utilisé à bon escient :3)

Merci beaucoup de prendre le temps de m'aider Elilith. Franchement, si j'ai du temps un jour, je me plongerai dans le codage, je trouve ça chouette et c'est assez logique au fond. Du coup, n'hésite pas à prendre ton temps, ça n'est pas pressé puisque le code de base marche, et que là c'est juste pour comprendre :3

EDIT : Et comment tu différencies une balise inline d'une balise block du coup ? Enfin j'ai pas trop bien compris cette partie, mais si c'est trop compliqué c'est pas grave ^^
___________________


→ Ma Galerie      


Merci à M-Animals et Agnïeszka pour leurs cadeaux trop choupis ♥


avatar
En ligne

Elilith

Assistante

Bons Points (BP) : 2841

Voir le profil de l'utilisateur

MessageSujet: Re: Petit soucis de codage   Ven 5 Jan - 15:38
Ravie de pouvoir t'être utile en tout cas o/ !

Je vais essayer de structurer ça pour que ce soit clair xD !

Du coup je vais commencer par la différence balise inline/block, parce que je pense que ça t'aidera sans doute à mieux comprendre la suite Very Happy !

Balise inline ou block ?

Une balise block c'est justement ... un bloc ! c'est à dire que tu peux facilement le représenter comme une boîte, par exemple ceci :

code:
 
c'est un bloc puisque comme tu le vois, il s'agit d'une boîte Very Happy ! Comme balise de type "block" tu as les div, les table, les fieldset, les header etc.
A l'inverse, une balise inline représente plus une zone de texte, un élément dans le texte par exemple. Si j'écris cela :
Bienvenue sur School of progress !
et que je veux mettre le texte "School of Progress" en gras, je vais utiliser une balise inline pour entourer ce texte :
Bienvenue sur School Of progress !
code:
 
Il s'agit d'éléments à l'intérieur des lignes (c'est la traduction littérale de "inline"), tu peux avoir par exemple, span, strong, em etc !

La différence principale est que, premièrement, tu emboiter les balises comme tu veux sauf que tu ne peux pas mettre de balise block à l'intérieur d'une balise inline. (Mais tu peux mettre des balises block ou inline les unes à l'intérieur des autres, aucun problème), la deuxième différence est que tu as des propriétés, comme width, height ou box-shadow qui ne peuvent pas s'appliquer aux balises inline, et la dernière différence est que les balises block reviennent automatiquement à la ligne et possèdent une marge (à moins que tu leur dise le contraire).

Ce n'est pas toujours évident de les différencier au premier coup d'oeil donc tu as deux moyen de savoir si une balise est inline ou block :
- Tu peux effectuer une recherche sur internet
- Ou tu peux utiliser l'inspecteur
Utiliser l'inspecteur:
 

Maintenant que tu sais reconnaître une balise inline ou une balise block et que tu connais grossièrement leurs différences, je peux te parler d'un procédé super, le display. Ajouter "display : block" ou "display : inline" au css permet de changer le type de ta balise ! Encore mieux, il existe un type "personnalisé" du nom de "inline-block" qui permet d'avoir toutes les propriétés des block (changer la hauteur tout ça) tout en laissant le block à l'intérieur d'une ligne !

Et du coup voilà déjà la réponse à ta deuxième question, le code que tu me cite :
Code:
    .imagepnj{border: 2px solid #ffffff; height: 100px;}

ne fonctionne pas parce que si tu regarde bien, ta classe imagepnj est donné à une balise td, hors, avec l'inspecteur, tu peux regarder que le td est une balise inline ! Comme je l'ai expliqué juste un peu plus tôt, les balises de type inline ne peuvent pas comprendre les propriétés comme height, et du coup ton code ignore juste ce passage ^^ !

Citation :
Et par exemple, si je voulais rajouter également une bordure à la cellule ou quoi (ça n'est pas le cas, mais autant comprendre jusqu'au bout) il faudrait créer une nouvelle classe du coup ?
Quand tu dis cellule tu parle de quoi ? Parce que pour moi une cellule c'est un td, hors en l'occurence ton td a déjà une bordure Very Happy !

(cela réponds aussi à ta question concernant la différence entre span et div, span est une balise inline et div est une balise block, du coup elles ne fonctionnent pas pareil Very Happy )

Bref ! Passons à la suite de tes questions Very Happy !

Pour la bordure de l'image, le fait que tu rajoute le « img » devant, ça permet que les modifications s'appliquent juste sur l'image ?

Oui, parce qu'en fait quand j'écris dans mon style :
Code:
.imagepnj img
Je lui indique que je veux appliquer ce style à toutes les balises de type img qui se trouve à l'intérieur d'une classe imagepnj. C'est ce qu'on appelle un sélecteur css (ce tuto l'explique plutôt bien !)

Pour conclure

Citation :
En soi, une fois qu'on a compris ça me paraît tout de suite plus simple (même si c'est pas toujours le cas quand on est tout seul xD). En gros en fait, les attributs qu'on donne a une classe s'applique à tous les éléments compris entre les balises <*div class="...">...<*/div> ?
Alors peut-être que du coup tu as déjà compris avec ce que j'ai expliqué plus haut mais je vais essayer d'y répondre quand même : oui et non xD !

Déjà pour une question de sémantique, on ne va pas dire attribut pour ce que tu met dans ton style, mais plutôt propriété Very Happy ! Cela peut te paraître futile comme ça, mais attribut correspond à quelque chose d'autre en html et du coup il vaut mieux éviter la confusion. Du coup quand tu donne une bordure à un élément, tu fixe la propriété border à "1px solid black", par exemple Very Happy ! Ensuite ce que tu dit dépends des propriétés et des conteneurs, c'est un peu compliqué à expliquer comme ça mais ce que je peux essayer de te dire c'est que :
1°) Les propriétés s'appliquent à l'élément sur lequel tu les fixe, si tu définis des propriétés pour une div portant une class, toutes les div portant cette class auront les mêmes
2°) Tout ce qui se trouve à l'intérieur de cette div sera influencé par ses propriétés. Par exemple, si tu met "text-align : center" à ta div, toutes les balises, qu'elles soient block ou inline, qui seront à l'intérieur de ta div, seront centrées. Si tu déplace ta div sur la droite, tous ce qui sera à l'intérieur sera déplacé sur la droite aussi, mais si tu met une bordure à ta div et que tu inclus une autre balise block à l'intérieur (un paragraphe par exemple), cette dernière ne possèdera pas de bordure. (Je ne sais pas si je suis très claire, je pense que la pratique t'aidera plus à comprendre que mes longues explications xD)

Citation :
Merci beaucoup de prendre le temps de m'aider Elilith. Franchement, si j'ai du temps un jour, je me plongerai dans le codage, je trouve ça chouette et c'est assez logique au fond.
C'est normal, j'ai quelques connaissances, j'essaye de les partager xD ! Mais franchement lance toi dans le codage, surtout si tu aime la logique, chez moi c'est devenus une passion au point que j'en fait mes études maintenant, quand on aime les trucs qui s'emboitent bien et qui font sens, c'est une discipline passionnante Very Happy !

Voilà, n'hésites pas si tu as encore des questions, si mes explications ne sont pas claires tout ça, je suis pas forcément toujours assez pédagogue xD !
___________________




Merci à Agnïeszka !
Mes badges de langues étrangères:
 
avatar

Tatous

Doyenne

Bons Points (BP) : 2543

Voir le profil de l'utilisateur

MessageSujet: Re: Petit soucis de codage   Jeu 11 Jan - 19:55
Coucou Elilith Smile

→ Concernant les balises block/inline, ton explication est vraiment intéressante ! Mais par exemple, puisque ici je mets ma description de lien entre des balises div, cela signifie que le paragraphe est considéré comme un bloc ?

→ J'imagine qu'utilise systématiquement « display » n'est pas une bonne chose ? Pourtant, de ce que je comprends, ça simplifierai la tâche non ?

→ Comment je peux connaître les autres propriétés qui ne s'appliquent que aux balise block/inline ?

→ Concernant le « img » que tu appelles sélecteur CSS, est-ce que du coup, dans une seule classe (.imagepnj par exemple ici) ce serait possible d'attribuer à la fois des propriétés pour un texte, etc. et en même temps des propriétés aux images grâce au sélecteur ? Je ne sais pas bien me faire comprendre, mais imaginons que entre deux balises div, j'ai un texte suivi d'une image. Est-ce que je peux attribuer des styles aux deux en utilisant une seule class ? Ou bien est-ce qu'il faudrait que je fasse une class pour l'image et une pour le texte (en mettant donc des balises div séparées) ? Je ne sais toujours pas si c'est compréhensible xD

→ Dans ton exemple :
Citation :
Par exemple, si tu met "text-align : center" à ta div, toutes les balises, qu'elles soient block ou inline, qui seront à l'intérieur de ta div, seront centrées. Si tu déplace ta div sur la droite, tous ce qui sera à l'intérieur sera déplacé sur la droite aussi, mais si tu met une bordure à ta div et que tu inclus une autre balise block à l'intérieur (un paragraphe par exemple), cette dernière ne possèdera pas de bordure.
Je ne comprends pas pourquoi le paragraphe n'aurait pas de bordure. Est-ce que c'est parce qu'il faudrait mettre une nouvelle balise div juste pour ce paragraphe ? Schématiquement, si on devait représenter ce que tu prend comme exemple, ça veut dire que la balise div dont tu parles concernerait la « boite » et que le paragraphe (qui n'aurait pas de bordure) serait le contenu ? Donc il faudrait rajouter une balise div qui concernerait non plus la boîte mais le contenu si je voulais l'encadrer du coup ?/Mode compréhension aisée bonjour !/

Je pense que je vais surveiller les place en codage, ou jeter un oeil aux exercices et au tutoriel quand j'aurai un peu de temps :3
Après, comme je n'ai pas énormément « d'application » au codage en ce moment, j'aurai peur de perdre la main si je fais une pause :/

Merci bien de ton aide :3
___________________


→ Ma Galerie      


Merci à M-Animals et Agnïeszka pour leurs cadeaux trop choupis ♥


avatar

Eluknow

Doyen

Bons Points (BP) : 109

Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

MessageSujet: Re: Petit soucis de codage   Jeu 11 Jan - 23:21
Je passe par ici alors je me permets de répondre (en espérant que ça ne dérange ni toi ni Elilith ! )
Citation :
Mais par exemple, puisque ici je mets ma description de lien entre des balises div, cela signifie que le paragraphe est considéré comme un bloc ?
Première chose, ce n'est pas un paragraphe mais un texte :p. Parce qu'un paragraphe (quand tu en parles dans un contexte de html/css), c'est la balise <p> ! (qui est une balise block).
Et de ce fait, ton texte est... un texte. Il n'a pas de type en fait. C'est la balise div qui l'englobe qui est de type block. J'espère avoir bien compris ta question et bien répondu à celle-ci.

Citation :
J'imagine qu'utilise systématiquement « display » n'est pas une bonne chose ?
Il n'y a aucun problème à utiliser display plusieurs fois tant que cette propriété est bien utilisée. Elle est même trèèèès souvent utilisée !

Citation :
Comment je peux connaître les autres propriétés qui ne s'appliquent que aux balise block/inline ?
Le mieux est de se fier à la documentation officielle. Mais en gros :
- Les propriétés width; height et celles liées avec le positionnement sont réservées aux blocks. Voilà ! C'est (à peu près tout) :p

Citation :
Concernant le « img » que tu appelles sélecteur CSS, est-ce que du coup, dans une seule classe (.imagepnj par exemple ici) ce serait possible d'attribuer à la fois des propriétés pour un texte, etc. et en même temps des propriétés aux images grâce au sélecteur ? Je ne sais pas bien me faire comprendre, mais imaginons que entre deux balises div, j'ai un texte suivi d'une image. Est-ce que je peux attribuer des styles aux deux en utilisant une seule class ? Ou bien est-ce qu'il faudrait que je fasse une class pour l'image et une pour le texte (en mettant donc des balises div séparées) ?

C'est en effet un sélecteur. Etant donné qu'il ne cible que les balises <img> tu ne pourras pas attribuer de style à un texte avec ça. Si tu as un texte suivi d'une image dans un paragraphe :
Code:
<p>Du texte <img src="" alt=""></p>
Et que tu veux attribuer des propriétés au texte et à l'image. Si tu veux attribuer le même style aux deux, alors il te suffira de faire :
Code:
p{/** Ton CSS **/}
Si tu veux appliquer des propriétés différentes aux deux, il faudra :
Code:
p{/** Ton CSS pour le texte **/}
p img{/** Ton CSS pour l'image **/}

Citation :
Je ne comprends pas pourquoi le paragraphe n'aurait pas de bordure. Est-ce que c'est parce qu'il faudrait mettre une nouvelle balise div juste pour ce paragraphe ?
En fait, c'est simple. Chaque propriété CSS agit sur l'élément concerné. Comme le dit Elilith, si tu as un paragraphe (<p>) dans une div et que sur cette div tu mets le style suivant :
Code:
div{
text-align:center;
border: 1px solid black;}
Ici, l'élément sur lequel on applique le style est la div. Donc une bordure de 1px solid black sera appliquée à la div, et les textes dans la div seront centrés. Ces deux propriétés sont bien pour la div.
Du coup, les textes dans la div seront centrés.
Prenons ce code :
Code:
<!DOCTYPE html>
<html>
<head>
<style>
div#test{
    text-align: center;
    width: 200px;
    height: 100px;
    border: 1px solid black;
}

p{
width: 100px;
height: 30px;
border: 1px solid blue;
}
</style>
</head>
<body>

<div id="test">
<div>
<p>Du texte</p>
</div>
</div>

</body>
</html>
Le résultat :
Le texte qui est dans la div est bien centré. Mais centré par rapport à la balise qui le contient, c'est à dire le paragraphe ici. Mais attention : le paragraphe, lui, n'est pas centré dans la div. En effet, la balise <p> n'est pas du texte, c'est une balise block, donc c'est normal qu'elle ne soit pas centrée.
Tu comprends ?

Du coup, je reviens sur ce qu'Elilith a dit : "Par exemple, si tu met "text-align : center" à ta div, toutes les balises, qu'elles soient block ou inline, qui seront à l'intérieur de ta div, seront centrées" => ce n'est vrai que pour les balises inlines, pas les balises blocks, comme on vient de le voir dans l'exemple au dessus. Et c'est logique : text-align: center signifie : "alignement du texte : centré" et une balise block c'est une boite, pas du texte Wink

Une deuxième petite chose : la balise <td> n'est pas une balise de type inline, c'est une balise de type un peu spécial qui n'est ni block ni inline mais un type lié aux tableaux Wink

En espérant t'avoir aidé un minimum !
___________________



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar
En ligne

Agnïeszka

Directrice

Bons Points (BP) : 1538

Voir le profil de l'utilisateur

MessageSujet: Re: Petit soucis de codage   Ven 19 Jan - 15:02
Coucou Tatous,

Tu as vu la réponse d'Elu ? Smile

Si tu ne nous donnes pas de nouvelle d'ici 3 jours, on devra malheureusement archiver cette aide Wink
 

Petit soucis de codage

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» petit soucis
» petit soucis avec les pois
» CFx de R9-280x petit soucis
» Un petit bonjour / bonsoir !
» Petit Cafe Gratuit au McDo du 15 au 28 novembre

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Besoin d'aide ?-
Sauter vers:  
Espace Admin du site

©2008-2018 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants