AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez | 
 

 [Cours & Questions] Drag' ♥

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2, 3  Suivant
AuteurMessage
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: [Cours & Questions] Drag' ♥   Mar 12 Juin 2012, 16:42

Hey hey hey Voilà c'est ouvert, dès que t'auras la moindre question sur ce qui touche de près ou de loin au HTMl, CSS ou aux templates tu me demandes ici !

Comme ça, tous les gens qui passent par là auront des réponses aux questions qu'ils ne se posent pas \0/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mer 18 Juil 2012, 18:28

Et les autres aussi, ils peuvent poser des questions What a Face

A part ça, comme dis dans mon message, j'ai enfin réussi à faire une PA qui ne bug pas, hourra ! Mais maintenant, j'ai une question :

Comme tu as fais les fiches comme celle-ci ou celle-là ? Enfin, je veux dire, comment tu commences quoi, tu pars de quoi ? C'est pas très joli à lire ce que je viens d'écrire, mais ça exprime bien ce que je veux dire ♫

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Jeu 19 Juil 2012, 11:26

Alors bravo déjà, je savais que t'allais y arriver Very Happy

Niveau fiche, j'essaie juste de me demander à quoi je veux que ça ressemble, je sais que pour la seconde, j'avais d'abord fait tout via Toshop :

Spoiler:
 

Ensuite il faut regarder la structure, le squelette sans chercher à modifier les couleurs ou les tailles. J'ai donc commencé à faire un tableau à une ligne et deux colonnes, puis placer une div en dessous. Ensuite une fois le squelette fait, j'ai ajouté les titres, les textes....
Et enfin j'ai modifié le CSS pour avoir le même rendu que sur toshop Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Jeu 19 Juil 2012, 13:50

Encore merci ♥

D'accooooooooooooord... En fait tu illustres ton idée, et ensuite tu fais étape par étape... Je vais essayer, nah ! Very Happy

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Jeu 19 Juil 2012, 14:05

Tiens, si tu veux, fais un schéma de ce que tu veux obtenir, et on ira étape par étapes pour obtenir un résultat le plus proche possible de ton schéma Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mer 25 Juil 2012, 17:13

Voilà :


Elle est donc composée, à la base, d'une div à fond uni, d'une "intro" avec un tableau, de trois parties titrées et d'une cadre intérieur. C'est possible de coder ça ?

Je pense commencer comme ça :

Code:

<div style="border: 1px solid #000000; background-color: #6a5757; width: 400px; height: 600px"><table border="0"; cellspacing="20"><tr><td>Logo</td><td>Texte</td></tr></table>

TITRE
TexteTexteTexteTexte

[right]TITRE[/right]
TexteTexteTexteTexte

TITRE
TexteTexteTexteTexte
</div>

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Ven 27 Juil 2012, 13:59

Oulalà, une admine qui triple poste c'est pas joli joli ça ! x'D Aller, je supprime les autres messages Razz

Aloors jolie fiche ! On va donc y aller étapes par étapes pour la mettre en forme.

On commence tout d'abord par le squelette, en laissant totalement l'aspect esthétique de coté.

Alors, tu m'as proposé
Code:
<div style="border: 1px solid #000000; background-color: #6a5757; width: 400px; height: 600px"><table border="0"; cellspacing="20"><tr><td>Logo</td><td>Texte</td></tr></table>

TITRE
TexteTexteTexteTexte

[right]TITRE[/right]
TexteTexteTexteTexte

TITRE
TexteTexteTexteTexte
</div>

On va commencer par enlever le vilain BBcode, enfin ça c'est un peu ma manie, je n'aime pas mélanger les deux comme je trouve que le code n'est plus très propre n_n. Soit les balises right en moins, on mettra le texte à droite avec du CSS.




Ensuite par rapport à la structure de ta fiche, je pense qu'on peut utiliser un fieldset pour avoir directement le titre au milieu de la bordure supérieure sans avoir à se casser la tête pour bouger le titre. Une div aurait aussi convenu, mais ça aurait peut être été plus compliqué.

Un Fieldset est à la base utilisé pour structurer les formulaires afin de regrouper différents éléments avec un titre commun. Comme je vois que les gens l'utilisent hors de son contexte de formulaire, on va faire la même chose, par contre je ne suis pas sûre que ça puisse être validé par W3C ^^"



Alors déjà voilà par quoi j'aurais commencé :

