Un flocon nommé .ABBEY
 Messages : 732
Age : 27
Localisation : DTC :)
 |  Sujet: (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 ;) : - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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°)
& 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) |
|
Un flocon nommé • Stelyne
Messages : 1561
Localisation : Europe 8D
| | Sujet: 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! ^^ |
|
