Untuk mendapatkan posisi sebuah elemen pada halaman blog agar sesuai dengan yang kita kehendaki dapat kita lakukan dengan menempatkan KODE yang berfungsi sebagai pengatur posisi.
KODE ini berupa KODE CSS yang diletakkan pada tag head, antara <head> dan </head>. Meskipun demikian, pada kodisi tertentu pengaturan posisi dapat kita lakukan pada bagian body, diantara <body> dan </body> . Nilai/satuan yang umum dipergunakan untuk pengaturan adalah pixel (px) atau % (persen).
Contoh pengaturan elemen dengan KODE CSS di antara <head> dan </head>
Kode CSS :
.topmenu{
border:6px ridge #996633;
background:#00CC33;
width:200px;
height:30px;
padding:5px 7px 5px 7px;
margin:0 auto 0;
position:absolute;
top:0;
left:50px;
}Kode CSS :
.bottommenu{
border:6px ridge #9933CC;
background:#00CCFF;
width:200px;
height:30px;
padding:5px 7px 5px 7px;
margin:0 auto 0;
position:fixed;
bottom:10px;
left:5px;
} | elemen | positioning | jarak | jarak |
| topmenu | absolute | 50px dr kiri | 0px dari atas |
| bottommenu | fixed | 5px dr kanan | 10px dr bawah |
Contoh pengaturan posisi elemen dengan KODE di antara <body> dan </body> menggunakan xHTML:
xHTML :
<div style="background:#999;position:absolute;top:200px;left:10px;border:4px solid red;width:400px;height:200px;">
Elemen
</div>
Jarak dari atas 200px, dari kiri 10px
xHTML :
<div style="background:#CC9900;border:4px solid #CC3300;position:fixed;left:150px;top:300px;">
Elemen
</div>
Jarak dari atas 300px, dari kiri 150px
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:
Update »Ngahad PON, Maret, 25, 2012� Happy Blogging - gubhugreyot �
