Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
Sujet: [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/
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
Et les autres aussi, ils peuvent poser des questions
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 ♫
Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
Alors bravo déjà, je savais que t'allais y arriver
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
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
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 ?
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 ^^"
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 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>
Et on les mettra à coté plus tard .
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 !
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
*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é
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 ? 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
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é ^^
Extra : Petit essai personnel pour mes questions futures :
Hum... Pas de question pour le moment, à par celles posées plus haut .
Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
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
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
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
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" ?
Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
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:
Tu vas dans ton panneau d'admin, puis dans Modules, tout en bas du menu de gauche tu auras HTML & JAVASCRIPT, tu cliques sur Gestion des pages HTML.
Sous Trier et Pages HTML tu verras ce bouton là :
Une nouvelle page se charge, tu donnes donc un titre à ta page HTML, à "Voulez-vous utiliser le haut et le bas de page de votre forum ?" tu coches "Non", puis à "Utiliser cette page en tant que page d'accueil ?" tu coches non aussi. Il me semble que les deux non sont mis par défaut.
Pour finir tu colles ton code HTML dans le grand cadre en prenant soin de bien avoir l'image suivante au dessus du cadre .
Une fois ton code collé tu cliques soit sur si tu veux prévisualiser soit sur .
Une fois validé tu reviens sur ta page Gestion des pages HTML, qui ressemblera à quelque chose du genre : Héhé ouais j'ai tout flouté
Il ne te reste plus qu'à copier l'url du lien dans ta liste des pages et à le coller dans le code de l'iframe
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
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
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
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
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)
Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
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.
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
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
Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
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.
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
Je te proposais finalement de finaliser le fieldset n_n. Donc le fieldset est modifiable, mais le legend aussi
Je reprends, on a pour le moment :
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)
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.
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
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
Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
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
Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
Tu peux jouer avec le margin-left: xx px; du legend pour le déplacer 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
Dragibus Admin Bonbon
Nombre de messages : 4117 Age : 27 Logiciel de Création : Gimp Date d'inscription : 07/04/2010
Déjà, on va remplacer les <br> par <br />, et le letterspacing ou le getter-spacing en letter-spacing 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
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;.
• 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.
Déjà, on va remplacer les par , et le letterspacing ou le getter-spacing en letter-spacing
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
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
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 ?
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 :
PS : Comment je fais pour mettre l'image et le span au centre de la fiche ?
Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
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; .
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; ?
Accueil 
![[Cours & Questions] Drag' ♥ Empty](https://2img.net/i/empty.gif)
Sujet: [Cours & Questions] Drag' ♥ 
![[Cours & Questions] Drag' ♥ Scdghj](https://2img.net/r/ihimizer/img405/730/scdghj.jpg)
![[Cours & Questions] Drag' ♥ 211015fichepub](https://2img.net/r/hpimg15/pics/211015fichepub.png)
![[Cours & Questions] Drag' ♥ Tempdj](https://2img.net/r/ihimizer/img850/9763/tempdj.jpg)
.![[Cours & Questions] Drag' ♥ Html](https://2img.net/i/fa/admin/icones/small_ico/html.png)
![[Cours & Questions] Drag' ♥ Pagehtml](https://2img.net/r/ihimizer/img804/2225/pagehtml.png)
![[Cours & Questions] Drag' ♥ Act-html](https://2img.net/i/fa/admin/icones/act-html.png)
.![[Cours & Questions] Drag' ♥ Prvisu](https://2img.net/r/ihimizer/img403/6144/prvisu.jpg)
si tu veux prévisualiser soit sur ![[Cours & Questions] Drag' ♥ Validu](https://2img.net/r/ihimizer/img23/8462/validu.jpg)
.![[Cours & Questions] Drag' ♥ Pagesw](https://2img.net/r/ihimizer/img99/9315/pagesw.jpg)