Titres de Fiches + tableau

Sujet: Titres de Fiches + tableau Ven 20 Jan 2012, 08:13

Bonjour

J'ai récement décidé de me lancer dans le HTML et le CSS et pour cela j'ai utilisé un tuto qui permet de faire des DIV. Après quelques essais, j'ai réussi à en faire une, puis plusieurs, les unes dans les autres. Mais je ne sais faire que ça, en plus d'une mise en page très basique des textes. Alors je pose des questions pour m'améliorer, dans le but de faire de petites fiches, comme celles qu'Ella nous propose sur GCL.

1 • Comment faire ceci ? (la barre sous le titre)
Titres de Fiches + tableau 917425question1

Titres de Fiches + tableau 917425question1

2 • Et ceci ? (le titre en partie en dehors de la DIV - si s'en est une ^^ - )
Titres de Fiches + tableau 796713question2

3 • Et enfin, comment met-on deux DIV (encore une fois si s'en est ) côte à côte comme dans la fiche 2 d'Ella ?

Voilà, merci d'avance ;)

Sujet: Re: Titres de Fiches + tableau Ven 20 Jan 2012, 19:24

Donc pour le 1 :
♠ titre #1
un petit sous titre ici =).

le code est le suivant :

Code:

<div style="border-bottom:3px #dfc0c0 solid; text-align: left; font-weight; bold; font-family: georgia; letter-spacing: -1px; font-size: 23px; color: #8b0000; font-variant:small-caps; margin-left:10px; margin-right:10px; padding-bottom:-10px;">♠ titre #1</div><div style="text-align: left; position: relative; font-family: georgia; letter-spacing: -1px; font-size: 13px; color: rgb(121, 138, 153); font-variant: small-caps; margin-left: 30px; top: -8px;">un petit sous titre ici =).</div>

Ce qui t'intéresse ici est le ‹div style="border-bottom:3px #dfc0c0 solid;">‹/div> tout simplement une bordure du bas à ta div
Pour le deux

Nom & Prenoms

Soit

Code:

<div style="width:270px;background-color:#b7c9d0; border: 3px solid #7b888e; height:50px; -moz-border-radius: 15px; border-radius: 15px;"><div style=" text-align:center; color: #34464f; font-family: Georgia,Arial; font-size:32px;letter-spacing:-4px; position:relative; top:-15px;">Nom & Prenoms</div></div>

La structure importante pour l'effet de chevauchement de texte est celle ci :

TEXTE

Soit:

Code:

<div style="width:50px; background:#000000; height:30px;"></div><div style="position:relative; top:-40px; ">[color=darkred][b]TEXTE[/b][/color]</div>

Tu as donc juste à placer un position:relative; et changer les positions de "Left" "Right" "Top" et "Bottom".

Voilà comment était composé le code de base, par contre après coup je ne pense pas que ça soit la meilleure façon de faire car ça créée un décalage sous le texte, et il faut faire du bidouillage après...

Mais bon, là sur l'instant mis à part jouer avec des "float" je ne saurais pas trop comment faire, et encore, ça n'est peut être pas la meilleure solution (si quelqu'un a une autre idée, je suis preneuse aussi ^^")
Très simplement, tu crées un tableau à 1 ligne et deux colonnes, il te suffit de soit placer tes div à l’intérieur, soit modifier l'apparence des cellules directement sans créer de div. Tu as aussi la possibilité de faire la même chose toujours avec des floats ^^

Edit: à la vue de tes screen tu n'as pas firefox, je me trompe ? ( ou alors une très très très vielle version ? :0)
Si je ne me trompe pas, je te conseilles de "jeter" internet explorer à la poubelle vraiment :X IE n'est vraiment pas à jour au niveau des dernières nouveautés du CSS3.
Par exemple sur ton screen, les bords de la div pour la seconde question sont carrés au lieu d'être courbés ( le rendu est quand même bien plus esthétique), IE ne gère pas encore les codes border-radius:Xpx; alors que Firefox, Chrome, Safari, et d'autres navigateurs sont à jour. IE ne gère pas non plus les transitions en CSS3...
Toutes ces jolies choses qui sont invisible aux yeux des utilisateurs de IE, c'est un gâchis x')
Je te conseille vraiment d'opter pour Firefox ( ou autre comme chrome safari opéra ou d'autres navigateurs un peu plus à jour ^^') si tu veux profiter pleinement des possibilités des css.

Sujet: Re: Titres de Fiches + tableau Sam 21 Jan 2012, 20:21

J'ai pas tout compris mais il est tard alors on ne dira rien x) Non je n'ai pas firefow, mais l'ordi n'est pas à moi donc je vais attendre d'avoir le mien pour changer tout ça^^
Merci pour ces explications Smile

Bon, j'ai relu tout ça très attentivement, et je pense réussir à gérer à peu près ^^
Par contre, je ne sais pas faire un tableau :S

Et je n'ai pas firefox ^^

‹caption> TON TITRE‹/caption>

‹tr> ‹/tr>

‹td> ‹/td>

Tu as donc :

Titreuh
Cellule 1	Cellule 2	Cellule 3
Cellule 4	Cellule 5	Cellule 6
Cellule 7	Cellule 8	Cellule 9
Cellule 10	Cellule 11	Cellule 12

Code:: <table border="1">
<caption>Titreuh</caption>
<tr><td>Cellule 1</td><td>Cellule 2</td><td>Cellule 3</td></tr>
<tr><td>Cellule 4</td><td>Cellule 5</td><td>Cellule 6</td></tr>
<tr><td>Cellule 7</td><td>Cellule 8</td><td>Cellule 9</td></tr>
<tr><td>Cellule 10</td><td>Cellule 11</td><td>Cellule 12</td></tr>
</table>

( car là je ne t'ai dis que les bases, d'autres possibilités peuvent être intéressantes n_n)

creation-du-web

siteduzero

J'essaye x)

Premier tableau
Première cellule	Deuxième cellule
Blablabla	Oups là là

Code:: <table border="2"><caption>Premier tableau</caption>
<tr><td>Première cellule</td><td>Deuxième cellule</td></tr>
<tr><td>Blablabla</td><td>Oups là là</td></tr>
</table>

border="0"

style="border-width:0px";

Je réessaye alors ^^

Premier tableau
Première cellule	Deuxième cellule
Blablabla	Oups là là

J'ai raté un truc là x)
J'édite dans quelques minutes

EDIT : Quand je met avec une bordure de 0, il n'y a plus de tableau x)

Premier tableau
Première cellule	Deuxième cellule
Blablabla	Oups là là

Code:: <table border="0"><caption>Premier tableau</caption><tr><td>Première cellule</td><td>Deuxième cellule</td></tr><tr><td>Blablabla</td><td>Oups là là</td></tr></table>

‹tr> ‹/tr>

Pourquoi quand j'ai fait exactement la même chose ça n'a pas marché ? x)

Tu as du faire une petite erreur quelque part ^^"

Sûrement ^^
Quand tu ajoutes un tableau dans une DIV, le fond du tableau est celui de la DIV ?

1 2 3

Premier tableau
Première cellule	Deuxième cellule
Blablabla	Oups là là

Code:: <div style="background: url(http://sd-2.archive-host.com/membres/images/134568121656250658/background.png) repeat; width:250px; color:#FFFFFF; margin:auto;">
1 2 3
<table border="0"><caption>Premier tableau</caption><tr><td>Première cellule</td><td>Deuxième cellule</td></tr><tr><td>Blablabla</td><td>Oups là là</td></tr></table>
</div>

Merci

Rebekah Langr'il

Titres de Fiches + tableau 295538katgrahamvava

Nom : Rebekah Langr'il

Age : 23 ans

Race : Humaine

Pouvoirs : Aucun

Armes : Epée & Poignards

Feat : Kat Graham

Ce qu'elle aime	Ce qu'elle n'aime pas	Ses rêves	Ce qui lui fait peur
- Les bonnes bagarres	- Etre blessée	- Devenir une guerrière reconnue et célèbre	- Mourir
- Les boissons alcoolisées	- Les lâches	- Posséder l'épée de lumière	- La perte de sa famille

Ellaaaaaaaaaaaaaaaaaaaa ! Je testais quelques codes mais il m'en manque un x) Quel est le code pour définir un écart, en px, entre les cellules d'un tableau ? Parce que Ce qu'elle aime et Ce qu'elle n'aime pas sont collés là, or je voudrais mettre un espace entre les deux ^^ J'espère que tu pourras m'aider ♥

cellspacing="lenombrevoulu"

style=" dada:dalamm; "

‹table border="0" #000000>

‹BR>

‹br />

C'est tellement logique que j'y avais pas pensé. Pourtant j'ai déjà vu ce code ^^ Merci Smile

Le style je le glisse dans quel code ? Celui de la div ?

#000000 c'était la couleur du cadre du tableau, j'ai oublié de l'enlever quand j'ai enlevé la bordure ^^ Un code inutile en somme What a Face

D'accord Maitre Ella *s'incline* ça te dis de me donner des cours de CSS et HTML ? *sors*

Le style, style=" dada:dalamm; " ? Si tu parles de celui là en effet met ça dans style="border-bottom:3px #da2727 solid;", avec font-family:vivaldi; font-size:24px; Smile

.

Pour la couleur de la bordure, il aurait fallu la mettre sous style="border-color:#000000;" pour faire un truc propre aussi n_n.

Ah non personne ne s'incline devant moi, hors de question ! Razz

Ben des cours je ne suis pas sûre de réussir à en donner des corrects xD Je suis pas très douée pour expliquer les choses clairement, mais je suis là pour toutes les questions que t'as ça pas de soucis ♥

Bon, j'ai amélioré tout ça, ça doit être un peu mieux ;)

D'accord, j'essaye de m'en souvenir pour la prochaine fois Smile

Moi je comprends ce que tu m'expliques donc bon ^^ Merci ♥

Youpi ! Je suis contente, je sais expliquer \0/
Hésite pas à me poser toutes les questions qui te passent par la tête, j'essaierai d'y répondre :3

^^
D'accord Very Happy