En profondeur : Myspace DIV superpositions (5 / 6 étapes)

Étape 5: DIV Tables

Au début, quand j’ai parlé de patience c’est de quoi je parle. Dans cette étape, vous devrez placer toutes vos Tables de DIV séparé pour vos sections. C’est probablement la partie la plus difficile pour la plupart des gens, ou du moins les plus aggravants.
Ok donc premier départ bien avec mon article, le code pour la table ressemblera à ceci :

< div id = CALQUE1 style = "position : absolute ; haut : 20 ; gauche : 20 ; Largeur : 300 ; hauteur : 300 ; z-index: 1 ; padding : 5px ; background-color : transparent; » >
Il s’agit ont été le contenu de la boîte de va.
< / div >

Ce besoin d’aller à la fin de la section j’aimerais rencontrer de l’utilisateur.

Tout d’abord qu'il faut définir la largeur et la hauteur, c’est la meilleure façon de le rendre parfait.
1.) Ouvrez votre fond dans votre éditeur d’images.
2.) choisir la section vous intention de faire tout d’abord, ouvrez l’outil Rectangle et choisissez la partie de la boîte vous prévoyez faire.

3.) okay maintenant edit--> copie. Allez dans fichier nouveau, avec Photoshop, il s’adaptera automatiquement avec les pixels que vous avez copié, avec d’autres, il pourrait être différente. Alors maintenant, vous devriez avoir la largeur/hauteur.
4.) donc le mien est 240 x 185, alors maintenant passons l’appliquer au code et passer.

< div id = CALQUE1 style = "position : absolute ; haut : 20 ; gauche : 20 ; Largeur : 240 ; taille : 185 ; z-index: 1 ; padding : 5px ; background-color : 00FF00; » >
Il s’agit ont été le contenu de la boîte de va.
< / div >

Pour faciliter un peu les choses, changer la couleur d’arrière-plan pour quelque chose de sorte que vous pouvez voir la boîte entière que vous le placez, nous allons maintenant modifier ce retour à transparent plus tard pour fixer le fond.

< div id = « layer2 » style = "position : absolute ; haut : 20 ; gauche : 20 ; Largeur : 240 ; taille : 185 ; z-index: 1 ; padding : 5px ; background-color : FF00FF; » >
Il s’agit ont été le contenu de la boîte de va.
< / div >

Cette partie, je dois avouer. Suce totalement:D
mais vous aurez à travers elle: P
Maintenant, nous avons besoin de placer la boîte agréable et même, d’ajouter au top : 20 pour le rendre plus descendre, ajouter à gauche : 20 à faire passer. Cela vous prendra probablement plusieurs essaient placer, soit surtout voulu même. Commencez par le haut, faire descendre encore et puis placez-le à gauche.

Comme vous pouvez voir avec cela j’ai besoin de le déplacer un peu plus haut, dès maintenant son à haut : 256
Alors maintenant je l’ai monter uniformément par le haut, à 250

Maintenant, pour placer de la marge de gauche, qui est le même concept.
Bon alors maintenant j’ai mes endroits de table droite où je veux :

Et mon code se présente comme suit
< div id = « layer2 » style = "position : absolute ; haut : 250 ; gauche : 143 ; Largeur : 240 ; taille : 185 ; z-index: 1 ; padding : 5px ; background-color : transparent ;" >
Il s’agit ont été le contenu de la boîte de va.
< / div >

Vous pouvez maintenant revenir la couleur transparente et ajouter votre contenu :

Alors maintenant, c’est lorsque j’ai voulu dire que vous auriez besoin de quelques notions de base HTML, effectivement ajouter du contenu aux boîtes. Ma boîte ressemble maintenant à ceci :

Cependant, vous pouvez ajouter tout ce que vous désirez que votre contenu.

Mon code DIV Box se présente comme suit (pour toute référence, qu'il peut être nécessaire) :

< div id = « layer2 » style = "position : absolute ; haut : 250 ; gauche : 143 ; Largeur : 240 ; taille : 185 ; z-index: 1 ; padding : 5px ; background-color : transparent; » >
< a href = « http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmllbmRJRD04MTk3Mjk1 » >
< center >
< img src = « http://a384.ac-images.myspacecdn.com/images01/58/m_d065aa4a35adac5501ddcca3a9672fc7.jpg » / >< / center >< /a >< br / >< b > mâle < br / > 17 ans < br / > < /b > de Prescott, Arizona
< br / >< a href = « http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmllbmRJRD04MTk3Mjk1 » > Découvre tous les Pics < /a >
< / div >

Maintenant, c’est le même processus pour remplir toutes les cases, mais depuis je préfère ajouter une barre de défilement à mon sujet Me section, je vais vous montrer comment faire cela, qui est aussi simple que l’ajout d’une ligne de code.

C’est le code pour mon sujet Me section, remarquez le seul changement qui transforme en une section de la barre de défilement :
< div id = « layer2 » style = "position : absolute ; haut : 256 ; gauche : 450 ; Largeur : 376 ; hauteur : 204 ; z-index: 1 ; padding : 5px ; background-color : transparent ; overflow : auto ;" >
tout le contenu ici
< / div >

Maintenant il suffit de répéter cette étape jusqu'à ce que vous avez rempli vos boîtes. : D