| | Demande particulière | |
| | Auteur | Message |
---|
Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Demande particulière Jeu 16 Aoû 2012, 16:56 | |
| Bonjour (bonsoir) Je post ici un message (j'espère que je peux >.<) pour demander si quelqu'un pouvait m'apprendre a coder pour des Tableau, et PA particulière. Je n'ai pas un niveau très élevée et j'aimerais y remédier. C'est pour cela que je demande audience au près des codeur-codeuse qui voudrons bien me prendre sous leurs ailes pour quelques petit cours.
Merci, cordialement Laega | |
| | | Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
| Sujet: Re: Demande particulière Jeu 16 Aoû 2012, 17:37 | |
| Me voici me voilà ! Et bien entendu tu peux faire cette demande ici n_n
Alors déjà, tu veux commencer par le HTML ou le CSS ? A moins que tu préfères voir un peu des deux en même temps ?
Si tu as déjà eu l'occasion de coder un peu, peux-tu me montrer rapidement ce dont tu es capable de faire ? | |
| | | Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Re: Demande particulière Jeu 16 Aoû 2012, 18:46 | |
| Les 2 en mm temps. Je m'explique: Pour la PA, il faut la coder en HTML puis il y a un rappel dans le CSS. Pareil pour les tableau que j'aimerais faire ou les fiches de présentation avec des images et tout. Le soucis c'est que de 1 je ne sais pas par ou commencer et de 2 je ne connais pas tout les terme et possibilités qui sont faisable. Je sais ça peux paraître brouillon, je m'en excuse. Edit: j'ai ajouté quelque code d'exo que j'ai eu. - Code:
-
<span style="display: block; letter-spacing: 3px; font-family: impact; font-size: 45px; color: #A6274D; text-shadow: 2px 2px 5px #000000; margin-bottom: -4px; text-align: center;">Votre titre</span> <center><i><span style="font-family: palatino linotype; font-size: 14px; color: #FFFFFF; text-shadow: 0px 0px 3px #FFFFFF;">Votre joli petit sous titre</span></i> <div style="width: 75%; background-image: url(http://img11.hostingpics.net/pics/872959ibackground.gif); color: #A6274D; text-align: justify; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 15px; text-shadow: 2px 2px 3px #000000; border: 2px dotted #A6274D; border-radius: 10px 0px 10px 0px; margin-top: -10px; margin-bottom: auto; margin-left: auto; margin-right: auto; font-size: 11px; box-shadow: 0px 0px 5px #000000;">Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</div> - Code:
-
<center><span style="font-size : 32px ; font-family : gregorian ; color : #7b0009; background-color : #ff606b ; padding-top : 5px ; padding-bottom : 5px ; padding-left : 5px ; padding-right : 5px ; border-left:10px solid #b36a6a; border-right:10px solid #b36a6a;"> Reglement du Forum </span></center> - Code:
-
<p style="width: 600px; margin: auto; background: url(http://i20.servimg.com/u/f20/09/01/02/84/icongr11.gif) left center no-repeat #b4f2b7; border: 2px solid #76a678; padding-top: 2px; padding-botom: 2px; padding-left: 60px; padding-right: 2px; text-align: justify; font-size: 14px;"> 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." </p> - Code:
-
<p style="width: 600px; margin: auto; background: url(http://moto-plaisir.be/Comment%20rouler%20en%20groupe/Icone_Attention.png) left center no-repeat #f48c8c; border: 2px solid #ab5d5d; color: #212121; padding-top: 2px padding-botom: 2px; padding-left: 60px; padding-right: 2px; text-align: justify; font-size: 14px:"> 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." </p> - Code:
-
<p style="width: 600px; margin: auto; background: url(http://www.entropic-synergies.com/wp-content/uploads/IconeMessagerie.png) left center no-repeat #85ccf1; border: 2px solid #4bb8f0; color: #212121; padding-top: 2px padding-botom: 2px; padding-left: 60px; padding-right: 2px; text-align: justify; font-size: 14px:"> 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." </p>
- Code:
-
<span style="display: block; letter-spacing: 3px; font-family: impact; font-size: 45px; color: #A6274D; text-shadow: 2px 2px 5px #000000; margin-bottom: -7px; text-align: center;">Votre titre</span> <div style="width: 75%; background-image: url(http://img11.hostingpics.net/pics/872959ibackground.gif); color: #A6274D; text-align: justify; padding-left: 20px; padding-right: 20px; padding-top: 55px; padding-bottom: 10px; text-shadow: 2px 2px 3px #000000; border: 2px dotted #A6274D; border-radius: 10px 0px 10px 0px; margin-top: -40px; margin-bottom: auto; margin-left: auto; margin-right: auto; font-size: 11px; box-shadow: 0px 0px 5px #000000;">Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</div> Voila c'est tout ce que je sais +/- faire de Tête
Dernière édition par Laega le Jeu 16 Aoû 2012, 18:56, édité 1 fois | |
| | | Heaven Ghost
Nombre de messages : 22 Age : 27 Logiciel de Création : The Gimp ou Photoshop Date d'inscription : 10/07/2012
| Sujet: Re: Demande particulière Jeu 16 Aoû 2012, 18:54 | |
| (Juste comme ça en passant, je permets de m'incruster deux secondes et demi pour dire que faire des tableaux pour les PA et les présentations, c'est MAAAAAAAL =D le CSS peut faire ça tout en te laissant un code archi archi archi nickel ;) en plus, au niveau de l'accessibilité (oui, je suis maniaque, et ? xD), c'est carrément mieux. Bref, cela étant dit, je me retire, désolée du dérangement =S ) | |
| | | Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Re: Demande particulière Jeu 16 Aoû 2012, 19:02 | |
| J'ignorais qu'on pouvais faire ça uniquement pas le CSS. J'ai toujours vu les PA faite par l'HTML avec un rappel dans la feuille CSS. ESt ce que ça ne réduit pas les posibilités. | |
| | | Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
| Sujet: Re: Demande particulière Jeu 16 Aoû 2012, 19:07 | |
| | |
| | | Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Re: Demande particulière Jeu 16 Aoû 2012, 19:25 | |
| Je sais que les div sont des balises block, pour les inline (si c'est Les balise "en ligne" ) se sont les span.
Les div se mette l'une en dessous de l'autre et les span se suivent. On peut mettre des span dans une div mais pas de div dans une span c'est ça?
Les exo que j'ai montré se sont des truc tiré d'un cursus, mais il n'explique pas ce que sont les balise qu'ils donne, il disent juste: "Voila la ligne, introduisez les valeurs que vous souhaitez ( Font-size, Background-img, etc) pour obtenir un final. " Tout comme j'ignore la diff entre une div class et une div style T.T
| |
| | | Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
| Sujet: Re: Demande particulière Sam 18 Aoû 2012, 13:57 | |
| Voilà en gros c'est ça. Mais <div> et <span> ne sont pas les seules balises possibles. Comme tu l'as vu dans tes exemples, la balise <p> est de type block, ainsi que par exemple les titre comme <h1> , <h2> ... Les liens avec <a> ou encore les images sont de type inline. - Citation :
- Les exo que j'ai montré se sont des truc tiré d'un cursus, mais il n'explique pas ce que sont les balise qu'ils donne, il disent juste:
"Voila la ligne, introduisez les valeurs que vous souhaitez ( Font-size, Background-img, etc) pour obtenir un final. " Okay, donc en fait t'es plus calé CSS que HTML alors ? n_n
- Citation :
- Tout comme j'ignore la diff entre une div class et une div style T.T
Alors pour ça c'est simple. Le class="titre_de_class" renvoie à des propriétés CSS externes ( ou présentes dans le <head> de ta page) alors que le style="propriété:valeur;" est pour intégrer directement le style à ton élément. Tu retrouveras aussi le id="nom_de_l_id" qui ressemble un peu au class="" dans le fait qu'il fait appel à des propriétés externes.
C'est via les class et les id que tu as besoin d'utiliser les feuilles de style se présentant sous cette forme :
- Code:
-
.titre_de_class { propriete1:valeur; propriete2:valeur; propriete3:valeur; }
ou encore
#titre_de_l_id { propriete1:valeur; propriete2:valeur; propriete3:valeur; } La différence entre id et class est que l'id ne peut être utilisée qu'une seule fois dans une page web ( par exemple si tu veux afficher ton header, tu n'auras besoin de cette propriété qu'une seule fois ) alors que la class peut être réutilisée 36 fois dans ta page si tu le souhaites.
Dans la feuille de style il y a une seule différence à faire quand tu écris des propriétés de class ou d'id : • Tu mets un . avant le titre de ta class. • Tu mets un # avant le titre de ton id.
Voilà, j'espère avoir été assez claire dans mes explications ^^" | |
| | | Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Re: Demande particulière Mar 21 Aoû 2012, 15:54 | |
| - Ella' a écrit:
- Okay, donc en fait t'es plus calé CSS que HTML alors ? n_n
Je sais pas si l'on peux dire que je suis plus calé dans l'un ou dans l'autre, pour moi, je ne suis nul part dans les deux XD. Oui tu as été très clair dans tes explications, comme quoi c'est plus facile de converser avec des gens de son age, qu'avec des profs qui n'en n'ont rien à foutre de vous >.<. Je vais essayer de faire des exo, et si tu veux bien je te les soumettrait pour voir si ils sont correcte et ou ça coince ^^. | |
| | | Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
| | | | Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Re: Demande particulière Mer 22 Aoû 2012, 15:59 | |
| voila, je suis en train s'essayer (je dis bien essayer) de faire une page d'accueil type site pour le forum de ma guilde. Pour le moment le code donne ceci (ce n'est que du HTML) - Code:
-
<BODY BGCOLOR=#24100f> <center><img src="http://img213.imageshack.us/img213/1789/headerweb.png"></center>
<div style="text-align: center;">
<a href="http://insane-loyalty.guildmmorpg.com/"><img src="http://img207.imageshack.us/img207/9790/forumkk.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/register"><img src="http://img846.imageshack.us/img846/4355/registerg.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/login"><img src="http://img36.imageshack.us/img36/5526/connecta.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/f5-bureau-de-recrutement"><img src="http://img253.imageshack.us/img253/7491/recrut.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com"><img src="http://img194.imageshack.us/img194/4713/ppublique.png" alt="" /></a><br />
<p style="text-align: center;"><br></p> <p style="text-align: center;"><img src="http://img853.imageshack.us/img853/9817/footerweb.png"><br></p> </p>
<div style="text-align: right;"><font style="color: White;" size="1">Site hébergé par <a href="http://www.forumactif.com" target="_blank">forumactif.com</a></div> </BODY> J'aurais en réalité voulu mettre la disposition comme ceci: Le cadre blanc à droite est en réalité une image. Je suppose que pour obtenir ceci je dois jouer sur un tableau (col et rowspan) en une ligne et 2 colonne, pourtant quand j'essaye ça me foire tout (je veux dire que ça ne donne pas du tout ce que j'essaie de faire. Est ce parce que dans mon code il y a une faute, ou dois je utiliser une autre méthode? | |
| | | Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
| Sujet: Re: Demande particulière Mer 22 Aoû 2012, 17:28 | |
| Alors, en effet ça ne s'affiche pas de la même manière, il manque le contenu de gauche n_n
Déjà je te conseille de laisser les balises en minuscule, notamment pour le <body>, et aussi de ne pas prendre l'habitude d'utiliser la balise <center> La balise fonctionne (même si elle a été abandonnée depuis la version 4 du HTML) mais c'est déconseillé de l'utiliser car elle tient de la mise en forme et non du contenu de la page. Ensuite - Citation :
- Le cadre blanc à droite est en réalité une image.
Le cadre blanc de droite ? Ou tu veux parler de celui de gauche avec le texte "Guilde sur le serveur Vizunah..." ?
- Code:
-
<p style="text-align: center;"><br></p> Je ne comprends pas non plus cette partie là, pourquoi insérer un saut de ligne dans un paragraphe ? Tu as voulu faire quoi en plaçant ce saut de ligne ?
- Citation :
- Je suppose que pour obtenir ceci je dois jouer sur un tableau (col et rowspan) en une ligne et 2 colonne, pourtant quand j'essaye ça me foire tout (je veux dire que ça ne donne pas du tout ce que j'essaie de faire.
Tu peux mettre deux éléments côtes à côtes sans forcément utiliser de tableaux, tu peux utiliser la propriété CSS display:inline-block;.
Je reprends mon explication que j'ai donné à Dragibus : Je vais te montrer une nouvelle manière de mettre deux éléments de ce type côtes à côtes sans tableaux : le span avec un style="display:inline-block;".
Je pense que tu ne connais pas cette manière de faire car elle n'est pas souvent utilisée, mais elle est pourtant super pratique ! Le principe de l'inline-block est d'utiliser les bons côtés d'une span et les bons côtés d'une div :
• Grâce au span l'élément reste de type en ligne donc il n'y a pas de passage automatique à la ligne comme avec un block. • Grâce au block l'élément peut avoir une largeur et une hauteur modifiable.
On peut donc obtenir quelque chose qui ressemble à un tableau, mais qui peut être beaucoup plus pratique car en modifiant seulement le css on peut changer d'aspect en mettant les deux éléments soit à coté sois l'un sous l'autre, les tailles sont modifiables ....
| |
| | | Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Re: Demande particulière Mer 22 Aoû 2012, 18:08 | |
| - Ella' a écrit:
- Alors, en effet ça ne s'affiche pas de la même manière, il manque le contenu de gauche n_n
J'ai effacer cette partie et je ne l'ai pas sauvegardée malgré tout ça plantouille/ - Ella' a écrit:
- Déjà je te conseille de laisser les balises en minuscule, notamment pour le <body>, et aussi de ne pas prendre l'habitude d'utiliser la balise <center> La balise fonctionne (même si elle a été abandonnée depuis la version 4 du HTML) mais c'est déconseillé de l'utiliser car elle tient de la mise en forme et non du contenu de la page.
Okay c'est une vielle habitude que j'ai concervé des mes petite base d'HTML. - Ella' a écrit:
- Ensuite
- Citation :
- Le cadre blanc à droite est en réalité une image.
Le cadre blanc de droite ? Ou tu veux parler de celui de gauche avec le texte "Guilde sur le serveur Vizunah..." ? voui juste celui de gauche, j'ai inversé les 2cellules en fin de compte. - Ella' a écrit:
-
- Code:
-
<p style="text-align: center;"><br></p> Je ne comprends pas non plus cette partie là, pourquoi insérer un saut de ligne dans un paragraphe ? Tu as voulu faire quoi en plaçant ce saut de ligne ? Oh mon Br... je l'avais perdu XD de plus c'est un doublon inutile que j'avais fait pour chipoter. - Ella' a écrit:
-
- Citation :
- Je suppose que pour obtenir ceci je dois jouer sur un tableau (col et rowspan) en une ligne et 2 colonne, pourtant quand j'essaye ça me foire tout (je veux dire que ça ne donne pas du tout ce que j'essaie de faire.
Tu peux mettre deux éléments côtes à côtes sans forcément utiliser de tableaux, tu peux utiliser la propriété CSS display:inline-block;. Pour une page d'accueil html forum aussi je dois faire un rappel CSS, je ne savais pas En tout cas je vais essayer la méthode que tu as montré à Dragibus. merci bcp Ella | |
| | | Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Re: Demande particulière Mer 22 Aoû 2012, 18:58 | |
| (dsl pour le double post mais je préfère les séparer) Voila J'ai suivis tes explications sur le post de Dragibus pour le inline-block et j'ai obtenu ceci: - Code:
-
<body bgcolor=#24100f> <p style="text-align: center;"> <img src="http://img213.imageshack.us/img213/1789/headerweb.png"></p> <div style="margin-top:25px; text-align:center;width:100%"> <span style="display:inline-block; height:300px; width:546px;"><img src="http://img444.imageshack.us/img444/8271/tableaurecrut.png" alt="" /></span>
<span style="display:inline-block; height:264px; width:330px; text-align: right;">
<a href="http://insane-loyalty.guildmmorpg.com/"><img src="http://img207.imageshack.us/img207/9790/forumkk.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/register"><img src="http://img846.imageshack.us/img846/4355/registerg.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/login"><img src="http://img36.imageshack.us/img36/5526/connecta.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/f5-bureau-de-recrutement"><img src="http://img253.imageshack.us/img253/7491/recrut.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com"><img src="http://img194.imageshack.us/img194/4713/ppublique.png" alt="" /></a><br /></span>
</div> <p style="text-align: center; margin-bottom: -50px;"><img src="http://img853.imageshack.us/img853/9817/footerweb.png"><br></p> </p> <div style="text-align: center;"><font style="color: #24100f;" size="0">heberge par<a href="http://www.forumactif.com" target="_blank">forumactif.com</a></div> </body>
J'ai corrigée mes majuscules et mes doublons inutiles, et j'ai placé les 'span style="display:inline-block;' Visuellement j'ai ce que je veux. je n'ai pas du faire appelle au css pour les modifications, est ce normal? Est ce qu'il y a encore des fautes? ou des chose à améliorer? Et j'au aussi une petite question. j'aimerais "coller" le header et le footer au haut et bas de page. c'est faisable ça? (histoire de virer aussi cette p*t**n de scrollbarre). J'ai essayer avec des margin top et bottom négative/positive: mais rien n'y fait, j'arrive à caller le footer mais pas moyen pour le header. Edit: sur Chrome j'ai un bel aperçu mais mon copain lui ne voit aucune variation quand je change les margin-top et bottom. Il garde en toute circonstance le scroll | |
| | | Ella'
Nombre de messages : 4063 Age : 31 Logiciel de Création : Suite Adobe, Sketch, Suite Affinity Date d'inscription : 19/02/2008
| Sujet: Re: Demande particulière Jeu 23 Aoû 2012, 12:25 | |
| - Citation :
- Pour une page d'accueil html forum aussi je dois faire un rappel CSS, je ne savais pas
Alors tu as fait appel à du CSS tout au long de ta page. Dès que tu utilises un style="propriete-css:valeur;" tu te sers du CSS. Le HTML en lui même n'est là que pour le contenu de la page, mais en aucun cas pour son apparence, tu n'as donc pas utilisé que du HTML. Là ton CSS est intégré à chaque élément grâce à la propriété style="".
Personnellement je ne le conseille pas trop car je trouve qu'il est préférable de passer directement par une feuille de style que je trouve bien plus propre, mais tu as commencé comme ça donc autant finir de cette manière, mais une fois le code fini je pourrais te montrer comment j'aurais fait n_n
Ensuite pour ton code, le résultat est bon ! J'aurais par contre modifié quelques petites choses, comme le span autour de l'image. Je pense que tu peux directement mettre le style sur l'image au lieu de passer par le span.
Ensuite pour ta <div style="margin-top:25px; text-align:center;width:100%"> le width:100%; ( petit oubli du ; à la fin n_n) est inutile car la div prend par défaut toute la place horizontale qui est disponible.
Pour ton deuxième span tout me semble bon.
Enfin, évite la balise <font>, tu peux directement mettre la couleur du texte dans la <div> qui contient ton texte.
Une dernière chose, je me demande si insérer les images header & footer dans un nouveau paragraphe est une bonne idée. Je n'ai jamais rien lu là dessus mais considérer les header et footer comme des éléments de paragraphe me semble bizarre. Je ne pourrais pas te dire si cette manière de faire est valide ou non. De mon coté, j'aurais plutôt placé des div avec l'image en background ou juste des div contenant l'image.
Dernier petit conseil de ce message, pour te retrouver plus facilement dans ton code je te conseille d'indenter ton code. L'indentation permet de rendre le code beaucoup plus lisible pour toi, mais aussi pour les autres personnes ayant à le lire ou le modifier. Le but est de faire des sauts de lignes et des tabulations pour montrer quel élément est inséré dans un autre. Bon, mon explication est mauvaise, je n'arrive pas à m'exprimer aujourd'hui ^^" Voilà comment ton code est lorsqu'il est indenté (mieux vaut te montrer comme mon explication n'est pas très compréhensible) :
- Code:
-
<body bgcolor=#24100f> <p style="text-align: center;"> <img src="http://img213.imageshack.us/img213/1789/headerweb.png"> </p> <div style="margin-top:25px; text-align:center;width:100%"> <span style="display:inline-block; height:300px; width:546px;"> <img src="http://img444.imageshack.us/img444/8271/tableaurecrut.png" alt="" /> </span> <span style="display:inline-block; height:264px; width:330px; text-align: right;"> <a href="http://insane-loyalty.guildmmorpg.com/"><img src="http://img207.imageshack.us/img207/9790/forumkk.png" alt="" /></a><br /> <a href="http://insane-loyalty.guildmmorpg.com/register"><img src="http://img846.imageshack.us/img846/4355/registerg.png" alt="" /></a><br /> <a href="http://insane-loyalty.guildmmorpg.com/login"><img src="http://img36.imageshack.us/img36/5526/connecta.png" alt="" /></a><br /> <a href="http://insane-loyalty.guildmmorpg.com/f5-bureau-de-recrutement"><img src="http://img253.imageshack.us/img253/7491/recrut.png" alt="" /></a><br /> <a href="http://insane-loyalty.guildmmorpg.com"><img src="http://img194.imageshack.us/img194/4713/ppublique.png" alt="" /></a><br /> </span> </div> <p style="text-align: center; margin-bottom: -50px;"> <img src="http://img853.imageshack.us/img853/9817/footerweb.png"> </p> <div style="text-align: center;"> <font style="color: #24100f;" size="0">heberge par <a href="http://www.forumactif.com" target="_blank">forumactif.com</a> </div> </body> Bon, sur le forum le résultat n'est pas forcément très visible, mais quand on lit un code source sur un logiciel d'édition de code (du genre notepad++, ActiveState Komodo, Dreamweaver ...) la différence est flagrante je trouve. | |
| | | Laega
Nombre de messages : 20 Age : 34 Logiciel de Création : Photoshop Date d'inscription : 06/08/2012
| Sujet: Re: Demande particulière Jeu 23 Aoû 2012, 13:01 | |
| Okay, merci pour ces explications. Et moi qui croyais que le css c'était tjrs indépendant XD. j'ai pas l'air fine la. J'ai utilisé les balises paragraphe par habitude (soit pour les p'tits mots de modération, soit pour des éléments seuls) Je l'ai ai remplacé par des div, visuellement sur mon navigateur (chrome) ça ne change rien, donc bon point pour les div XD. J'ai corrigé le et le width 100%.
- Code:
-
<body bgcolor=#24100f> <div style="text-align: center;"> <img src="http://img213.imageshack.us/img213/1789/headerweb.png"> </div>
<div style="margin-top:25px; text-align: center;">
<span style="display:inline-block; height:300px; width:546px;"> <img src="http://img444.imageshack.us/img444/8271/tableaurecrut.png" alt="" /> </span>
<span style="display:inline-block; height:264px; width:330px; text-align: right;">
<a href="http://insane-loyalty.guildmmorpg.com/"><img src="http://img207.imageshack.us/img207/9790/forumkk.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/register"><img src="http://img846.imageshack.us/img846/4355/registerg.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/login"><img src="http://img36.imageshack.us/img36/5526/connecta.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com/f5-bureau-de-recrutement"><img src="http://img253.imageshack.us/img253/7491/recrut.png" alt="" /></a><br />
<a href="http://insane-loyalty.guildmmorpg.com"><img src="http://img194.imageshack.us/img194/4713/ppublique.png" alt="" /></a><br />
</span> </div>
<div style="text-align: center; margin-bottom: -50px;"> <img src="http://img853.imageshack.us/img853/9817/footerweb.png"> </div>
<div style="text-align: center; font style="color: #24100f;" size="0"> heberge par <a href="http://www.forumactif.com" target="_blank">forumactif.com</a> </div> </body>
- Citation :
- Ensuite pour ton code, le résultat est bon ! J'aurais par contre modifié quelques petites choses, comme le span autour de l'image. Je pense que tu peux directement mettre le style sur l'image au lieu de passer par le span.
Tu parle de cette ligne si ? - Code:
-
<span style="display:inline-block; height:300px; width:546px;"> <img src="http://img444.imageshack.us/img444/8271/tableaurecrut.png" alt="" /> </span>
Je l'ai fait comme ça car pour moi les sont comme des "cellules" que l'on peut mettre les une à coté des autre contrairement au div qui se mettent automatiquement lune sous l'autre.
| |
| | | Contenu sponsorisé
| Sujet: Re: Demande particulière | |
| |
| | | | Demande particulière | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |