.jpg)
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>
Contoh pengaturan posisi elemen dengan KODE di antara <body> dan </body> menggunakan xHTML:
Jarak dari atas 200px, dari kiri 10px
Jarak dari atas 300px, dari kiri 150px
Update »Ngahad PON, Maret, 25, 2012
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>xHTML :
<div style="background:#CC9900;border:4px solid #CC3300;position:fixed;left:150px;top:300px;">
Elemen
</div>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 «
body tidak center bahkan sebagian tertutup sidebar?
BalasHapusbagamna cara merapikannya? makasih
http://rupakampung.blogspot.com/