Tutorial Melayu

Belajar CSS (positioning) dalam 10 langkah

Introduction

user

Fairuz

System Engineer (Texas Instruments France), Masters in Electronics , Embedded System Engineering,


LATEST POSTS

Nota: git alias yang biasa digunakan 05th December, 2013

Nota: Android .gitignore 23rd February, 2013

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.

profile

Fairuz

http://www.tutorialmelayu.com

System Engineer (Texas Instruments France), Masters in Electronics , Embedded System Engineering,

Comments
user

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?

Reply
    user

    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 =)

user

Author As Sabiluna

Posted at 7:35 am November 22, 2013.

biasanya untuk print, kena buat css khas utk printing shj

Reply

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

View Comments (3) ...
Navigation