Code:
<fieldset>
<legend>Horse-Wild</legend>
</fieldset>
ce qui donne :
Horse-Wild



On modifiera par la suite les couleurs, polices, l'alignement au milieu du texte avec le CSS.



Ensuite pour l'intérieur tu as commencé par un tableau à une ligne et deux colonnes, c'est nickel, il est bien fait !

On peut laisser ça comme ça, mais comme on est là pour apprendre, je vais te montrer une nouvelle manière de mettre deux éléments de ce type côtes à côtes sans tableaux : le span avec un style="display:inline-block;".


Je pense que tu ne connais pas cette manière de faire car elle n'est pas souvent utilisée, mais elle est pourtant super pratique !
Le principe de l'inline-block est d'utiliser les bons côtés d'une span et les bons côtés d'une div :
  • Grâce au span l'élément reste de type en ligne donc il n'y a pas de passage automatique à la ligne comme avec un block.
  • Grâce au block l'élément peut avoir une largeur et une hauteur modifiable.

On peut donc obtenir quelquechose qui ressemble à un tableau, mais qui peut être beaucoup plus pratique car en modifiant seulement le css on peut changer d'aspect en mettant les deux éléments soit à coté sois l'un sous l'autre.

Petit exemple de plusieurs span à la suite :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc feugiat, orci et vehicula convallis, leo ante posuere risus. Sed luctus rhoncus nisl, quis auctor nisi elementum imperdiet. Nullam nisi enim, vulputate quis vehicula quis, lacinia nec tortor. Mauris dapibus erat vel purus ullamcorper hendrerit. Praesent imperdiet luctus massa vitae pellentesque. In hac habitasse platea dictumst. Ac elementum urna sem nec nibh. Vivamus sem urna, pulvinar vel tincidunt vel, molestie nec leo. Pellentesque in ipsum sed erat mattis ullamcorper. Erat vel purus ullamcorper hendrerit. Praesent imperdiet luctus massa vitae pellentesque. Nunc convallis suscipit metus, a sollicitudin tortor consectetur et. Vestibulum vel odio ut tellus viverra pulvinar ac at lacus. Etiam rhoncus est sed mi sagittis sollicitudin. Donec sem enim, sagittis vel posuere eu, sagittis vel massa. Mauris dapibus erat vel purus ullamcorper hendrerit. Praesent imperdiet luctus massa vitae pellentesque. In hac habitasse platea dictumst.

On peut donc faire de même avec ton image et ton texte à coté. Comme ça, si au prochain changement de design tu veux mettre une image plus grande et placer ton texte en dessous, tu n'as même pas besoin de modifier la fiche en elle même et d'enlever les tableaux, il te suffira de remplacer le inline-block par block tout simplement.

Code:
<img src="http://img850.imageshack.us/img850/9763/tempdj.jpg" alt="" />
<span style="display:inline-block; height:60px; width:200px;">Un RPG équin avec:<br />plus de 1000 membres<br /> 143 376 messages postés<br />Et 7 ans de vie active.</span>
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.

Hum, zut, j'avais dis pas de CSS pour commencer, je me contredis moi même What a Face
Enfin non, on à qu'à dire qu'on en est arrivés là :

Code:
<fieldset><legend>Horse-Wild</legend>
<img src="http://img850.imageshack.us/img850/9763/tempdj.jpg" alt="" /><span>Un RPG équin avec: <br/ >plus de 1000 membres<br />143 376 messages postés<br />Et 7 ans de vie active.</span>
</fieldset>
Horse-Wild
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.


Et on les mettra à coté plus tard cheers .



Heu, désolé pour le gros paquet à lire, je m'arrête là pour l'instant voir si tu as compris ces nouvelles choses, on continue dès que tu auras tout assimilé, et si t'as des questions, comme d'hab n'hésite pas !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Ven 27 Juil 2012, 14:27

*Reprend son souffle* Je sors d'une séance d'écriture de ma fiction donc ça va, j'étais prête pour lire ton joli pavé Smile

Je suis ok, l'esthétique sera modifiée après de toute façon, là j'avais fait les couleurs au pif mdr.

Justement, c'est quoi le code pour mettre du texte à droite ? En HTML et CSS je veux dire ^^ Je ne sais pas donc j'y vais à l'arrache avec le BBcode.

