Je ne savais pas trop où poster ça, mais je voulais savoir s'il y avait des gens qui avaient des petits codes pratiques en CSS pour faire des fiches quelconques : mettre un fond, des couleurs, etc.
Parce que moi je suis nul de chez nul là-dedans et je voudrais faire différent un peu...

Faites place à l'artiste
Non plus sérieusement je peux t'aider si tu veux, dis moi exactement ce que tu voudrais savoir faire comme effet, et je te dirai. Et là ce serait plutôt du HTML que du CSS Mais après c'est qu'une question de vocabulaire ^^
Sinon tu as pas mal de tutoriel bien fait sur des forums style PRD truc comme ça, donc tu peux aussi aller jeter un œil là bas.

Ah mon sauveur x) Peut-être que j'aurai survécu au naufrage du Titanic si tu avais été là!!

C'est juste des petits trucs que tout le monde trouve simple sauf moi! J'ai regardé sur PRD, mais c'est des trucs tout séparés, j'ai du mal à me retrouver. Je vais en donner des exemples :

Spoiler:

Ah ouais je sais bien, mais James Cameron et moi on s'est loupés ce jour là. J'étais bloqué dans un embouteillage :/

Bon là je t'avoue que j'ai la flemme d'y réfléchir, mais demain je te fais tout un bordel pour essayer de bien t'expliquer comment tout ça fonctionne Et c'est surtout que de tête il y a certains trucs dont les codes ne me reviennent plus, faudra que je cherche tout ça. Mais dès demain tu seras une bête en code html

Gosh que ferais-je sans vous?
Merci Kimou' ça me donne une bonne base, ça va être
bien pratique Je vais essayer de bidouiller des trucs x)

Sloan j'ai hâte de voir, Cameron est nul, il aurait dû t'attendre!!

Il faut juste que je réussisse à faire un assemblage de tout ça
pour que ça ressemble à quelque chose qui ne fera pas mourir
vos pauvres yeux!

TUTORIEL #1

Kim t'a montré pas mal de code indépendants, moi je vais te montrer comment construire quelque chose plus ou moins comme ça :


Avec ma technique à moi, tu obtiens ça :

Ton titre
petit titre
Tu racontes ta vie encore en dessous.
_________________________________________________

La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala.

Code:

