[Cours & Questions] Drag' ♥

D'accord, j'utiliserai donc la balise qui s'auto ferme

Citation :

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

C'est vrai, j'ai tendance à l'oublier ^^ Mais je n'ai pas compris l'histoire de préciser la taille de la div ^^

Citation :

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 !*

Maieuh ! Je veux savoir moi ! *boude*

Citation :

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; ?

Alors là, aucune idée ^^

Pour la partie avec les images, si je met un lien pour qu'en cliquant dessus on se retrouve sur le profil des membres, il fonctionnera toujours en-dehors du forum ? Je me suis posé la question et maintenant j'ai le doute x).

Dragibus a écrit:: C'est vrai, j'ai tendance à l'oublier ^^ Mais je n'ai pas compris l'histoire de préciser la taille de la div ^^

Ah, ben si tu ne précises pas de largeur à ta div, elle prendra automatiquement toute la place qui lui est offerte horizontalement :

HORSE-WILD

Avec taille :

LE STAFF

Sans taille :

LE STAFF

Citation :: Maieuh ! Je veux savoir moi ! *boude*

Promis on voit ça dans peu de temps !

Citation :: Citation:
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; ?

Alors là, aucune idée ^^

le text-align:center; sert à centrer un texte dans un conteneur, mais pour centrer un conteneur on utilise la propriété margin:auto;. Voilà l'exemple :

Sans margin auto :

Blabla

Code:: <div style="background-color: #444444; width:400px;text-align:center;">Blabla</div>

Avec margin auto :

Blabla

Code:: <div style="background-color: #444444; width:400px;text-align:center;margin:auto;">Blabla</div>

Comme ça, pas besoin d'encadrer une div ( ou un tableau, peut importe la propriété reste valable pour les blocks) par un vilain <center> !

Citation :: Pour la partie avec les images, si je met un lien pour qu'en cliquant dessus on se retrouve sur le profil des membres, il fonctionnera toujours en-dehors du forum ? Je me suis posé la question et maintenant j'ai le doute x).

Bonne question ! Tout dépend de la nature du lien : relatif ou absolu.

Déjà petite explication des deux types :
• le lien absolu est celui que tu utilises tout le temps (enfin je suppose Razz

).
C'est un lien que tu définis entièrement avec un début (la racine du site, ici graphismecatlife.actifforum.com) et une fin ( par exemple ta réponse à ce message finit par /t10943p15-cours-questions-drag-9829#163180). Ce type de lien peut être posté absolument partout, il mènera forcément vers la bonne page.

• Un lien relatif n'est pas identique, on ne retrouve plus le début, mais seulement la fin. Ce type de lien peut être utile quand on créé un site.

Il permet d'aller vers une page en fonction de la position de la page sur laquelle tu es.
C'est pas simple à expliquer (en tous cas je sais que je ne suis pas très claire, je m'en excuse Neutral

)

<a href="truc/page.html"> renvoie vers la page page.html du sous-répertoire "truc" qui lui même est au même endroit que la page actuelle.

Alors que
<a href="../test.html"> renvoie vers la page test.html contenue dans le répertoire parent (qui est représenté par les points de suspension).

Ce type de rien est relatif au site et à la page que tu es en train de parcourir, si tu mets ce type de lien en dehors de ton site il ne mènera pas au bon endroit.

Donc dans ton cas, si tu penses bien à mettre le début et pas seulement /u1451 pour renvoyer à un profil, tu n'auras pas de soucis !

Tiens, petit exemple : Regarde ce code :

Code:: <a href="/u1">fondateur</a>

Si je le poste ici il envoie vers : fondateur → Palm'.
Essaie de poster ce code sur un autre forum, il renverra vers le fondateur du forum en question (enfin normalement, si le fondateur n'a pas supprimé son compte ^^").

Citation :

Ah, ben si tu ne précises pas de largeur à ta div, elle prendra automatiquement toute la place qui lui est offerte horizontalement.

Le pire c'est que je le savais x)

Citation :

Promis on voit ça dans peu de temps !

Supeeeeeeeeeeeeeeeeer !

J'ai compris pour le margin auto

Citation :

Donc dans ton cas, si tu penses bien à mettre le début et pas seulement /u1451 pour renvoyer à un profil, tu n'auras pas de soucis !

Oui, j'utilise le lien absolu

Citation :

Essaie de poster ce code sur un autre forum, il renverra vers le fondateur du forum en question (enfin normalement, si le fondateur n'a pas supprimé son compte ^^").

En effet, ça m'a emmenée sur le compte fondateur ^^

Donc nous avons ceci et j'essaye d'ajouter mes images :

Code:

<div style=" background-color: #6a5757; width: 500px;"><br/><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;float:left;">LE STAFF</div></div>

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

LE STAFF

Dexter
FondatricePerjury
Co-Admine
Poison
Co-AdmineOcëan Pearl
Co-Admine

LE CONCEPT

J'en arrive à ça :

Code:

<div style=" background-color: #6a5757; width: 500px;"><br/><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;float:left;">LE STAFF</div>

<a href="http://horse-wild.forumactif.com/u244" class="post-link"><img src="http://img15.hostingpics.net/pics/356580dexter.png/img"></a><span style="display:inline-block; height:50px; width:150px; text-align:center;">Dexter</br>Fondatrice</span><a href="http://horse-wild.forumactif.com/u2107" class="post-link"><img src="http://img15.hostingpics.net/pics/179724perju.png"></a><span style="display:inline-block; height:50px; width:150px; text-align:center;">Perjury</br>Co-Admine</span>
<a href="http://horse-wild.forumactif.com/u2358" class="post-link"><img src="http://img15.hostingpics.net/pics/809389poi.png"></a><span style="display:inline-block; height:50px; width:150px; text-align:center;">Poison</br>Co-Admine</span><a href="http://horse-wild.forumactif.com/u2334" class="post-link"><img src="http://img15.hostingpics.net/pics/906470opr.png"></a><span style="display:inline-block; height:50px; width:150px; text-align:center;">Ocëan Pearl</br>Co-Admine</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; width:275px;float:right;">LE CONCEPT</div></div>

Qu'en penses tu ?

Qu'est ce que j'en pense ? C'est parfait ! *0* T'as tout pigé, si on continue comme ça dans deux semaines je n'ai plus rien à t'apprendre ^^"
Je vois aussi que tu as testé le float Razz

Sais tu ce qu'il peut faire mis à part dans ton exemple où il permet d'aligner le texte à droite ?

Ouah.Si je m'attendais à un message si court O.O.

En tout cas je suis fière de moi Hihi, parfait x) *Saute partout*

Peut-être pas non plus x) Je pose toujours plein de questions de toute façon ^^

Bah je me suis dis que si tu me l'avais montré, ce n'était pas pour rien mdr. Pas du tout, je l'ai déjà vu dans des codes et avec toi pour déplacer mon titre mais c'est tout

EDIT : Voici la version terminée, avec le code :

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

LE STAFF

Dexter
FondatricePerjury
Co-Admine
Poison
Co-AdmineOcëan Pearl
Co-Admine

LE CONCEPT

Depuis plus de 7 ans, Horse-Wild t'offre le plaisir d'écrire les folles aventures de ton cheval. Entre haine, amour, amitié et jalousie, sa vie sera tantôt paisible, tantôt mouvementé mais sûrement ponctuée de naissances, que ce soit celles de ses enfants ou des enfants de ses amis. Attention tout de même aux combats, qui peuvent être mortels ! N'attends plus et viens nous rejoindre !

LES CREDITS

Horse-Wild, fondé par C.C (Dexter).
Logo partenariat du forum, fait par C.C
Couleurs et Codages sur forum par Léa (Perjury).
PA & Fiche de pub du forum par PxdxlF (Ocëan Pearl).

Code:

<div style=" background-color: #6a5757; width: 500px;"><br/><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;float:left;">LE STAFF</div>

<a href="http://horse-wild.forumactif.com/u244" class="post-link"><img src="http://img15.hostingpics.net/pics/356580dexter.png/img"></a><span style="display:inline-block; height:50px; width:150px; text-align:center;">Dexter</br>Fondatrice</span><a href="http://horse-wild.forumactif.com/u2107" class="post-link"><img src="http://img15.hostingpics.net/pics/179724perju.png"></a><span style="display:inline-block; height:50px; width:150px; text-align:center;">Perjury</br>Co-Admine</span>
<a href="http://horse-wild.forumactif.com/u2358" class="post-link"><img src="http://img15.hostingpics.net/pics/809389poi.png"></a><span style="display:inline-block; height:50px; width:150px; text-align:center;">Poison</br>Co-Admine</span><a href="http://horse-wild.forumactif.com/u2334" class="post-link"><img src="http://img15.hostingpics.net/pics/906470opr.png"></a><span style="display:inline-block; height:50px; width:150px; text-align:center;">Ocëan Pearl</br>Co-Admine</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; width:275px;float:right;">LE CONCEPT</div>