Ooooooooooooh ! Je savais bien que je connaissais un code pour faire ça x) Je l'ai déjà vu dans une fiche sur Equidéow ^^ Bref, donc j'ajoute ça dans ma liste de code, je reviens. *Sors* ... *Reviens*

Ah, c'est ça, span ? What a Face Je le vois souvent dans les fiches HTML, mais je ne comprends pas du tout ce qu'il fait ^^ D'ailleurs, faudra que tu m'explique l'utilisation du block aussi, parce que c'est comme span : j'ai déjà vu mais je ne sais pas ce que ça, et à quoi ça sert Smile

Donc span, ça fait des cases ? En gros, en simplifiant au maximum pour le bonbon fondu que je suis.


Je ne comprends pas pourquoi on ne met pas l'image et le texte côte à côte tout de suite... ça donnera ça non ? Donc ce n'est pas beaucoup plus compliqué ^^

Horse-Wild
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.



Extra : Petit essai personnel pour mes questions futures :


Horse-Wild
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.




Hum... Pas de question pour le moment, à par celles posées plus haut Smile.


_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Ven 27 Juil 2012, 15:23

Ah, tant mieux alors!

Bon, je t'explique d'abord le principe des span et div, ce sont les éléments de bases dont tu te serviras toujours pour faire un peu tout et n'importe quoi.


Il y a deux types d'éléments :

