AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  ConnexionConnexion  

Partagez | 
 

 Titres de Fiches + tableau

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

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

Bonjour Smile 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)


2 • Et ceci ? (le titre en partie en dehors de la DIV - si s'en est une ^^ - )


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

_______________________

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

avatar

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

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

    N'hésite pas à fouiller dans le code donné pour trouver ce dont t'as besoin ( et si tu ne sais pas t'y retrouver dans les codes, tu surlignes la partie qui t’intéresse et tu affiches la source, le code sera lui aussi surligné). Tu peux aussi ajouter le plugin Firebug sous firefox pour voir le code source et le css associé, tu peux même le modifier pour voir les incidences que ça a en direct ( bon j'avoue dit comme ça ce n'est pas clair, mais je te conseille de tester pour voir que c'est super pratique ^^)

  • 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 Smile

  • 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.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: 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

_______________________

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

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

MessageSujet: Re: Titres de Fiches + tableau   Ven 17 Fév 2012, 17:24

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 ^^

_______________________

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

avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 13:20

    Si t'as besoin de plus d'explications je pourrais essayer de te les donner Smile

    Pour faire un tableau c'est assez simple, le tableau commence avec ‹table> et se termine avec ‹/table>.
    A l'intérieur :
    • Mettre un titre à ton tableau avec ‹caption> TON TITRE‹/caption>
    • Chaque ligne se fait grâce à ‹tr> ‹/tr>
    • Chaque cellule se fait grâce à ‹td> ‹/td>
    • Chaque cellule doit être contenue dans une ligne
    • Tu mets ton contenu entre les ‹td> ‹/td>

    Tu as donc :
    Titreuh
    Cellule 1Cellule 2Cellule 3
    Cellule 4Cellule 5Cellule 6
    Cellule 7Cellule 8Cellule 9
    Cellule 10Cellule 11Cellule 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>

    Pour une meilleure explication et plus d'infos sur les tableaux ( car là je ne t'ai dis que les bases, d'autres possibilités peuvent être intéressantes n_n) je te renvoie vers creation-du-web ou encore vers siteduzero
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 13:34

J'essaye x)




Premier tableau
Première celluleDeuxième cellule
BlablablaOups 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>


_______________________

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

avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 13:46

    Voilà t'as pigé le truc ;) Juste petit info, sur les forums il y a des sauts de lignes superflus ( la preuve entre ton "J'essaie" et ton " premier tableau"), pour ça il faut coller toutes les balises les unes à la suite des autres, c'est bien moins agréable à comprendre et à modifier, mais je ne connais pas la manière à faire pour éviter ces sauts de lignes.

    Et pour finir le plus souvent les bordures sont assez laides par défaut, tu peux les modifier voire les enlever avec un border="0" ou style="border-width:0px";
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 14:03

Je réessaye alors ^^


Premier tableau
Première celluleDeuxième cellule
BlablablaOups 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)

_______________________

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

avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 14:08

    Tadam :
    Premier tableau
    Première celluleDeuxième cellule
    BlablablaOups 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>
    Aucun saut de ligne entre les ‹tr> ‹/tr> Very Happy

    Edit: Tiens je viens de voir que le titre prend l'écriture du poste, mais pas les cellules, c'est bon à savoir x')
    Et aussi les cellules sont facilement modifiable avec un peu de CSS !



Dernière édition par Ella' le Sam 18 Fév 2012, 14:11, édité 1 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 14:09

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

_______________________

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

avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 14:11

    Tu as du faire une petite erreur quelque part ^^"
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 14:15

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

_______________________

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

avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Sam 18 Fév 2012, 14:27

    Hmm, à vrai dire je n'ai jamais du faire ça donc je ne sais pas, je vais tester, mais je pense que oui Razz


    1 2 3
    Premier tableau
    Première celluleDeuxième cellule
    BlablablaOups 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>

    Donc oui ça semble marcher
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Dim 19 Fév 2012, 10:46

Merci Smile

_______________________

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

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

MessageSujet: Re: Titres de Fiches + tableau   Ven 20 Avr 2012, 16:54


Rebekah Langr'il


Nom : Rebekah Langr'il

Age : 23 ans

Race : Humaine

Pouvoirs : Aucun

Armes : Epée & Poignards

Feat : Kat Graham



Ce qu'elle aimeCe qu'elle n'aime pasSes rêvesCe 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 ♥

_______________________

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


Dernière édition par Dragibus le Dim 22 Avr 2012, 11:14, édité 9 fois
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Ella'

avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Ven 20 Avr 2012, 18:59

    Joue avec les cellspacing="lenombrevoulu" Very Happy

    Par contre j'ai jeté un coup d'œil à ton code et ya des choses assez étranges, je te conseille de mettre la taille et la police dans le style=" dada:dalamm; ".

    Ensuite ton ‹table border="0" #000000> je trouve que c'est très bizarre, ton #000000 correspond à quoi :O ?

    Pour finir je vois tes ‹BR>, or il faut vraiment éviter de mettre des balises en majuscule, et il faut toujours les fermer ( tant qu'à faire quelque chose de propre hein n_n) soit ‹br /> What a Face
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Ven 20 Avr 2012, 20:13

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*

_______________________

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

avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Ven 20 Avr 2012, 20:29

    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 ♥
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Ven 20 Avr 2012, 20:42

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 ♥

_______________________

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

avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Ven 20 Avr 2012, 20:57

    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
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragibus
Admin Bonbon
Admin Bonbon
avatar

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

MessageSujet: Re: Titres de Fiches + tableau   Ven 20 Avr 2012, 21:29

^^
D'accord Very Happy What a Face

_______________________

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




MessageSujet: Re: Titres de Fiches + tableau   

Revenir en haut Aller en bas
 
Titres de Fiches + tableau
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

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