Floating Div Divs

Senin

Floating Div Divs

Div Tampilan sederhana Inner Menggunakan Divs

Perbedaan utama antara strategi ini, dan strategi lain, adalah penggunaan divs batin bukannya citra inti.

Kami akan membangun ini:
My Space Page dengan Anak Div Containers dalam sebuah Outer Core Div

Saya strategi lain terdiri dari satu atau lebih inti gambar, yang terdiri atas apa yang saya sebut inti div.
Materi tersebut kemudian ditempatkan di atas Core menggunakan penempatan absolut.
Kode untuk strategi ini dapat ditemukan di sini:
MySpace Wikipedia Div Ovrlay

Strategi ini menggantikan gambar inti dengan beberapa divs batin. Divs ini ditempatkan, yang memungkinkan mereka jatuh secara alami ke posisi yang kita inginkan mereka, dan kemudian
melayang entah kiri atau kanan (atau tidak sama sekali).
Hal ini memungkinkan kita untuk menciptakan wadah batin, yang bisa mengubah tinggi, seperti konten yang ditambahkan, tanpa mengacaukan tata letak kami.
Beberapa isi dari halaman default, dapat dengan mudah ditempatkan dalam div batin, yang dibuka SEBELUM konten yang terjadi, dan ditutup SETELAH konten yang terjadi.
Ada keterbatasan, di persis di mana kita dapat menempatkan konten halaman default, dan masih membiarkannya tumbuh tanpa mengacaukan tata letak kami.

Pada contoh berikut ini saya akan melakukan hal berikut:

- Hapus atau menyembunyikan semua konten halaman default (kami akan membawa kembali pada langkah selanjutnya)
- Buat div inti, yang akan berfungsi sebagai wadah luar (orangtua) untuk semua isi batin saya
- Buat beberapa kontainer batin (div blok)
- Posisi masing-masing dalam wadah tanpa perlu menggunakan posisi mutlak.

- Membangun salah satu wadah div batin sehingga wraps di blog kita. Hal ini memungkinkan isi blog kita untuk tumbuh.

- Posisikan teman-teman dan Komentar di bawah, sedemikian rupa untuk memungkinkan mereka menekan link bagian bawah saat mereka tumbuh.


1) Gunakan blok kode di "Langkah 2: Sembunyikan Isi Halaman default"dari artikel ini:
MySpace Wikipedia Div Ovrlay
Jangan khawatir jika Anda tidak ingin menyembunyikan semuanya, kami akan membawa kembali apa yang kita inginkan kemudian. Saya ingin mulai dengan mendapatkan semua itu dari jalan.

2) Gunakan blok kode di "Langkah 3: Buat Core Div untuk menempatkan kami Content dalam"
Dari halaman di atas. Letakkan kode ini pada Bagian Hero.
Jika Anda band folling tutorial, masukkan kode ini ke Bagian Anggota Band.


Perhatikan Aku meninggalkan kesenjangan antara blok span tersebut (yang saya gunakan untuk komentar sejak myspace menghapus komentar resmi apa pun menggunakan sintaks):
Custom Core !!----- START KONTEN ------!!




Core !!------- END CUSTOM KONTEN --------!!

Kami akan menempatkan blok kode beberapa berikutnya antara dua baris di atas.
Ini akan menempatkan konten dalam div inti kami (myCoreDiv).

Lihatlah gaya inline perintah ini, yang disertakan dengan tag terbuka untuk div inti:
<div class = "myCoreDiv"style = "width: 900px; height: auto! penting; border: 1px solid ungu; position: relative; top: 0px;

overflow: hidden; z-index: 0; " >
Mengubah 900 untuk yang dikehendaki dengan div inti Anda.
Dalam contoh saya menggunakan 800

Buat Atas Waktu Div

Jika Anda ingin div tumbuh untuk mengakomodasi menambahkan konten, atau jika konten TIDAK ukuran yang sama lintas-platform, Anda ingin mengatur height: auto
Jika Anda ingin div menjadi ketinggian yang tepat, Anda ingin mengatur tinggi untuk sebuah nilai px.
Jika Anda menetapkan nilai px, dan konten Anda tidak cocok, Anda memiliki risiko tinggi lintas isu browser. Y

<div class="myDivTopLeft"style="width:398px; height:auto; float:left" >

Konten untuk Top Waktu Div Goes Here.

</ div >



Buat Top Right Div

<div class="myDivTopRight"style="width:394px; height:auto; float:right" >
Konten untuk Top Kanan Div Goes Here. <br >

Saya bisa menyimpan apapun yang saya mau di sini, asalkan memiliki lebar 394px atau kurang.

Bagian ini diatur ke height: auto. <br >
Seperti tumbuh itu akan menekan konten di bawahnya, jika diperlukan.
</ div >



Hal ini memungkinkan untuk menempatkan lebih dari 2 kontainer pada tingkat yang sama. Anda dapat mengapung beberapa kontainer di kedua arah, selama ada ruang.
Aku akan mencakup lebih rumit contoh nanti.

Ketika kami selesai menempatkan divs kami di baris atas, kita perlu melakukan jelas. IE dan browser lain Float memperlakukan berbeda. Float menyebabkan sebuah wadah untuk tidak mengambil

ruang (mirip dengan penempatan absolut). Jika kita jelas, kita dapat memecahkan masalah ini.

Buka Pusat Div (yang akan mengadakan blog kita)
JIKA Aku ingin div berikutnya KEDUA duduk di bawah kiri dan kanan div, saya jelas keduanya. Jika aku hanya ingin duduk di bawah kanan saya div, aku jelas Kanan.
Untuk contoh ini, saya akan jelas keduanya:

Karena saya ingin div berikut ini untuk menyertakan konten dari halaman default, saya akan membuka Div di satu bagian, dan menutupnya di lain.
The blog terjadi SETELAH Interests SEBELUM bagian dan bagian yang blurbs (di halaman band setelah Bagian Umum dan Sebelum Bio bagian).
The blog TIDAK statis ukuran, baik di browser atau di seberang kali.
Oleh karena itu aku ingin mereka di sebuah ruang, yang dapat tumbuh bersama mereka.
Ini juga merupakan strategi yang baik digunakan untuk menunjukkan penempatan.

Aku akan membuka div ini di bagian pahlawan. Kode ini kami pergi DALAM Core Custom Content Blok.

<div class="myDivCenter"style="clear:both; border:1px hijau solid" >
(Anda dapat mengganti kebiasaan ini dengan Header Blog atau Hapus teks ini. Pada bagian ini akan tumbuh sebagai blog yang ditambahkan.)



Sebelumnya, ketika kita menyembunyikan semua konten default, kami bersembunyi blog kami.
Sekarang kita akan unhide mereka.
Hapus baris kode berikut:

table.latestBlogEntry (display: none;)


Blog Anda seharusnya sekarang muncul di dalam div baru saja Anda buat. Mereka harus secara otomatis pusat.
JIKA anda tidak ingin mereka terpusat, tapi malah ingin mereka kanan atau kiri, Anda dapat memindahkan mereka dengan menggunakan posisi relatif.
Namun, untuk contoh khusus ini, saya ingin mereka berpusat di ruang ini.

Buka jumlah meja yang sama kami menutup
Kode tersebut sudah di blok kode yang kita disisipkan di awal.
Itu selalu merupakan kebiasaan yang baik untuk menjaga menutup dan membuka tabel / baris / sel tag seimbang.
Setiap kali aku meletakkan konten, yang saya ingin pada tingkat Div Core saya, saya mengambil barang-barang sampai ke tingkat Satu Tabel Deep.
Aku melakukan hal yang diperlukan meja dekat / baris / sel perintah dalam setiap sel, di mana saya masukkan jenis konten ini.
Hal ini penting, karena setiap kali kita meninggalkan salah satu sel (di mana kita diperbolehkan untuk memasukkan data) kode pertemuan beberapa tag dekat. Kita perlu tag ini ke

peta dengan benar.

Siapkan kolom "To Meet"Bagian Untuk kelanjutan dari Div kami
Alasan saya memilih bagian Temui saya, bukannya saya Tentang bagian ini, adalah bahwa hal itu adalah titik entri data LAST. Kalau aku meninggalkan bagian ini, dengan div terbuka, yang akan menyedot div teman-teman saya dan komentar.

Ketika kami meninggalkan bagian Hero kami 2 divs terbuka. Kedua divs ini masih terbuka.
Divs ini adalah meja SATU dalam.
Sel kita memasukkan data di dalam, di bagian Temui, adalah tabel EMPAT mendalam.
Karena itu kita harus menutup tiga tingkat tabel / baris / sel sebelum kita menutup div ini.

Saya memulai bagian ini dengan cukup menutup tabel / baris / sel untuk membawaku OUT Blurbs kelas (yang kami membuat display: none) dan satu meja dalam.
Saya kemudian menutup div (myDivCenter).

Aku menempatkan blok kode di bawah ini dalam "To Meet"bagian (atau "Bio"di halaman band):

<span class="off" >!-pergi ke tingkat satu meja dalam-! </ i >
</ tr > </ tr > </ table >
</ tr > </ tr > </ table >
</ tr > </ tr > </ table >

</ div > <span class="off" >!-Tutup div.myDivCenter-! </ i >


Pusat Lower Buat Div
Tempatkan blok kode di bawah ini tepat di bawah blok terakhir Anda ditempatkan di kolom "To Meet"section:

<div class="myDivLowerCenter"style="border:1px putih dashed; height:auto" >


Perhatikan ini membentang div seluruh lebar div orangtua.

Selanjutnya dimasukkan ke dalam konten.
Perhatikan bahwa tumbuh sebagai div konten secara otomatis ditambahkan, mendorong link di bawah daerah.

Setelah konten Anda dimasukkan, tutup Div.
Setelah menutup Div,
Buka jumlah yang sama dari tabel / baris / sel yang kami menutup di bagian atas bagian ini.
Ketika aku sudah selesai dengan bagian, saya suka untuk dimasukkan ke dalam sesuatu untuk menunjukkan hal ini adalah akhir dari kode kebiasaan di bagian.
Hal ini membuat lebih mudah untuk menemukan kode, setelah digabung dengan kode standar myspace.

Aku sisipkan blok ini pada akhir "To Meet"section:

</ div > <span class="off" >!-dekat div.myDivLowerCenter-! </ i >
<span class="off" >!-sama terbuka jumlah meja kami menutup -! </ i >
<table > <tr > <td >
<table class="off" > <tr > <td >
<table class="off" > <tr > <td >
<span class="off" >!-Akhir kode kustom dalam Meet-! </ i >



Recover Teman dan Komentar
Div inti kami masih terbuka.
Jika kita sekarang menghapus kode yang telah memberikan teman-teman kita dan komentar (display: none) mereka akan terlihat setelah div terakhir kami menutup, dan di dalam div inti kami, dan

link di atas dasar wilayah.

Cari dan hapus baris kode berikut:

table.friendsComments (display: none)
table.friendSpace (display: none)



Terima kasih untuk Mengunjungi; Have a Nice Day :-)