Depuis plus de 7 ans, Horse-Wild t'offre le plaisir d'écrire les folles aventures de ton cheval. Entre haine, amour, amitié et jalousie, sa vie sera tantôt paisible, tantôt mouvementé mais sûrement ponctuée de naissances, que ce soit celles de ses enfants ou des enfants de ses amis. Attention tout de même aux combats, qui peuvent être mortels ! N'attends plus et viens nous rejoindre :D !

<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;float:left;">LES CREDITS</div>

<a href="http://horse-wild.forumactif.com/" class="post-link">Horse-Wild</a>, fondé par C.C (Dexter).
<a href="http://img850.imageshack.us/img850/9763/tempdj.jpg" class="post-link">Logo partenariat du forum</a>, fait par C.C
Couleurs et Codages sur forum par Léa (Perjury).
PA & Fiche de pub du forum par PxdxlF (Ocëan Pearl).<br/>
</fieldset>
</div>

Des erreurs ?

Hé oui, parfois je ne fais pas de gros pavé à lire Smile

T'as bien raison ! What a Face

Alors, on va voir un peu plus en détail le float alors ;)

Le float peut prendre comme valeurs left, right et none (none est la valeur par défaut).

Quand tu as un élément flottant, le contenu qui le suit directement dans le code va se placer à coté de l'élément flottant en fonction de la place disponible. Petit exemple :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi sapien, semper eu molestie eu, tincidunt et arcu. Pellentesque rutrum vestibulum volutpat. Vestibulum nec sagittis diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisl arcu, a suscipit eros. Praesent a eros ipsum, et mattis ipsum. Donec elementum dignissim tortor quis tincidunt.

Code:: <div style="width:500px;margin:auto;"><img src="http://img841.imageshack.us/img841/8046/quoteoq.png" style="float:left; width:53px; " /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi sapien, semper eu molestie eu, tincidunt et arcu. Pellentesque rutrum vestibulum volutpat. Vestibulum nec sagittis diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisl arcu, a suscipit eros. Praesent a eros ipsum, et mattis ipsum. Donec elementum dignissim tortor quis tincidunt. </div>

Tu vois, le texte s'aligne selon les contours de l'image.
Pour empêcher qu'un bout du texte ne s'affiche pas à côté mais sous l'élément flottant il faut utiliser la propriété clear. Tu peux avoir :
• clear:none; (par défaut)
• clear:left ( renvoie à la ligne pour un élément flottant à gauche)
• clear:right ( renvoie à la ligne pour un élément flottant à droite)
• clear:both ( renvoie à la ligne pour un élément flottant qu'il soit float:left; ou float:right;)

Exemple :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi sapien, semper eu molestie eu, tincidunt et arcu. Pellentesque rutrum vestibulum volutpat. Vestibulum nec sagittis diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisl arcu, a suscipit eros. Praesent a eros ipsum, et mattis ipsum. Donec elementum dignissim tortor quis tincidunt.

Code:: <div style="width:500px;margin:auto;"><img src="http://img841.imageshack.us/img841/8046/quoteoq.png" style="float:left;" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi sapien, semper eu molestie eu, tincidunt et arcu. Pellentesque rutrum vestibulum volutpat. Vestibulum nec sagittis diam. <div style="clear:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisl arcu, a suscipit eros. Praesent a eros ipsum, et mattis ipsum. Donec elementum dignissim tortor quis tincidunt. </div></div>

Et pour info, mettre seulement le texte que tu veux faire passer sous l'élément flottant dans une div ne suffit pas pour le passer dessous. Voilà un aperçu de la seconde partie du texte avec seulement une div sans clear:left;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisi sapien, semper eu molestie eu, tincidunt et arcu. Pellentesque rutrum vestibulum volutpat. Vestibulum nec sagittis diam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel nisl arcu, a suscipit eros. Praesent a eros ipsum, et mattis ipsum. Donec elementum dignissim tortor quis tincidunt.

Et oui tu as seulement un retour à la ligne mais pas de passage sous l'image.

Voilà pour cette petite parenthèse sur les float Very Happy

Oui x)

Je pense avoir compris l'essentiel mais je dois t'avouer que j'ai un peu de mal, donc si je te repose des questions plus tard, c'est normal ^^

Désolée du dp mais j'ai retouché un truc et maintenant c'est bizarre. Ah non en fait j'ai rien dit, j'ai compris x)

HORSE-WILD

[Cours & Questions] Drag' ♥ - Page 2 Tempdj

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

LE STAFF

Dexter
Fondatrice

Perjury
Co-Admine

Poison
Co-Admine

Ocëan Pearl
Co-Admine

LE CONCEPT

Depuis plus de 7 ans, Horse-Wild t'offre le plaisir d'écrire les folles aventures de ton cheval. Entre haine, amour, amitié et jalousie, sa vie sera tantôt paisible, tantôt mouvementé mais sûrement ponctuée de naissances, que ce soit celles de ses enfants ou des enfants de ses amis. Attention tout de même aux combats, qui peuvent être mortels ! N'attends plus et viens nous rejoindre Very Happy

!

LES CREDITS

Horse-Wild, fondé par C.C (Dexter).
Logo partenariat du forum, fait par C.C
Couleurs et Codages sur forum par Léa (Perjury).
PA & Fiche de pub du forum par PxdxlF (Ocëan Pearl).

Ben c'est nickel ça ! Je te conseille juste de mettre une marge entre l'image du haut et le descriptif des membres & messages Very Happy

J'allaus justement te demander comment faire pour cette marge What a Face

Ah oui, et quel code HTML remplace justify ? Parce que c'est du BBcode il me semble, et tu m'as dis de ne pas mélanger mais je m'en sers tout le temps de justify moi x)
EDIT : text-align:justify, j'ai trouvé What a Face

Et aussi, est-ce possible de définir la couleur des liens dans ma div ?

Et bien, en général, comment fais tu pour mettre des marges ? Tu utilises soit les marges extérieures (margin) ou les marges intérieures (padding).
Ici peut importe si tu utilises les marges intérieures ou extérieures étant donné que tu n'as pas de soucis visuel au niveau d'un fond coloré ou encore d'une bordure qui devrait ou non être collée au texte.

Donc là, soit tu mets une marge à droite de l'image (margin-right:5px;) soit tu mets une marge à gauche du petit texte (margin-left:5px; ou padding-left:5px;).
Tu peux aussi te prendre la tête en en mettant à droite de l'image (margin-right:3px;) ET à gauche du texte (margin-left:2px;) mais ça ne sert vraiment à rien x')

Citation :: Ah oui, et quel code HTML remplace justify ? Parce que c'est du BBcode il me semble, et tu m'as dis de ne pas mélanger mais je m'en sers tout le temps de justify moi x)
EDIT : text-align:justify, j'ai trouvé

Bien joué c'est bien ça Smile

Citation :: Et aussi, est-ce possible de définir la couleur des liens dans ma div ?

Ouaip ! Tout est toujours modifiable.
Le mieux quand même pour les liens est de passer par des feuilles de style pour pouvoir aussi gérer les liens quand la souris est dessus ( connais tu la pseudo classe :hover ?).

Ici tu as peu de liens donc au pire ce n'est pas difficile d'entrer un style à chaque lien, mais c'est assez ch*** quand tu en as plus que deux.
Ici il te suffit d'entrer les informations directement dans la balise <a href="tonlien.html" style="color:#006699;"> blabla </a>

*Dragibus se cache* Je le savais en plus x)

Citation :

Le mieux quand même pour les liens est de passer par des feuilles de style pour pouvoir aussi gérer les liens quand la souris est dessus ( connais tu la pseudo classe :hover ?).

Non je ne connais pas la pseudo classe :hover ^^

D'accord, j'ai compris pour le lien

Sujet: Re: [Cours & Questions] Drag' ♥ Dim 09 Sep 2012, 10:09

Héhé... Me revoilà pour me rappeler à ton bon souvenir et pour poser de nouvelles questions What a Face

Sans vouloir faire de pub, voici la PA dont je te parlais l'autre fois :
http://jugement-dernier.forumgratuit.org/
J'ai utilisé beaucoup de span ^^

Et ma question :
Dans le code de la fiche de présentation -

