Pernah melihat kode CSS seperti ini “position: relative;” ? Ya, “Position” merupakan salah satu property CSS yang memiliki dua nilai yang sering digunakan, yaitu “Absolute” dan “Relative”. Lalu apa perbedaannya? Ok, kita langsung saja buat contohnya dengan membuat dua buah file “index.html” dan “style.css” yang disimpan dalam sebuah folder yang sama. Berikut kodenya :
index.html :
<html> <head> <title> Relative dan Absolute Position </title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="header"> <div id="judul"> Judul Website </div> </div> </body> </html>
style.css :
#header
{
margin: 0 auto;
width: 900px;
height: 150px;
background-color: #4682B4;
}
#judul
{
font-size: 34px;
color: #F5DEB3;
position : relative;
top: 70px;
left: 20px;
}
Kita jelaskan setiap kodenya.
Kita buat sebuah selector ID dengan nama “header”. Masih ingat dengan sebuah selector? Silahkan baca artikel Perbedaan Selector ID dan Class dalam CSS. Selector “header ini kita akan membuat sebuah header website berbentuk persegi panjang, berikut kodenya :
#header
{
margin: 0 auto;
width: 900px;
height: 150px;
background-color: #4682B4;
}
Disini kita akan fokus ke property “position”, jadi kita tidak membahas detail kode di atas. Penjelasan rincinya, dapat kita lihat pada artikel selanjutnya setelah ini. Oke, kita jelaskan singkat dari kode ini. “margin: 0 auto;” memberikan kotak/header berada ditengah layar sebelah atas browser, dimana width dan height-nya adalah 900px dan 150px. Kita berikan warna latar “background-color” seperti di atas.
Penempatan ID header pada “index.html” dapat dilihat di sini :
<div id="header">
<div id="judul">
Judul Website
</div>
</div>
Di dalam div ID “header” terdapat ID “judul”. Nah, inilah element yang akan kita berikan property CSS “position”. position yang diberikan adalah relative. Berikut kode CSS-nya :
#judul
{
font-size: 34px;
color: #F5DEB3;
position : relative;
top: 70px;
left: 20px;
}
Sebelumnya kita berikan ukuran dan warna font dari “judul” tersebut dengan nilai di atas. Setelahnya kita berikan position “relative”.
Perlu diketahui sebelumnya, posisi element dalam CSS terdapat dua macam, relative dan absolute. Relative merupakan posisi yang dimiliki element dimana letak penempatannya berpatokan kepada element yang menampungnya, dalam hal ini adalah ID “header”. Kalau dilihat, ada kode top dan left. Top adalah jarak atas element (judul) terhadap element penampungnya (header). Left adalah jarak samping kiri element (judul) terhadap element penampungnya (header). Maka hasilnya ID “judul” akan berada di kiri bawah dalam kotak “header” (bisa dilihat di gambar hasil template). Lalu bagaimana dengan absolute? Perbedaannya, posisi absolute letak penempatannya berpatokan kepada layar browser atau pojok kiri atas browser. Jadi jika kode di atas kita ubah posisition-nya menjadi “absolute”, maka ID “judul” akan keluar dari kotak ID “header” dan berada di sebelah kiri “header”, silahkan dicoba. Agar lebih jelasnya, kita lihat gambar dimana perbedaan titik pusat (koordinat 0,0 ) kedua posisition tersebut.
Sudah jelas dengan penjelasan di atas? Silahkan berikan komentar untuk masukan, saran, atau pertanyaan mengenai position relative dan absolute.
Semoga bermanfaat, terima kasih 🙂
Вот это вставьте в папку css:#page { -moz-background-clip: border; -moz-background-origin: pdndiag; -moz-background-size: auto auto; background-attachment: scroll; background-color: transparent; background-image: url( ); background-position: center top; background-repeat: no-repeat;}
так уже было в теме, я только картинку заменилвот все что относится к этой картинкев файле индекс.пхпdiv id=”base2″в файле стиля#base2{position:absolute;overflow:hidden;width:950px;margin:0px auto;top:0px;background:url(‘images/bg_footer.jpg’) no-repeat bottom right;}
its clear now 🙂
thank you
You’re welcome 🙂
saya bingung ni, basic nya membuat dua dan tiga kolom tu gimana sih? saya sudah main2 dengan float:right ataupun left, tp kolomnya masih berantakan juga, kadang2 juga keluar dari div penampungnya, mohon bimbingan, karena saya memang lemah designing, hehe
sudah menggunakan property “clear” setelah menggunakan element float? baiknya tampilkan dulu kode html dan css-nya disini. biar kita bisa bahas sama2 🙂
tag nya seperti ini,
Testing
x
Content here
Content here
dan berikut cssnya 🙂
@charset “utf-8”;
.welcome {
font-family: Georgia, “Times New Roman”, Times, serif;
color: #454545;
background:#00adfa;
text-decoration: none;
padding: 5px;
width: 445px;
margin:10% auto;
}
.kav {
text-decoration: none;
position:relative;
background:#454545
text-align: justify;
padding: 5px;
min-height:10px;
}
.blok {
background-color: #ccc;
padding: 5px;
float: left;
width: 210px;
}
dr smua codingan css mas, gk ada yg dipakai di kode hmtl-nya. munkin kita lihat dulu aja artikel ini :
http://javaziez.com/membuat-template-website-dengan-css-bagian-1/
disitu dicontohkan pembuatan dua ruas element html menggunakan css. nanti kita bahas di artikel sana ya 🙂
tagnya udah saya ketik tadi, cuma gak nampil di komennya, hahaha
”
x
Content here
Content here
“
info menarik kang. makasi ya.