html & css
Belajar CSS (positioning) dalam 10 langkah
Posted on .Untuk tutorial ini, saya menggunakan html ini sebagai panduan.
div-sebelum
id = div-1
div-1a
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer pretium dui sit amet felis. Integer sit amet diam.
Phasellus ultrices viverra velit.
div-1b
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Integer pretium dui sit amet felis. Integer sit amet diam.
Phasellus ultrices viverra velit.
div-1c
div-selepas
1. Posisi:static
Jika tidak ditentukan, posisi untuk setiap elemen adalah position:static yang bermaksud elemen tersebut diposisikan ditempat yang sepatutnya di dalam dokumen.
#div-1 {
position:static;
}
2. Posisi:relative
Jika menggunakan posisi relative, kita boleh menggunakan top, bottom, right atau left untuk menggerakkan elemen tersebut relatif kepada posisi sepatutnya elemen tersebut berada (posisi static) di dalam dokumen.
#div-1 {
position:relative;
top:20px;
left:-40px;
}
3. Posisi:absolute
Untuk posisi absolute, elemen tersebut akan di”buang” daripada susunan dokumen html dan posisinya akan ditentukan sepenuhnya oleh kita. Sebagai contoh, div-1a dialihkan ke atas kanan pelayar.
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
Dan oleh kerana div-1a di”buang” dari kedudukan asal dokumen, div-1b mengambil alih kedudukan div-1a di dalam dokumen.
4. Posisi:relative + Position:absolute
Jika posisi div-1 ditentukan sebagai relatif, kesemua elemen di dalam div-1 akan diposisikan relatif kepada div-1. Sebagai contoh, kita menggerakkan div-1a ke atas kanan div-1.
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
5. Posisi:2 kolum absolute
Dengan menggunakan teknik di atas, kita boleh membuat layout 2 kolum dengan menempatkan div-1a ke kiri dan div-1b ke kanan. Tetapi, oleh kerana kita menggunakan posisi absolute, div-1a dan div-1b telah menutup div-1c dan div-selepas.
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
6. Posisi:2 kolum absolute + height
Salah satu cara untuk menangani masalah di atas adalah dengan menetapkan height untuk div-1. Untuk posisi ini, div-1c masih lagi tersorok di belakang div-1a dan div-1b.
#div-1 {
position:relative;
height : 400px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
7. Posisi:float
Untuk ketinggian (height) yang berubah-ubah mengikut kandungan div, posisi absolute seperti di atas tidak dapat digunakan. Float digunakan untuk menolak elemen tertentu ke kiri atau ke kanan. Dalam contoh di bawah, div-1a ditolak ke kiri.
#div-1a {
float:left;
width:200px;
}
8. Posisi:kolum float
Dengan menggunakan float, kita boleh membuat susun atur 2 kolum dengan menolak div-1a dan div-1b ke kiri. Tetapi jika kita perhatikan, disebabkan oleh float left div-1b, div-1c turut ditolak ke kiri div-1b.
#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
9. Posisi:kolum float + clear
Untuk menangani masalah di atas, kita hanya perlu menggunakan kata kunci clear:both di dalam div-1c seperti di bawah.
#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
10. Latihan!
Langkah terakhir! Banyakkan latihan untuk memahirkan diri dalam CSS Positioning. =)
Selamat mencuba.
Fairuz
http://www.tutorialmelayu.comSystem Engineer (Texas Instruments France), Masters in Electronics , Embedded System Engineering,
Author Amin007.Ledang
Posted at 3:24 pm December 16, 2010.
salam, saya punya css ada masalah hendak cetak ke kertas.
dia akan keluar 2 kali
ada syor nak betulkan?
Author mdpai
Posted at 9:36 pm December 18, 2010.
salam, tak pernah jumpa pulak problem macam tu.. kalau amin dah jumpa solution dia, boleh la share kat sini =)
Author As Sabiluna
Posted at 7:35 am November 22, 2013.
biasanya untuk print, kena buat css khas utk printing shj