• Les éléments inline (en ligne) aussi appelés élément de niveau texte. Ils se suivent sur une même ligne de texte les uns après les autres. On retrouve les éléments comme les images ( et non, une image n'est pas un block !), les liens avec la balise < a > ou le texte, que je suis en train d'écrire en ce moment par exemple.

• Les éléments de type block. Ils se succèdent verticalement et sont séparés par un retour à la ligne automatique. On retrouve les paragraphes < p > , les listes et les éléments de liste < ul > et < li > et d'autres encore que je ne connais pas bien ^^".

Le span est donc un élément en ligne, et la div est un élément block. Regarde par exemple leur comportement quand on en mets plusieurs à la suite :

Code:
<span>premier span</span> blablabla <span>second span</span> et blablabla <span>dernier span</span>
Donne :
premier span blablabla second span et blablabla dernier span

Alors que pour la div :
Code:
<div>première div</div> blablabla <div>deuxième div</div> et blablabla <div>dernière div</div>
Donne :
première div
blablabla
deuxième div
et blablabla
dernière div


Mis comme ça, un span et une div ne servent à rien, c'est pour ça que l'on ajoute presque toujours un style à ces éléments. Autre exemple avec un mot puis un span (et une div dans le second exemple) ayant un fond coloré et un dernier mot :
Code:
Blabla <span style="background-color:#666666;"> là c'est le span</span> blabla.

Blabla <div style="background-color:#666666;"> là c'est la div</div> blabla.

Blabla là c'est le span blabla.

Blabla
là c'est la div
blabla.


On voit bien la différence entre les deux, le span se comporte comme s'il ne se détachait pas du texte, on lui donne un style mais il reste correctement à sa place, sans saut de ligne.
La div par contre fonctionne totalement différemment, tout ce qui est contenu dans la div occupe par défaut toute la place qui lui est offerte horizontalement, c'est pour cela que le saut de ligne avant et après se fait automatiquement.

Ce dont je t'ai parlé dans mon dernier message est pour modifier le type d'un élément grâce à la propriété CSS display. Par défaut on a donc une div avec un display:block; et un span avec un display:inline;. On peut modifier le comportement d'un bloc en le transformant en élément de type en ligne, ou transformer un élément inline en block en modifiant le display: ;.
Commence par bien retenir ça div=block et span=inline, je reviendrais sur le display:inline-block; plus tard.




Ensuite pour mettre du texte à droite, à gauche, centré ou justifié, ne passe pas par des codes HTML car l'alignement du texte tiens plus du CSS.
Pour aligner un texte à droite par exemple, il faut qu'il soit contenu dans un élément de type block sinon le texte ne saura pas par rapport à quelle bord il doit s'aligner à droite. Ensuite il suffit de lui ajouter un style text-align: ;
Code:
<div style="text-align:left;"> azertyuiop</div> ← texte à gauche (valeur par défaut)
<div style="text-align:center;"> azertyuiop</div>  ← texte centré
<div style="text-align:right;"> azertyuiop</div>  ← texte à droite
<div style="text-align:justify;"> azertyuiop</div>  ← texte justifié
On obtient :
azertyuiop
azertyuiop
azertyuiop
azertyuiop


Bon, ici le justifié ne se voit pas, mais la propriété fonctionne avec plus de mots.




Citation :
Je ne comprends pas pourquoi on ne met pas l'image et le texte côte à côte tout de suite... ça donnera ça non ? Donc ce n'est pas beaucoup plus compliqué ^^

Oui oui, c'était juste pour ne pas mélanger HTML et CSS, mais on continue avec ça si tu le souhaites Smile

Je voulais les mettre à part pour que tu classes tes propriétés CSS dans ta feuille de style du panneau d'admin plutôt que directement sur la fiche : c'est pus facile de se retrouver dans un code sans style à rallonge, surtout quand c'est les autres admins qui veulent modifier quelquechose et qu'ils risquent de ne pas se retrouver dans notre manière de faire.
Et puis c'est pratique si on veut utiliser la même base de fiche sur plusieurs pages sans à avoir à tout modifier à la main dès qu'on veut du changement ( genre la fiche de présentation du forum qui est utilisée pour le règlement, pour les topics de règles de sections, pour mes corrections de smashing ... n_n)

Donc très très bien ce que tu as fait, mettre le fieldset dans la div pour avoir un rendu plus proche du résultat que tu veux obtenir était l'étape suivante dont je pensais te parler Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Ven 27 Juil 2012, 15:54

En résumé, span -> éléments en ligne - block -> éléments en colonne, si j'ai bien compris ?

Ok, div + text-align -> positionner mon texte.

Mais... Le blockquote alors... C'est mettre tous les éléments sur une colonne... Avec un décalage comme pour la citation ?

J'ai juste un doute, donc je dis ça pour qu'on parle de la même chose : La fiche que je viens de faire, c'est une fiche de pub que je posterai sur d'autres forums, donc le CSS du panneau d'admin' n'interviendra pas dessus non ? Ou c'est comme celle de GCL pour les présentation, c'est les admins qui gèrent ?

Et comment je fais pour mettre mon span au centre de la fiche ? span style=text-align:"center" ?



_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Ven 27 Juil 2012, 18:34

Citation :
En résumé, span -> éléments en ligne - block -> éléments en colonne, si j'ai bien compris ?

Oui et non, il ne faut pas voir les span comme des lignes et des div comme des colonnes, ce n'est pas comme dans un tableau. Essaie plus de voir les span comme des éléments qui s'alignent horizontalement et les div comme des éléments qui s'alignent verticalement mais qui prennent toute la place horizontale (oulà pas clair xD). Bon, finalement ta vision ligne/colonne n'est pas fausse, mais rappelle toi que la div prend toute la ligne s'il elle n'a pas de taille indiquée n_n

Citation :
Mais... Le blockquote alors... C'est mettre tous les éléments sur une colonne... Avec un décalage comme pour la citation ?
Le blockquote est normalement fait pour les citations et en effet il y a une marge à gauche pour que la citation se détache du reste. Si tu l'utilises seulement pour avoir la marge à gauche, mieux vaut passer par une div avec une marge mise grâce au CSS.

Citation :
J'ai juste un doute, donc je dis ça pour qu'on parle de la même chose : La fiche que je viens de faire, c'est une fiche de pub que je posterai sur d'autres forums, donc le CSS du panneau d'admin' n'interviendra pas dessus non ? Ou c'est comme celle de GCL pour les présentation, c'est les admins qui gèrent ?

Alors il y a deux cas : Soit tu fais sur une seule page HTML sur ton forum et tu le poste sur les autres forums à l'aide d'iframe
explication que j'ai fais sur un autre sujet:
 
Et là tu peux utiliser le code CSS du forum sur lequel tu as créé ta page. Une modification du CSS de ton forum modifiera toutes les fiches que tu auras posté sur les autres forums.

Soit tu copies-colles la fiche sur les autres forums, et en effet tu dois mettre le CSS directement dans tes postes.

Citation :
Et comment je fais pour mettre mon span au centre de la fiche ? span style=text-align:"center" ?
Si tu as une plusieurs phrases à mettre au centre utilise une div :
Code:
<div style="text-align:center;"> texte </div>

C'est la même chose que sur le forum quand on y réfléchis, quand on met un texte centré, il y aura forcément un saut à la ligne avant et après :
Code:
 1 2 3 [center]nous irons au bois[/center] 4 5 6 [right]cueillir des cerises[/right]
1 2 3
nous irons au bois
4 5 6
cueillir des cerises
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Ven 27 Juil 2012, 21:02

D'accord. Mais... Les div on peut leur mettre une taille indiquée x) Même si j'ai compris ce que tu veux dire (enfin je crois). A l'état brut, une div n'a pas de taille indiquée ^^

Ok ok Smile

Je ne vais pas me lancer dans ce truc là, tu m'as fait peur avec l'explication des signatures à onglets x) Je me contenterai de copier coller Smile