Code:: <div class="fiche"><div class="fiche_img">«Votre Prénom»
Alias «Votre pseudo»</div>
<h1>▬ PUF :</h1> Écrire ici.

C'est quoi ce h1 ?

Sujet: Re: [Cours & Questions] Drag' ♥ Mar 11 Sep 2012, 17:53

Me revoici, me revoilà, désolé pour cette looongue attente Neutral

Alors, pour le :hover : C'est une pseudo classe très utilisée, elle permet de changer les propriétés quand ton curseur passe sur l'élément.

L'exemple que je peux te donner est la "boite d'alerte" que tu as comme moi dans ta signature n_n :

genre là passe ta souris, le background-color a une valeur différente ;)

Code:: <div class="warning" style="line-height:30px; text-align:center;margin-bottom:20px;"> genre là passe ta souris, le background-color a une valeur différente ;)</div>

Et pour CSS :

Code:: /* affichage div alerte */
.warning {
background: url("http://img201.imageshack.us/img201/9653/attentionr.png") no-repeat 3px 3px;
background-color: #FFA4A3;
border-top: 1px solid #EA2E00;
border-right: 1px solid #EA2E00;
border-bottom: 1px solid #EA2E00;
border-left: 3px solid #EA2E00;
box-shadow: 0 0 5px #000000;
color: #EA2E00;
font-family: Verdana,Geneva,sans-serif;
font-size: 10px;
margin: 5px auto;
min-height: 32px !important;
padding: 5px 5px 5px 50px;
width: 80%;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}

.warning:hover {
background-color:#FFC1C1;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}

Tu peux aussi voir l'effet du hover sur la PA actuelle, c'est utilisé pour les "pages" de gaucheet droite qui se déroulent, mais aussi pour les textes et le background-color foncé quand tu passes ta souris sur les images des clans et du membre du mois, pour la taille des images des partenaires qui changent au passage de la souris, de la création du mois qui change d'opacité et de taille lorque tu y places ton curseur ... Toutes ces choses sont faites grâce à hoover.

Par contre, la seule chose embettante sur un forum, c'est qu'il faut passer forcément par une feuille de style externe (enfin CSS du forum suffit), mais tu ne peux pas l'appliquer avec l'attribut style="".

-------------------

Très joli forum n_n Jolie PA aussi ! Mais tu as utilisé beaucoup de <br /> ! Pense à plutôt utiliser des margin-bottom ou margin-top plutôt que d'utiliser des sauts de lignes n_n
Et très bien pour les span en inline-block *fière de son élève*.

Alors les <h1>, <h2>, <h3> .... Sont utilisés pour tout ce qui est titre. Le <h1> correspond à un titre de niveau 1. C'est ton plus gros titre possible. Par défaut si tu l'utilises sans CSS il sera mis en gras, taille 32px et avec des marges top et bottom d'une vingtaine de px il me semble.

Tu as ensuite <h2>, pour faire un titre moins important, comme si c'était un sous titre de <h1> en fait..

Tu peux aller jusqu'à h6 je crois, mais évite de dépasser les h3 / h4, il me semble que la taille h4 correspond à la taille normale de ta police mais juste mis en gras.

Tu peux bien entendu modifier ces titres avec le CSS, mais sans ajouter ni . ni # devant, c'est directement

Code:: h1 {
propriété1:valeur1;
propriété2:valeur2;
}
h2 {
propriété1:valeur1;
propriété2:valeur2;
}

...

Sujet: Re: [Cours & Questions] Drag' ♥ Mer 12 Sep 2012, 13:58

Ça se corse dis donc ! J'ai pas tout compris ^^'. Bon allez je me lance.

Le hover tu t'en sers dans le CSS/les feuilles de style sur les forums c'est ça ? C'est pour ça que je ne le vois pas dans le code hver de la boite d'alerte ?

Citation :: Très joli forum n_n Jolie PA aussi ! Mais tu as utilisé beaucoup de
! Pense à plutôt utiliser des margin-bottom ou margin-top plutôt que d'utiliser des sauts de lignes n_n

Merci à Pandora pour le design', et merci pour la PA ^^ Oui j'en ai utilisé beaucoup. Comment t'as deviné ? O.O. Et c'est quoi margin-bottom/top ?

Donc si j'utilise les h... ici, ça va modifier mon texte ?

Bouh

Ah oui en effet. Mais là ça ne fait que mettre en gras... Je ne comprends pas tout x).

Citation :: Tu peux bien entendu modifier ces titres avec le CSS

Tu me fais peur dès que tu me parles de CSS What a Face

EDIT : Je suis fière de moi :

PRENOMS & NOM

Citation & Nom de l'auteur
INFORMATIONS DE BASE :
Age :Sexe :
Date de Naissance :Nationalité :
Parents :Frères & Soeurs ?


HISTOIRE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.


PHYSIQUE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.
PSYCHOLOGIE
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.


DERRIERE L'ECRAN :
Surnom :PUF :
Age :Un p'tit mot ? :


Codage par PxdxlF

Code:: <div style="border-top: 10px solid #c65e56; border-bottom: 10px solid #c65e56; border-right: 1px solid #c65e56; border-left: 1px solid #c65e56; border-radius: 5px; background-color: #e5e5b5; width: 500px; font-family: Courier New; text-align: justify; color: #c65e56; padding:5px;"><center><img src="http://img11.hostingpics.net/pics/512649loveislight.png" alt=""/></center><br/><div style="font-size: 24pt; text-align:center;">PRENOMS & NOM</div><br/><div style="font-size: 9pt; position:relative; top:-20px; text-align:center;">Citation & Nom de l'auteur</div><fieldset style="border: 1px #c65e56 dotted; margin-top: 15px;"><legend><div style="font-size:14pt; margin-top:5px;">INFORMATIONS DE BASE :</div></legend><table border="0"; cellspacing="50"><tr><td>Age :</td><td>Sexe :</td></tr><tr><td>Date de Naissance :</td><td>Nationalité :</td></tr><tr><td>Parents :</td><td>Frères & Soeurs ?</td></table></fieldset>

<span style="display:inline-block; height:300px; width:150px; margin-right:20px; margin-left:25px; margin-bottom:20px;"><img src="http://img11.hostingpics.net/pics/725516loveislightvava.png" alt""/></span><span style="display:inline-block; height:300px; width:250px; margin-right:10px; margin-left:20px; margin-bottom:20px;"><div style="font-size:14pt; margin-top:5px; margin-bottom: 5px; margin-left: 5px;">HISTOIRE</div><div style="border: 0px; height:280px; width:250px; font-family:Courier New; overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.</div></span>

<span style="display:inline-block; height:250px; width:200px; margin-right:20px; margin-left:25px; margin-bottom:50px;"><div style="font-size:14pt; margin-top:5px; margin-bottom: 5px; margin-left: 5px;">CARACTERE</div><div style="border: 0px; height:250px; width:200px; font-family:Courier New; overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.</div></span><span style="display:inline-block; height:250px; width:200px; margin-right:10px; margin-left:20px; margin-bottom:50px;"><div style="font-size:14pt; margin-top:5px; margin-bottom: 5px; margin-left: 5px;">PSYCHOLOGIE</div><div style="border: 0px; height:250px; width:200px; font-family:Courier New; overflow:auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.</div></span>

<fieldset style="border: 1px #c65e56 dotted;"><legend><div style="font-size:14pt; margin-top:5px; margin-bottom: 5px;">DERRIERE L'ECRAN :</div></legend><table border="0"; cellspacing="50"><tr><td>Surnom :</td><td>PUF :</td></tr><tr><td>Age :</td><td>Un p'tit mot ? :</td></tr></table></fieldset>

<div style="font-size:7pt; text-align:right;">Codage par PxdxlF</div>
</div>

Comment fait-on pour centrer la div dans le message ?

Sujet: Re: [Cours & Questions] Drag' ♥ Jeu 27 Sep 2012, 09:33

Citation :: Le hover tu t'en sers dans le CSS/les feuilles de style sur les forums c'est ça ? C'est pour ça que je ne le vois pas dans le code hver de la boite d'alerte ?

Oui, seulement grâce à une feuille de style. Je n'ai par contre pas compris la deuxième phrase, tu voulais voir le code :hover ? Si c'est le cas je l'ai mis dans mon poste précédent, ou tu y as accès avec le panneau d'admins Razz

Citation :: Oui j'en ai utilisé beaucoup. Comment t'as deviné ? O.O. Et c'est quoi margin-bottom/top ?

Héhé je sais tout ! Cool

Non, j'ai juste regardé le code source de ta PA Smile