<center><div style="background-color:#ffffff; width: 400px; border: solid 5px #B36363;">[img]http://i45.tinypic.com/2ezpsvl.jpg[/img][font=Georgia]<font size=35px>[color=grey]Ton titre[/color]</font>
[color=#000000]petit titre[/color]
[size=10]Tu racontes ta vie encore en dessous.[/size][/font]
_________________________________________________
<div style="overflow: auto; width: 400px; height: 150px;">
[justify][color=black][size=10]La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. La vie est belle, lalalalala. [/size][/color][/justify]</div></div></center>

J'ai fait un mélange de code html un peu originaux, avec des balises à la con que tu trouves dans la fenêtre où tu postes, les trucs du type [color=...] ou [size=..]. Bref, je pense que ceux là tu les connais Sinon, voir dernières notes de mon post.
- Donc, d'abord je centre mon bordel. Je pouvais utiliser la balise simple [center] mais j'aime bien varier avec < center >. Mais au final c'est la même chose. Bon après tu peux aligner n'importe où d'autre, gauche, droite, etc etc. Mais j'aime centrer les choses ^^
- Maintenant je crée le fond blanc avec la bordure rouge/rose avec : < div style="background-color:#ffffff; width: 400px; border: solid 5px #B36363;" >. Si tu connais un peu l'anglais tu devines que "background-color" c'est pour la couleur de fond Donc là tu choisis ta couleur, soit avec des mots (black, grey, white, etc) soit avec des codes couleurs, comme là #ffffff (du blanc quoi ^^). Si tu veux des codes tu peux aller sur ce site : là. Ensuite j'ai choisi la largeur de mon fond, soit 400px vu que c'était la taille de l'image que j'avais choisi. Enfin, la bordure c'est comme Kim l'a expliqué juste avant. Je décide qu'elle sera simple avec "solid", je choisis une épaisseur de 5px, et la couleur je l'ai choisi sur le site cité précédemment. Bien sûr tu peux changer toutes les couleurs et tailles précisées en rouge.
- Là, tout connement je mets mon image Une simple balise [img]. J'aurais pu compliquer le truc avec du html, mais autant rester simple.
- J'attaque mes titres. Pour éviter d'aller à la ligne et que mon titre ne chevauche pas mon image, je colle directement la balise là : < SPAN style="FONT-FAMILY: georgia" >< font size=7 >[color=grey ]Ton titre[/color ]< /FONT >
[color=#000000 ]petit titre[/color ]
[size=10]Tu racontes ta vie encore en dessous.[/size ]< /SPAN >. Là encore une fois c'est tout con, je mets un balise [font=...] que tu trouves lorsque que tu postes une réponse basique pour mettre ma police (georgia) partout et je la ferme qu'à la fin de tous mes titres pour qu'ils aient tous cette police là. Ensuite à l'intérieur je varie les tailles à coup de "font size", et je modifie les couleurs comme je le sens. Là de toute façon tu fais ce que tu veux. La seule chose qui n'est pas une balise conne entre crochet c'est ma taille de texte parce que le [size=...] de base est limité, et moi je voulais un texte vraiment très gros
- Ensuite, je me casse pas la tête avec des codes tout nases, je trace une ligne à coup de tiret "_" x) Oui, c'est plus simple, avouons xD Sinon il fallait que j'utilise la technique de Kim mais la barre était trop épaisse, donc les tirets ça va très bien
- Maintenant, un petit dérouleur avec le même code que Kim. Soit : < div style="overflow: auto; width: 400px; height: 150px;" >. Donc en gros, tu peux y modifier la largeur et la hauteur pour décider du format de la case où les choses vont être écrites. Ensuite tu écris ta vie, tu modifies comme tu veux : police, couleur, taille, etc. Le tout en code à la con que tu trouves lorsque tu rédiges une réponse simple.
- Tu remarques que toutes les balises qu'on a commencé au début se ferme à la toute fin, tous les "div" etc etc. C'est la règle d'or en fait, dès que tu ouvres une balise, il faut la fermer. Et tu la fermes après l'endroit où tu veux qu'il soit utiliser en dernier. Par exemple, je veux que tout mon bordel soit fermé, alors j'ai fermé mon < / center > à la toute toute fin

Et voilà pour une première explication ^^ Je sais pas si c'était très clair, au pire si tu as une question il suffit de demander. Si tu veux que je développe les techniques pour faire les autres captures d'écran que tu voulais, pas de problème. Et si ma technique d'explication te convient je ferai dans le même style.

PS au cas ou : Pour toutes les balises basiques dont je parlais, les trucs pas expliqués, c'est toutes les petites cases en haut, je te les répète ici si l'idée te prend de les connaitre par cœur

Code:

Gras [b][/b] (b pour bold en anglais, si tu te posais la question ^^)
Italique [i][/i]
Souligné [u][/u] (u pour underline, vive l'anglais)
Barré [s][/s] (strike, comme au bowling xD)
Aligné à gauche/droite/center/justifié [left][right][center][justify][/left][/right][/center][justify]
Lister [list][/list] (permet surtout de décaller un texte, on s'en tape de lister des trucs en vrai xD)
Taille du texte [size=#][/size] Le # étant un chiffre/nombre compris entre 1 et 28
Police du texte  Le # étant une police proposée, il y a georgia, arial, comic sans ms, etc etc
Couleur du texte [color=#][/color] Le # étant soit une couleur en anglais ou un code, comme dit plus haut
Et il y en a pleins d'autres, suffit de regarder un peu ce qu'il y a de proposé x)

Kim A. Stenfeld a écrit:

Tu vas rire, mais je viens de comprendre ta phrase .

Faut arrêter de sniffer les échantillons de dinos du labo ma puce

Kim A. Stenfeld a écrit:

J'fais partie de ceux qui pleurent dès le début de Titanic parce qu'ils savent déjà la fin . &&' de ceux qui continuent de pleurer trois jours après avoir finis de regarder le film pour la 1000ème fois

Il doit être moins joli Jack à l'heure qu'il est, ratatiné au fond de l'eau Il vit toujours dans ton cœur voyons... Areuhm

Sloan » C'est super bien expliqué, je ne te remercierai jamais assez
Je vais m'exercer à inventer des trucs cette semaine et je vais voir s'il y a des choses
qui m'embêtent, pour tout de suite j'en ai deux :

1) Comment on fait une barre qui déroule du genre « mes qualités » là tu cliques et t'as les qualités d'énumérées en-dessous.

2) Comment on intègre le CSS? (Les côtés arrondis, etc.) C'est avec la propriété style?


MERCI

Truc qu'on verra sans dérouler
Premier machin
Deuxième machin
etc
etc
etc

Code:

<select name="wxlmenu" size="1" style="width: 210px; border: medium solid white; font-size: 11px; background: none repeat scroll 0% 0% rgb(13, 13, 13);"><option>Truc qu'on verra sans dérouler</option>
<option>Premier machin</option>
<option>Deuxième machin</option>
<option>etc</option>
<option>etc</option>
<option>etc</option>
</select>

Tu peux modifier la largeur avec le "width: #px" et tu mets la taille que tu veux. Pareil pour la bordure, tu peux modifier la border "solid" avec du dashed, etc, voir post de Kim ainsi que le couleur, tu modifies le "white" par une autre couleur ou un code. Idem pour la taille "font-size: 11px", "background" etc etc Bidouille des trucs et regarde ce que ça fait, faut être curieux ^^

Si tu veux mettre des bordures arrondies, il suffit de rajouter ça "-moz-border-radius: 10px" là où tu veux, par exemple :

Truc qu'on verra sans dérouler
Premier machin
Deuxième machin
etc
etc
etc

Code:

<select name="wxlmenu" size="1" style="width: 210px; border: medium solid white; font-size: 11px; background: none repeat scroll 0% 0% rgb(13, 13, 13); -moz-border-radius: 10px;"><option>Truc qu'on verra sans dérouler</option>
<option>Premier machin</option>
<option>Deuxième machin</option>
<option>etc</option>
<option>etc</option>
<option>etc</option>
</select>

Et tu peux le mettre où tu veux, même dans les fonds Bref, suffit d'essayer de le glisser dans n'importe quelle balise

Code:

<div style="background-color: #ffffff; -moz-border-radius: 10px;">
Bla bla bla</div>

C'est clair
Merci!!! je vois mal Léo embrasser Ed, mais tu vois ce que je veux dire

Aucune équivoque
Je t'en prie ^^ Si tu as d'autres questions, n'hésite pas. *A toujours rêvé d'être prof*

Perverse.

EDIT :

1) Comment je mets deux trucs un à côté de l'autre, par exemple la boîte de Sloan avec La vie est belle, j'aimerais en mettre 2 une à côté de l'autre, moins larges.

2) J'aimerais faire aussi comme dans ma 3e image, mettre un texte à côté d'une image =P

Je vous l'avais dit que j'étais nul x)

ton machin à droite

Code:

<table><td>[img]http://img824.imageshack.us/img824/2956/jurassic12.jpg[/img]</td>
<td>ton machin à droite</td></table>

C'est un code que tu peux bidouiller à mort, mais ce basique fonctionne très bien donc le modifie pas ^^

Et pour un texte à côté d'une image, je viens de te le montrer en fait A gauche tu mets une image, et à droite un texte ^^ Tout simplement. Ou tu peux n'importe quoi d'autre. Faut juste respecter les "table" et "td" Mais par exemple tu peux mettre le premier tuto que j'ai fait à gauche, et le même à droite. Logiquement ça marche.

Ça fonctionne
Merci, merci

De rien, de rien

Waw, j'avoue que ça va me servir beaucoup à moi aussi ! =D
Merci mes chéri(e)s !

Je t'en prie