Mais... Dans ma fiche, je ferais un span avec une div à l'intérieur pour mettre le logo et le texte au centre ? C'est pas un peu compliqué ? *Maman j'ai peur !*

C'est vrai x) Et c'est bien chi*nt parfois x)


_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Ven 27 Juil 2012, 21:16

Citation :
D'accord. Mais... Les div on peut leur mettre une taille indiquée x) Même si j'ai compris ce que tu veux dire (enfin je crois). A l'état brut, une div n'a pas de taille indiquée ^^
Elle a la taille de son contenu en hauteur, et de tout l'espace qui lui est offert en largeur.

Citation :
Mais... Dans ma fiche, je ferais un span avec une div à l'intérieur pour mettre le logo et le texte au centre ? C'est pas un peu compliqué ? *Maman j'ai peur !*
Oulà j'ai rien compris ! xD
Déjà si tu dois avoir un conteneur, choisis la div et non le span.
Dans ta fiche, tu as une div, qui contient un fieldset. C'est dans le fieldset que tu mettras toutes les infos.
Comme on a vu tout à l'heure, tu as déjà l'image, puis le span avec les infos sur ton forum.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Dim 29 Juil 2012, 19:42

D'accord pour les div, j'ai compris (enfin) Very Happy

Normal, en relisant mes phrases je me rends compte que ce n'est pas toujours très clair ^^
D'accord, div pour contenir ^^
Ok, le fieldset contient les infos, donc pour gérer le texte (police, couleur, ombre...) j'écris tout ça dans la partie
avec des points virgules pour les séparer ?

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mer 01 Aoû 2012, 10:03

Alors pour les valeurs que tu mettras dans le fieldset tu pourras mettre la taille en largeur du fieldset (surtout pas de hauteur ! mieux vaut mettre une hauteur seulement si tu veux un conteneur fixe avec le texte en mode scroll), la couleur de fond, la couleur de la police principale ( le texte, pas les titres qui seront mis en couleur autrement ).... Donc dans
Code:
<fieldset style="DAAAA:badabadabada;"></fieldset>

Bon, tu préfères mettre tout le CSS que tu veux dans le fieldset et on le remplira plus tard ?

Dernier conseil, utilise la balise code car là tu as ouvert un fieldset sans le refermer, et il apparait dans ton message n_n.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mer 01 Aoû 2012, 21:25

Ok, donc on case toutes les indications dans le fieldset Smile

Je n'ai pas compris ta question x)

Ah *****. J'ai pas fait attention ^^

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Ven 03 Aoû 2012, 10:55

Je te proposais finalement de finaliser le fieldset n_n. Donc le fieldset est modifiable, mais le legend aussi Smile

Je reprends, on a pour le moment :


Horse-Wild
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.



Code:
<div style="border: 2px solid #000000; background-color: #6a5757; width: 500px; height: 200px">
<fieldset><legend>Horse-Wild</legend>
<img src="http://img850.imageshack.us/img850/9763/tempdj.jpg" alt="" style="display:inline-block;" /><span style="display:inline-block; height:60px; width:200px;">Un RPG équin avec:<br />plus de 1000 membres<br /> 143 376 messages postés<br />Et 7 ans de vie active.</span>
</fieldset>
</div>

On va modifier quelques petites choses pour que le code soit meilleur : Déjà enlever la hauteur à la div ! ( surtout que tu as oublié le petit ; à la fin de height: 200px)
On va aussi supprimer la bordure noire de la div, qui n'est pas présente sur ton exemple ( remets là si tu préfères avec hein n_n, moi je me base seulement sur l'exemple)

Horse-WildUn RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.


Code:
<div style=" background-color: #6a5757; width: 500px;"><fieldset><legend>Horse-Wild</legend><img src="http://img850.imageshack.us/img850/9763/tempdj.jpg" alt="" style="display:inline-block;" /><span style="display:inline-block; height:60px; width:200px;">Un RPG équin avec:<br />plus de 1000 membres<br /> 143 376 messages postés<br />Et 7 ans de vie active.</span></fieldset></div>

On va d'abord finir totalement l'apparence du fieldset, pour cela il faut modifier la couleur de la bordure du fieldset. Tu vas donc rajouter un style="border: XXXXXX;" dans le fieldset, ça marche ? Je te laisse remplir la valeur de la propriété border n_n.

On ajoutera par la suite les marges internes de la div conteneur, ou alors les marges externes du fieldset, c'est au choix.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Lun 06 Aoû 2012, 19:09

Je ne t'ai pas oubliée, je n'ai juste pas le temps d'étudier en profondeur ce que tu m'as envoyé ^^ Bref, je relis tout ça et te réponds soigneusement dès que possible Smile

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Lun 06 Aoû 2012, 19:15

Pas de soucis prends ton temps !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mar 07 Aoû 2012, 09:05

HORSE-WILDUn RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.


Code:

<div style=" background-color: #6a5757; width: 500px;"><fieldset style="border: bfadad;"><legend style=" font-family: Courier New; font-size: 24px; letterspacing:-1px; color: #bfadad; text-shadow: 1px 2px 2px #a29898;">HORSE-WILD</legend><img src="http://img850.imageshack.us/img850/9763/tempdj.jpg" alt="" style="display:inline-block;" /><span style="display:inline-block; height:60px; width:200px;">Un RPG équin avec:<br />plus de 1000 membres<br /> 143 376 messages postés<br />Et 7 ans de vie active.</span></fieldset></div>

Je crois que j'ai réussi à faire ce que je voulais, à part mettre le Horse-Wild au centre. A part en plaçant un center avant la div, je n'y arrive pas :s

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mar 07 Aoû 2012, 09:36

Pas mal du tout ! Very Happy

HORSE-WILDUn RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.


Tu peux jouer avec le margin-left: xx px; du legend pour le déplacer Smile Ici j'ai mis 165px; mais si par exemple on agrandi la taille du texte il faudra diminuer la valeur de la marge extérieure. J'ai essayé en %, ça peut aussi être pas mal si le fieldset est plus grand, mais vu que si la largeur augmente et pas la taille du texte, il ne sera jamais parfaitement au milieu n_n
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mar 07 Aoû 2012, 09:56

HORSE-WILDUn RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.


Donc nous avons ceci. Avec un texte pas parfaitement au milieu mais ça c'est pas grave What a Face

J'essaye pour le titre avec la méthode que tu m'as expliquée, la bordure de la div ^^

HORSE-WILD
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.




LE STAFF




Rah, je ne me souviens plus comment on fait pour le mettre à droite *Dragi' va se pendre*

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mar 07 Aoû 2012, 19:40

Donc tu propose ça ( c'est pour avoir les codes sous la main ^^')
HORSE-WILD
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.




LE STAFF



Code:
<div style=" background-color: #6a5757; width: 500px;"><fieldset style="border: bfadad;"><legend style=" font-family: Courier New; font-size: 24px; letterspacing:-1px; color: #bfadad; text-shadow: 1px 2px 2px #a29898;margin-left:165px;">HORSE-WILD</legend><br><img src="http://img850.imageshack.us/img850/9763/tempdj.jpg" alt="" style="display:inline-block;" /><span style="display:inline-block; height:60px; width:200px;">Un RPG équin avec:<br />plus de 1000 membres<br /> 143 376 messages postés<br />Et 7 ans de vie active.</span>

<br><br><div style="border-bottom:2px #3a3131 solid; text-align: center; getter-spacing: -1px; font-size: 24px; font-family:Courier New; color: #bfadad; texte-shadow: 1px 2px 2px #a29898; margin-left:100px; margin-right:100px;">LE STAFF</div>

</div>

Déjà, on va remplacer les <br> par <br />, et le letterspacing ou le getter-spacing en letter-spacing Smile
Ensuite par <fieldset style="border: bfadad;"> tu voulais faire quoi ? Mettre une bordure de couleur #bfadad ? Si oui tu as oublié le #, le solid et le x px n_n.
Pour finir c'est text-shadow et non texte-shadow Razz

On obtient :

HORSE-WILD
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.