Le margin est tout ce qui concerne les marges extérieures. Ici quand je t'ai parlé de margin-top ou margin-bottom c'est la marge du haut et la marge du bas.

Voilà un petit schéma des margin (et j'ai aussi mis le padding - marges intérieures, et le border)

[Cours & Questions] Drag' ♥ - Page 2 Marginpadding

Ce qui est en bleuté c'est tes marges extérieures à ta boite (margin), tu as ensuite les marges intérieures (padding) et la bordure de la boite entre les deux.

Citation :: Donc si j'utilise les h... ici, ça va modifier mon texte ?
Bouh
Ah oui en effet. Mais là ça ne fait que mettre en gras... Je ne comprends pas tout x).

C'est normal, faire des tests sur Forumactif n'est pas toujours la bonne solution étant donné que pas mal de choses ont déjà des propriétés CSS à cause de forumactif. Si tu veux vraiment tester ça correctement, tu peux essayer de faire une page web avec les différents titres et de l'ouvrir avec ton navigateur (genre tu te créés une page test.html que tu ouvres, pas besoin de l'héberger c'est juste pour faire un petit test n_n)

Citation :: Tu me fais peur dès que tu me parles de CSS

Mais non tu sais très bien te débrouiller avec le CSS, ne t'en fais pas Smile

Pour finir ta fiche est top ! Je te conseille juste d'éviter la balise <center>, mieux vaut passer directement par le CSS pour centrer les choses Smile

Sujet: Re: [Cours & Questions] Drag' ♥ Jeu 27 Sep 2012, 16:34

Citation :

Je n'ai par contre pas compris la deuxième phrase, tu voulais voir le code :hover ? Si c'est le cas je l'ai mis dans mon poste précédent, ou tu y as accès avec le panneau d'admins

Je t'expliquerai bien ce que je voulais dire mais je ne m'en souviens plus x).

Entre temps j'ai fais quelques tests et j'ai compris pour le margin

Citation :

C'est normal, faire des tests sur Forumactif n'est pas toujours la bonne solution étant donné que pas mal de choses ont déjà des propriétés CSS à cause de forumactif. Si tu veux vraiment tester ça correctement, tu peux essayer de faire une page web avec les différents titres et de l'ouvrir avec ton navigateur (genre tu te créés une page test.html que tu ouvres, pas besoin de l'héberger c'est juste pour faire un petit test n_n)

Essayer de faire une page web O.O.

Citation :

Mais non tu sais très bien te débrouiller avec le CSS, ne t'en fais pas

Ah ah Ella si tu savais... Quand tu me dis CSS je m'imagine la feuille de style CSS du forum et j'envisage de ne jamais y toucher. Je ne peux même pas te dire que je sais ce que c'est parce que je n'ai qu'une vague idée ^^. C'est pour ça que ça me fait peur mdr.

Citation :

Pour finir ta fiche est top ! Je te conseille juste d'éviter la balise , mieux vaut passer directement par le CSS pour centrer les choses

Nous en revenons toujours au CSS x). Je sais qu'il faut l'éviter mais je ne savais pas comment faire pour centrer. D'ailleurs je ne sais toujours pas comment faire à part avec une div ^^.

Sujet: Re: [Cours & Questions] Drag' ♥ Sam 29 Sep 2012, 15:29

Dragibus a écrit:: Entre temps j'ai fais quelques tests et j'ai compris pour le margin

Nickel michel Very Happy

Citation :: Essayer de faire une page web O.O.

Ahah, ça te fait si peur ? C'est pas grand chose hein n_n

Citation :: Ah ah Ella si tu savais... Quand tu me dis CSS je m'imagine la feuille de style CSS du forum et j'envisage de ne jamais y toucher. Je ne peux même pas te dire que je sais ce que c'est parce que je n'ai qu'une vague idée ^^. C'est pour ça que ça me fait peur mdr.

Woof, c'est long, ya beaucoup de propriété, mais rien de compliqué, c'est juste long à faire Smile

Le CSS tu l'utilises à chacune de tes fiches !
Tiens, regarde la dernière fiche que tu as faite, sans les propriétés CSS voilà le résultat :

Spoiler:

[Cours & Questions] Drag' ♥ - Page 2 512649loveislight

PRENOMS & NOM

Citation & Nom de l'auteur

INFORMATIONS DE BASE :

Age :	Sexe :
Date de Naissance :	Nationalité :
Parents :	Frères & Soeurs ?

HISTOIRE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.

CARACTERE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.

PSYCHOLOGIE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis tristique ac, congue ac libero. Vestibulum imperdiesum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis. Integer Duis at risus ipsum, fringilla lacinia enim. Quisque leo ante, ornare iaculis trissum dolor sit amet, consectetur adipiscing elit. Sed euismod pretium dolor sed sagittis.

DERRIERE L'ECRAN :

Surnom :	PUF :
Age :	Un p'tit mot ? :

Codage par PxdxlF

Pas terrible niveau esthétique hein ? Normal, il ne reste que le contenu ! Plus de mise en forme, plus de couleurs ... Rien de joli Razz

Sujet: Re: [Cours & Questions] Drag' ♥ Sam 29 Sep 2012, 15:35

Tu sais Ella, faire la différence entre une page web et un forum c'est déjà dur pour moi. Tiens en parlant de pages et du forum, je me suis posé une question ce matin, peut-être que tu peux me répondre :
Les blogs (skyrock et autres), si on met un codage HTML/CSS dedans, il apparait comme sur un forum ou tel quel, c'est à dire des lignes de codes ?

Impressionnant. J'utilisais du CSS sans le savoir x).

Et la PA du forum... Tu la codes à la main ou via Notepad et Photoshop ?

Sujet: Re: [Cours & Questions] Drag' ♥ Sam 29 Sep 2012, 15:46

Citation :: Tiens en parlant de pages et du forum, je me suis posé une question ce matin, peut-être que tu peux me répondre :
Les blogs (skyrock et autres), si on met un codage HTML/CSS dedans, il apparait comme sur un forum ou tel quel, c'est à dire des lignes de codes ?

Tout dépend si la plateforme du blog te permet d'écrire en HTML ou non :/ Généralement, il me semble que le CSS complet du blog n'est pas modifiable mais que tu peux écrire des articles avec du HTML. Enfin, n'ayant jamais eu de blog je peux pas trop te renseigner, le mieux est de tester Razz

Citation :: Et la PA du forum... Tu la codes à la main ou via Notepad et Photoshop ?

La PA actuelle est entièrement faite à la main ! Avec Toshop, on peut seulement faire des découpages web en tableau, là la PA n'est pas du tout constituée de tableaux n_n

Sujet: Re: [Cours & Questions] Drag' ♥ Sam 29 Sep 2012, 15:51

Je testerai quand je ferais un blog alors x). Merci quand même Smile

.

D'accooooooooooooooooooord Smile

Et Wahou x).

Sujet: Re: [Cours & Questions] Drag' ♥ Sam 29 Sep 2012, 15:58

Alors, tu veux voir quoi maintenant ? Des choses que tu voudrais tester ? Des questions ? Smile

Sujet: Re: [Cours & Questions] Drag' ♥ Sam 29 Sep 2012, 16:00

Pour le moment je n'ai pas de questions. Je ne sais pas quoi tester. Je ne sais pas quoi faire. En fait, tout ce que je veux tester je peux tester toute seule donc je ne te demande plus. Et je ne sais pas ce que je peux encore apprendre donc que peux tu m'apprendre ? What a Face

Sujet: Re: [Cours & Questions] Drag' ♥ Sam 29 Sep 2012, 16:11

On va voir les feuilles de style vu que ça semble te faire peur What a Face

. On pourra voir les sélecteurs css Razz

Que sais-tu sur les feuilles de styles ? ;)

Sujet: Re: [Cours & Questions] Drag' ♥ Sam 29 Sep 2012, 16:46

*se sauve en courant*

Je sais qu'on les trouve dans le panneau d'administration, onglet affichage, partie gestion des couleurs, onglet feuille de style CSS. On peut en faire plusieurs il me semble. Elles servent à gérer l'apparence du forum (police d'écriture, couleurs, images, apparence de la PA...). C'est aussi dans ces lignes de codes que l'on peut modifier le nom de la chatbox, installer un QEEL et autres onglets qui sortent du côté de l'écran.

Euh... Rien d'autre ne me vient là x). Alors, j'ai quelle note ? *sors*

» Oppi - CS5 ♥ - Cours :)
» ♥ ~ Merci ~ ♥
» Quelques petites questions
» - Ely ♥
» What about this? ♥