AccueilCalendrierFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 (HTML & CSS) Faire une jolie exposition d'icônes.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Un flocon nommé .ABBEY

Looking after you.

avatar

Féminin Messages : 732
Age : 20
Localisation : DTC :)
MessageSujet: (HTML & CSS) Faire une jolie exposition d'icônes.   Sam 23 Juil - 20:39

Faire une jolie exposition d'icônes. [HTML]


(Hé oui je me suis améliorée en codage huhu *BAF*)
Hello ! Aujourd'hui nous allons apprendre à faire une belle présentation d'icônes comme ça ;) :




01
02
03
04
05
06
07
08

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

Avant de commencer, quelques explications ...

Définition du tableau [Table]
Code:
<TABLE></TABLE>
( Début et fin de tableau )

Définition d'une ligne [Table Row]
Code:
<TR></TR>
( Début et fin de ligne )

Définition d'une cellule [Table Data]
Code:
<TD></TD>
( Début et fin de cellule )


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

1ère étape
(La première ligne)

1°)




Commençons par aligner les 4 premiers icons, c'est simple comme boujour :
Voici le code de base :


Code:
<center><TABLE>
<TR> <TD> ICONS ICI </TD> </TR>
</TABLE></center>

& ensuite collez le code que je vais vous donner (le code de l'icon) 4 fois dans l'endroit ou il y a marqué "ICONS ICI" du code précédent (ça fait beaucoup de code o/) :

Code:
<img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt="">
(Remplacez le lien de l'image)

Ce qui vous donnera ceci :

Code:
<center><TABLE>
<TR> <TD> <img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""> <img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""> <img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""> <img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""> </TD> </TR>
</TABLE></center>


2°)



01
02
03
04


& Maintenant nous allons rajouter les petits numéros ! C'est très simple ajoutez le code que je vais vous donner 3 fois à la fin de :

Code:
 alt="">

Voici le code en question :

Code:
<TR><TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">01</div></TD>
(Changez le numéro au petit à petit)

& Ensuite collez pour finir ce code à la suite :

Code:
<TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">04</div></TD></TR>

Et voilà nous avons fini le plus difficile : La première ligne !
Voici le code:

Code:
<center><TABLE>
<TR> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD><TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> </TR>
<TR> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">01</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">02</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">03</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">04</div></TD> </TR>
</TABLE></div></center>

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

2e étape
(La Seconde ligne)

Nous avons fait le plus difficile ! Maintenant c'est très simple !
Pour ajouter une seconde il vous faut tout simplement copier le code du premier
Code:
<TR>
au dernier
Code:
</TR>
et collez le après le dernier :
Code:
</TR>

& Voilà le code final ;) :

Code:
<center><TABLE>
<TR> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD><TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> </TR>
<TR> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">01</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">02</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">03</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">04</div></TD> </TR>
<TR> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> <TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD><TD><img style="background-image: none; background-attachment: scroll; background-origin: initial; background-clip: initial; background-color: #ffffff; background-position: 0% 0%; background-repeat: repeat repeat; padding: 3px; border: 1px solid #d5ddd1;" src="http://bloomotion.com/stuff/icons/1348.jpg" alt=""></TD> </TR> <TR> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">05</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">06</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">07</div></TD> <TD><div style="background-color: #ffffff; height: 20px; width: 107px; text-align: center">08</div></TD> </TR>
</TABLE></div></center>

& Voilà ! C'est fini ! ;) Si vous avez bien suivi le tuto vous pourrez ajouter autant de ligne que vous voudrez par la suite !
Si vous avez des question n'hésitez pas ! 8D


(c) : Tuto By Abbey (2011)
(Me demander par MP. avant de prendre)






Merci Stelyne, Risa, Midona, Hoshika, Cheshire, Lie-Chan et Moka pour ces superbes signatures ♥ (Les prénoms sont pas en ordre o/):
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Un flocon nommé • Stelyne

Grande fan de l'art ♔

avatar

Féminin Messages : 1561
Localisation : Europe 8D
MessageSujet: Re: (HTML & CSS) Faire une jolie exposition d'icônes.   Dim 28 Aoû - 16:19

Merci pour ce tutoriel !
Il aurait fallu poster dans le dépôt de tutos (www), enfin ce sera pour la prochaine fois! ^^





Merci pour tous vos superbes cadeaux :3:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yumeartists.forumactif.biz
 

(HTML & CSS) Faire une jolie exposition d'icônes.

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
Yume Artists ★  ::  :: TUTORIELS :: Codage-
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit