AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez| .

Pour une jolie mise en page !

Voir le sujet précédent Voir le sujet suivant Aller en bas
Invité
Invité
MessagePour une jolie mise en page !- posté le Lun 12 Aoû - 12:41

Salut ! C'est encore moi, le lapin crétin nul en codage :D !
Catégorie : Codage (ouais ouais encore !)
Tutoriel : Je chercherais à faire une belle mise en page.
Je voulais faire un beau petit post sur mes relations à Rayen mais je me suis vite rendu compte que, certes je pouvait faire un post, mais il ne sera jamais beau. C'est pour cela que j'aimerais bien savoir comment mettre un peu de couleur dans le fond, des polices différentes, les vignettes qui défilent, enfin des trucs faciles et pas moche pour attirer l’œil quoi.
Parce que pour l'instant, toutce que je sais faire, c'est changer la couleur et la taille d'une police (ToT) Et mettre un lien dans un écriture !! (merci Ariale ^o^)

Voilà, merci à celui ou celle qui aura la patience de m'expliquer tout ça ♫ !
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Lun 12 Aoû - 12:59

je te rédige ça coco!
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Lun 12 Aoû - 13:31

Oui ! Oui ! Oui !!!! Merci beaucoup Acedia :DD
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Lun 12 Aoû - 15:32

x


Dernière édition par Acedia Kuro le Ven 23 Mai - 20:03, édité 1 fois
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Lun 12 Aoû - 17:13

Waouuuuuu !!! Merci beaucoup :D

Merci :D, c'est trop trop bien !!!! J'ai juste mis à peu près 20 minutes à faire ce message mais ça en vaut le coup ! Et les personnes qui utilise ces codages les connaissent par coeur ?! Vraiment, merci beaucoup !
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Lun 12 Aoû - 18:22

Courage, pour la rapidité, ça va venir XD
Eh bien pour ma part oui, je les connais pas coeur, et je suppose que c'est le cas de beaucoup de codeurs :)
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Mer 14 Aoû - 20:08

Waou, ça fait un paquet de trucs à retenir. Chapeau ! Moi, pour la fiche de relations que je suis en train de créer, j'ouvre cette page et ça fait 3 jours que je suis dessus xD.
J'ai encore une dernière petite question (je sais je suis chiante). Bref, comment peut on mettre une image et du texte côte à côte ? J'ajoute une image dans notre post, très bien, mais la en voulant écrire, je m'aperçois que mon texte ce met automatiquement sous mon image alors qu'elle prend même pas la moitié de la page. Est ce qu'il y a un codage spécial à écrire ou quelque chose dans le genre ?
Même question pour mettre 2 boîtes à côté.
Merci :D
Revenir en haut Aller en bas
Shimeku Nagashi
Club d'Arts Martiaux
Féminin Messages : 1231
Date de naissance : 03/02/1996
Date d'inscription : 02/07/2013
Âge : 21

Carte d'identité
Année scolaire: 2ème année
Dortoir & numéro de chambre: Dortoir A - Chambre n°01
Colocataires: Lewin Rainer, Haku Miyake & Dave Saddler
avatar
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 6:56

Au début c'est tout à fait normal de pas savoir ces trucs par coeur! Mais ça va finir par te rentrer dans la tête à force :3

Pour ce que tu demandes, c'est un tableau.

Spoiler:
 

Comme Acedia a si bien dit dans son post, ça s'ouvre et ça se ferme. xD

Code:
<table> tralala </table>
Je vais expliquer les tr et les td.

Si je ne me trompe pas, les tr correspondent à une rangée horizontale.

Les td eux, à des colonnes verticales. Ce qui fait ton tableau ! Même si tu n'as qu'une rangée, il ne faut pas oublier de mettre les balises tr.

[Là, je suis pas certaine qu'on soit obligé, si Acedia passe il me corrigera xD]

Pour ce que tu demandes, mettre deux trucs côtes à côtes, c'est ça :

Code:
<table><tr><td>ton image ici</td><td>ton texte ici</td></tr></table>
ce qui donne : (pour l'exemple, j'utilise cette image

ton texte ici

___


Donc si tu veux ajouter une rangée horizontale, il suffit d'ouvrir une deuxième balise tr:

Code:
<table><tr><td>ton image ici</td><td>ton texte ici</td></tr><tr><td>ta deuxième image ici</td><td>ton deuxième texte ici</td></tr></table>
ce qui donnera :

ton texte ici
ton texte ici

C'est le même principe si tu veux ajouter une colonne verticale. Tu ajoutes une balise td :

Code:
<table><tr><td>ton image ici</td><td>ton texte ici</td><td>ta deuxième image ici</td></tr></table>
ce qui donne :

ton texte ici

Pour mettre deux blocs côte à côte, c'est exactement le même principe, les tableaux. On reprends donc notre code de tantôt.

Code:
<table><tr><td>premier bloc</td><td>deuxième bloc</td></tr></table>
Bon après pour mettre les bloc, je ne suis pas certaine que ma méthode soit la plus "propre" mais c'est comme ça que je fais et tant que ça fonctionne, je suis contente. xD

Il suffit de suivre le tuto d'Acedia, personnaliser tes bloc comme tu le veux, puis de l'insérer à la place de "premier bloc".

Pour l'exemple, j'ai choisis de placer deux blocs côtes à côtes. Le premier, jaune, 100 pixels de hauteur par 100 pixels de largeur. Le deuxième, gris et la même grandeur. Le code de mes blocs ;

Code:
Premier bloc
<div style="background: yellow; height: 100px; width: 100px;">texte</div>

Deuxième bloc
<div style="background:grey; height: 100px; width: 100px;">texte</div>
Premier bloc
texte


Deuxième bloc
texte


Maintenant, je veux les placer côte à côte. Donc, comme j'ai dis, on doit placer le code des deux div dans un tableau.

Code:
<table><tr><td>premier bloc</td><td>deuxième bloc</td></tr></table>
devient :

Code:
<table><tr><td><div style="background: yellow; height: 100px; width: 100px;">texte</div></td><td><div style="background:grey; height: 100px; width: 100px;">texte</div></td></tr></table>
ce qui donne :

texte
texte

Doooonc. Voilà. En espérant que tu aies compris mes explications. xD
Comme j'ai dis, j'crois pas que c'est la bonne méthode, mais ça marche alors je suis contente. [Acedia va venir me taper sur les doigts]

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

Présentation ♣️ Fiche de relations

Couleur : #d40825
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 9:05

Merci Shime'. Franchement, merci beaucoup ^•^ ! *câlin*
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 9:54

Coucou je viens te taper sur les doigts <3
Alors Yui,étant donné qu'on est dans le html, autant utiliser le html 5, l'utilisation des tableaux n'est pas la solution la meilleure, en effet. Bien que ça fonctionne, normalement on utilise les balises align et float. Je te rédige ça dans l'aprem.
Pour utiliser les tableaux, il vaut mieux avoir quelque chose de complexe à réaliser (je te montrerai un exemple).
 
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 10:20

Heu... d'accord, même si j'ai compris un mot sur deux de ce que tu viens de dire. Quoiqu'il en soit, j'attendrais cet aprèm
Edit du midi : Ou pas. J'ai utilisé la même manière que Shimeku et ça fonctionne^^.
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 13:56

Oui, je sais que ça fonctionne mais c'est une habitude qu'il faut pas prendre. Et si tu te lances dans des gros tableaux, tu t'y perd vite.
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 13:57

oui c'est vrai qu'à la fin je savais plus trop ou j'en étais...
Revenir en haut Aller en bas
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 14:47

Bon alors, j'ai pas trop le temps cet aprèm donc je te fais un gros topo rapide x)

reprenons le même exemple que Shime : on veut aligner une image à un texte.
Code:
<img src="http://urpix.fr/files/3zyc376c2so50d6axdo7.gif"> ton texte
ton texte

là ça s'aligne carrément tout seul, enfin, imaginons tu veux aligner ça avec une div.

Code:
<img src="http://urpix.fr/files/3zyc376c2so50d6axdo7.gif"> <div style="background: yellow; height: 100px; width: 100px; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum


Donc pour le moment, ça ne s'aligne pas. On va donc utiliser les balises align et float.


Code:
<img src="http://urpix.fr/files/3zyc376c2so50d6axdo7.gif" style="float: left;"/> <div style="background: yellow; height: 100px; width: 100px; overflow: auto;"><div align="center">Lorem ipsum dolor sit amet.</div></div>
Lorem ipsum dolor sit amet.


J'ai donné la balise align="center" à la div et la balise float: left; à l'image. Voilà voilà, j'essaie de ré-écrire ça plus clairement dans la soirée. :)
Revenir en haut Aller en bas
Shimeku Nagashi
Club d'Arts Martiaux
Féminin Messages : 1231
Date de naissance : 03/02/1996
Date d'inscription : 02/07/2013
Âge : 21

Carte d'identité
Année scolaire: 2ème année
Dortoir & numéro de chambre: Dortoir A - Chambre n°01
Colocataires: Lewin Rainer, Haku Miyake & Dave Saddler
avatar
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 18:32

Je savais que tu allais me taper sur les doigts. xD
Mais je préfère rester avec ma méthode, plus simple pour moi. Et tant que ça marche, je m'en fous pas mal. eê /fuiiiiit/
Je t'aime. 8D

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

Présentation ♣️ Fiche de relations

Couleur : #d40825
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Invité
Invité
MessageRe: Pour une jolie mise en page !- posté le Jeu 15 Aoû - 21:06

certes ça marche, mais perso, après avoir testé les tableaux dans les tableaux... j'ai laissé tombé xD
Revenir en haut Aller en bas
Shimeku Nagashi
Club d'Arts Martiaux
Féminin Messages : 1231
Date de naissance : 03/02/1996
Date d'inscription : 02/07/2013
Âge : 21

Carte d'identité
Année scolaire: 2ème année
Dortoir & numéro de chambre: Dortoir A - Chambre n°01
Colocataires: Lewin Rainer, Haku Miyake & Dave Saddler
avatar
MessageRe: Pour une jolie mise en page !- posté le Lun 27 Jan - 3:37

Bonjour ! (en retard pour le disputage D8)
Je te rappelles que les demandes doivent être fait DANS le post "Demandes de tutoriels et comment poster" Mais puisque c'est trop tard, peux-tu ajouter [CODAGE] dans ton titre ?

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

Présentation ♣️ Fiche de relations

Couleur : #d40825
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé
MessageRe: Pour une jolie mise en page !- posté le

Revenir en haut Aller en bas

Pour une jolie mise en page !

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
Pensionnat Rayen :: 
Hors RPG
 :: Tutoriels.
-
|| Partenaires ||