LE STAFF
Code:
<div style=" background-color: #6a5757; width: 500px;"><fieldset style="border: #bfadad solid 1px;"><legend style=" font-family: Courier New; font-size: 24px; letter-spacing:-1px; color: #bfadad; text-shadow: 1px 2px 2px #a29898; margin-left:165px;">HORSE-WILD</legend><br /><img src="http://img850.imageshack.us/img850/9763/tempdj.jpg" alt="" style="display:inline-block;" /><span style="display:inline-block; height:60px; width:200px;">Un RPG équin avec:<br />plus de 1000 membres<br /> 143 376 messages postés<br />Et 7 ans de vie active.</span>
<br /><br /><div style="border-bottom:2px #3a3131 solid; text-align: center; letter-spacing: -1px; font-size: 24px; font-family:Courier New; color: #bfadad; text-shadow: 1px 2px 2px #a29898; margin-left:100px; margin-right:100px;">LE STAFF</div></div>

Ensuite, si tu veux l'aligner à droite t'as plusieurs possibilités:

• Tu retires les margin left et right à 100px, tu rajoutes une taille en largeur avec un width ( à priori dans ton exemple c'est vers les 275px) et rajouter un margin-left:auto;.


Code:
<div style="border-bottom:2px #3a3131 solid; text-align: center; letter-spacing: -1px; font-size: 24px; font-family:Courier New; color: #bfadad; text-shadow: 1px 2px 2px #a29898; margin-left:auto; width:275px;">LE STAFF</div>
HORSE-WILD
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.



LE STAFF



• Tu utilises la propriété float qui permet de faire flotter un élément à droite ou à gauche dans son conteneur. Donc ici on peut faire flotter le texte. Il faut par contre faire plus de sauts de lignes si tu ne veux pas avoir du texte à gauche et ton texte flottant à droite.

Code:
<div style="border-bottom:2px #3a3131 solid; text-align: center; letter-spacing: -1px; font-size: 24px; font-family:Courier New; color: #bfadad; text-shadow: 1px 2px 2px #a29898;  width:275px;float:right;">LE STAFF</div>

HORSE-WILD
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.



LE STAFF




Il y a sûrement d'autres manières de faire, mais là j'ai plus rien en tête, je te dirais ça une autre fois Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

Féminin
Nombre de messages : 4117
Age : 20
Logiciel de Création : Gimp
Date d'inscription : 07/04/2010

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mer 08 Aoû 2012, 09:59

Oulala, mais qu'est-ce que j'ai foutu hier ? O.O

Citation :
Déjà, on va remplacer les
par
, et le letterspacing ou le getter-spacing en letter-spacing Smile

Bon là, j'avoue, je ne comprends pas la différence entre les deux br et je ne savais pas qu'il fallait un tiret entre letter et spacing ^^

Citation :
Ensuite par fieldset style="border: bfadad;"> tu voulais faire quoi ? Mettre une bordure de couleur #bfadad ? Si oui tu as oublié le #, le solid et le x px n_n.
Pour finir c'est text-shadow et non texte-shadow Razz

Ensuite, c'est ce que je voulais faire, et justement, "qu'est-ce que j'ai foutu ? O.O". Oubli, inatention, et une faute purement française, je m'obstine toujours à écrire texte au lieu de text, mea culpa. ^^'
Donc oui c'est ce que je voulais faire Smile

Citation :
Tu retires les margin left et right à 100px, tu rajoutes une taille en largeur avec un width ( à priori dans ton exemple c'est vers les 275px) et rajouter un margin-left:auto;.

Je ne sais pas ce qui m'a pris mais j'ai écris à droite au lieu de à gauche (parfois je me demande si je connais ma droite et ma gauche mdr). Bref, donc je réfléchis, et je suppose que pour faire le contraire, il suffit d'inverser left & right, ce qui me donnerai ceci ?

Code:

<div style="border-bottom:2px #3a3131 solid; text-align: center; letter-spacing: -1px; font-size: 24px; font-family:Courier New; color: #bfadad; text-shadow: 1px 2px 2px #a29898; margin-right:auto; width:275px;">LE STAFF</div>

Citation :
Tu utilises la propriété float qui permet de faire flotter un élément à droite ou à gauche dans son conteneur. Donc ici on peut faire flotter le texte. Il faut par contre faire plus de sauts de lignes si tu ne veux pas avoir du texte à gauche et ton texte flottant à droite.

De faire flotter ? Je ne comprends pas x)

Petit test pour voir la retouche faite plus haut :
HORSE-WILD
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.



LE STAFF



PS : Comment je fais pour mettre l'image et le span au centre de la fiche ? What a Face

_______________________

Si quelqu'un passe par ici (en particulier La Krenouille, Ella, Matti, Fairling ou encore Ténèbres) sachez que je suis heureuse de toutes vous avoir connues et que je suis toujours nostalgique quand je passe sur GCL, ma boîte mp vous est ouverte pour rapidement prendre des nouvelles. Je vous souhaite le meilleur ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

Féminin
Nombre de messages : 4063
Age : 24
Logiciel de Création : Suite Adobe, Sketch, Suite Affinity
Date d'inscription : 19/02/2008

MessageSujet: Re: [Cours & Questions] Drag' ♥   Mer 08 Aoû 2012, 21:05

x')

Alors pour les <br> et <br /> .. Il n'y a pas de différence dans le fait qu'elles fonctionnent toutes les deux, mais c'est au niveaux des normes xhtml où <br> est considéré comme non valide et <br /> comme valide car chaque balise doit être fermée. Or la balise <br> est unique donc elle doit s'auto fermer, c'est comme la balise image en fait, où on termine par />.

Citation :
Ensuite, c'est ce que je voulais faire, et justement, "qu'est-ce que j'ai foutu ? O.O". Oubli, inatention, et une faute purement française, je m'obstine toujours à écrire texte au lieu de text, mea culpa. ^^'
Donc oui c'est ce que je voulais faire

C'est pas grave, de toutes manières quand on y pense ya pas mal de choses à retenir, donc c'est normal de faire des erreurs ( je suis la première à en faire ^^").

Citation :
Je ne sais pas ce qui m'a pris mais j'ai écris à droite au lieu de à gauche (parfois je me demande si je connais ma droite et ma gauche mdr). Bref, donc je réfléchis, et je suppose que pour faire le contraire, il suffit d'inverser left & right, ce qui me donnerai ceci ?

L'alignement à gauche est automatique, il suffit donc juste de préciser la taille de la div sans avoir de margin-right:auto;.

Citation :
De faire flotter ? Je ne comprends pas x)
Ah ! Je t'apprendrai tout ce qu'on peut faire avec float dès qu'on a fini cette fiche, tu verras les boites flottantes sont vraiment très très très pratiques, je laisse ça sous silence pour le moment *suspense !*


Enfin, pour centrer on peut mettre une div autour des deux span, et centrer son contenu. Mais une fois que la div contenant les span centre son texte, la propriété de l'alignement est héritée par le span. Si tu veux garder ton texte à gauche dans le span, il va falloir le re-préciser dans son style avec text-align:left; .

HORSE-WILD
Un RPG équin avec:
plus de 1000 membres
143 376 messages postés
Et 7 ans de vie active.



LE STAFF


Code:
<div style=" background-color: #6a5757; width: 500px;"><fieldset style="border: #bfadad solid 1px;"><legend style=" font-family: Courier New; font-size: 24px; letter-spacing:-1px; color: #bfadad; text-shadow: 1px 2px 2px #a29898; margin-left:165px;">HORSE-WILD</legend><br /><div style="text-align:center;"><img src="http://img850.imageshack.us/img850/9763/tempdj.jpg" alt="" style="display:inline-block;" /><span style="display:inline-block; height:60px; width:200px;text-align:left;">Un RPG équin avec:<br />plus de 1000 membres<br /> 143 376 messages postés<br />Et 7 ans de vie active.</span></div>
<br /><br /><div style="border-bottom:2px #3a3131 solid; text-align: center; letter-spacing: -1px; font-size: 24px; font-family:Courier New; color: #bfadad; text-shadow: 1px 2px 2px #a29898; width:275px;">LE STAFF</div></div>



Si on avait utilisé un tableau pour mettre l'image et le texte, sais-tu comment on aurait pu faire pour centrer le tableau sans utiliser de text-align:center; ?

Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: [Cours & Questions] Drag' ♥   

Revenir en haut Aller en bas
 
[Cours & Questions] Drag' ♥
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 3Aller à la page : 1, 2, 3  Suivant
 Sujets similaires
-
» Pleins de questions ...
» Bug avec QCM-drag
» Questions historique et de vocabulaire
» la vie c'comme les cours d'anglais, y'a trop d'faux amis.
» L'affichage de la carte disparaît en cours de navigation

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graphisme Cat-Life ::  :: Vieux Sujets :: Cours-
Sauter vers: