Graphisme Cat-Life
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.



 
AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
-15%
Le deal à ne pas rater :
(Adhérents) LEGO® Icons 10318 Le Concorde
169.99 € 199.99 €
Voir le deal

 

 Demande particulière

Aller en bas 
3 participants
AuteurMessage
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Demande particulière   Demande particulière EmptyJeu 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
Revenir en haut Aller en bas
Ella'

Ella'


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

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyJeu 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 ?
Revenir en haut Aller en bas
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyJeu 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
Revenir en haut Aller en bas
Heaven Ghost

Heaven Ghost


Féminin
Nombre de messages : 22
Age : 27
Logiciel de Création : The Gimp ou Photoshop
Date d'inscription : 10/07/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyJeu 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 )
Revenir en haut Aller en bas
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyJeu 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.
Revenir en haut Aller en bas
Ella'

Ella'


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

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyJeu 16 Aoû 2012, 19:07

(@heaven : Oui c'est sûr, mais il y a toujours des gens qui vont défendre les tables et d'autre qui détestent ça ... A vrai dire je n'ai pas trop d'avis sur la question ^^"
C'est sûr que quand on voit le tableau pour " une cellule = une donnée" du genre tableau Exel où chaque case à une correspondance c'est mauvais car on détourne l'utilité première du tableau en tant que classement de donnée les unes par rapport aux autres... Et je sais aussi que l'utiliser pour la présentation relève plus de l'apparence, donc du CSS... Mais à vrai dire j'ai appris il y a peu ces choses là, et j'essaie maintenant d'abandonner totalement les table, mais c'est dur de perdre ses habitudes n_n

Bref, fin de la parenthèse What a Face)


Ah, ben c'est déjà pas mal tout ça, je pense que t'as déjà de bonnes bases si tu fais tout ça de tête, donc ça va être plus facile Smile

Donc premièrement, on va voir si tu es déjà bien au point sur les balises block et inline car c'est une des bases ( enfin d'après moi :p). Sais-tu la différence entre les deux ? Et peux-tu me citer quelques éléments qui sont par défaut soit en block ou en inline ?

EDIT : on est obligé de passer par du HTMl pour faire appel à du CSS Smile Elle voulait dire par là que les tableaux pour placer les éléments ne sont pas la seule manière de faire mais qu'on peut passer par des blocs et les positionner à l'aide de CSS.
Revenir en haut Aller en bas
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyJeu 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
Revenir en haut Aller en bas
Ella'

Ella'


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

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptySam 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 ^^"
Revenir en haut Aller en bas
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyMar 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 ^^.
Revenir en haut Aller en bas
Ella'

Ella'


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

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyMer 22 Aoû 2012, 15:08

Moi je trouve que tu t'en sors plutôt pas mal pour l'instant ;)


Ouais, mais en même temps t'as d'autres personnes plus âgées mais qui en connaissent 10 fois plus que moi, même s'ils y mettent moins d'entrain je pense que dans le fond il y a toujours des choses intéressantes à apprendre ;)

Citation :
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 ^^.

Ça marche ! Si t'as la moindre question, n'hésite pas à la poser, j'essaierai d'y répondre du mieux que je peux Smile
Revenir en haut Aller en bas
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyMer 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:
Demande particulière Damo_g10

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?
Revenir en haut Aller en bas
Ella'

Ella'


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

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyMer 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> Razz 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 ....

Revenir en haut Aller en bas
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyMer 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> Razz 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
Revenir en haut Aller en bas
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyMer 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
Revenir en haut Aller en bas
Ella'

Ella'


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

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyJeu 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.
Revenir en haut Aller en bas
Laega

Laega


Féminin
Nombre de messages : 20
Age : 34
Logiciel de Création : Photoshop
Date d'inscription : 06/08/2012

Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière EmptyJeu 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.
Revenir en haut Aller en bas
Contenu sponsorisé





Demande particulière Empty
MessageSujet: Re: Demande particulière   Demande particulière Empty

Revenir en haut Aller en bas
 
Demande particulière
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Demande [Gif]
» Demande de Thème ![TERMINÉ]
» [Terminer] Demande pour une PA
» Art of Cats | Demande de partenariat |
» Je demande de l'aide pour mon blog beauté!

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