Langsung ke konten utama

belajar CSS dasar bersama part 14 : mengenal position css property

 


position juga merupakan suatu properti dalam css yang terbilang sering dipakai dalam penerapan pembuatan website dalam kode css. dan saya juga sering sekali memakai properti position ini dalam pembuatan css, tapi sebelum kita memulai percobaan dan pengenalan properti position css ini maka sebelumnya saya akan mengucapkan
salam sobat semua
Alhamdulillahi robiil 'alamiin atas segala nikmat yang telah diberikan pada diri ini, sehingga diri ini masih bisa menulis dan berbagi dalam tulisan ini,
dan mudah-mudahan tulisan ini bisa bermanfaat sehingganya diri ini bukan termasuk orang yang menyia-nyiakan nikmat dari Robb Semesta Alam. Sholawat serta salamku
akan tetap selalu terpanjatkan kepada baginda sayyidina Muhammad ibni Abdillah S.A.W. dan beserta kepada keluarga dan sahabatnya.

sebelum kita mulai marilah kita membaca bismillah agar di berikan kemudahan dalam segala urusan. bismillah untuk kali ini kita akan mencoba
apa yang namanya properti position. dimana ketika kita lihat dari kata yaitu position maka bisa kita artikan bahwa property position adalah suatu kode yang mengatur
tentang posisi atau letak sebuah selektor, biar kita lebih paham dan jelas maka kita langsung saja terapkan dalam kode text editor masing-masing yang menjadi
kesayangan kita. bagi yang sudah mengikut tulisan ini dari kemaren, silahkan buka file kemaren yang sudah dibuat tapi sebelumnya di copy atau di duplikat dulu ya
biar data yang kemaren aman. dan bagi yang baru mengikuti silahkan ketik atau copy paste kode css berikut ini.
body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
}
#isi{
background:#f7f8f9;
color:#000;
}

dan ketik atau copy paste kode html berikut ini

<html>

<head>

<title>My Web</title>

<link href="style/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="main">

<div id="kepala">

<h1>Websiteku</h1>

</div>

<div id="isi">

<p>Ini adala isi dari main content yang akan saya buat 

sebagai website pertama saya

</p>

<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat 

website prtama saya

<div>Sekarang kita lagi mencoba properti display

<p class="terlihat">

<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>

</p>

dan dalam ini kita butuh beberapa langkah.

</div>

<p>Macam-macam nama kota di jawa timur:

<ul class="lis">

<li>Probolinggo</li>

<li>Surabaya</li>

<li>Jember</li>

<li>Pasuruan</li>

<li>Malang</li>

</ul>

</p>

<p>

<h1>Probolinggo</h1>

<br>

Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga

untuk kabupatennya

<br>

Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia

<ul class="lis">

<li>Luas: 56,67 km²</li>

<li>Peringkat luas wilayah: 75</li>

<li>Provinsi: Jawa Timur</li>

<li>Populasi: 223.159 (2014)</li>

<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>

<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>

<li>Waktu setempat: Sabtu 13.26</li>

</ul>

</p>

</p>

<p>Ini adala isi dari main content yang akan saya buat 

sebagai website pertama saya

</p>

<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat 

website prtama saya

<div>Sekarang kita lagi mencoba properti display

<p class="terlihat">

<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>

</p>

dan dalam ini kita butuh beberapa langkah.

</div>

<p>Macam-macam nama kota di jawa timur:

<ul class="lis">

<li>Probolinggo</li>

<li>Surabaya</li>

<li>Jember</li>

<li>Pasuruan</li>

<li>Malang</li>

</ul>

</p>

<p>

<h1>Probolinggo</h1>

<br>

Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga

untuk kabupatennya

<br>

Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia

<ul class="lis">

<li>Luas: 56,67 km²</li>

<li>Peringkat luas wilayah: 75</li>

<li>Provinsi: Jawa Timur</li>

<li>Populasi: 223.159 (2014)</li>

<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>

<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>

<li>Waktu setempat: Sabtu 13.26</li>

</ul>

</p>

</p>

</div>

</div>

</body>

</html>

dalam kode kali ini kita membuat dulu selektor kepala dan isi agar kita bisa menerapkan properti position pada selektor kepala. dan nanti kode ini bisa kita lanjut

ke tulisan berikutnya. dari kode diatas maka akan menghasilkan output seperti berikut kawan.


dan sekarang kita coba position yang sering saya pakai di dalam kode css pembuatan website. sekarang kita coba properti position dengan nilai atau value relative

sehingga jika kita terapkan dalam kode css akan seperit berikut

body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
position:relative;
}
#isi{
background:#f7f8f9;
color:#000;
}

dan jika kode diatas kita coba load atau coba buka di browser, maka hasilnya akan tetap sama dengan hasil kode yang tanpa properti position, tidak ada perubahan

sama sekali. dan sekarang kita coba position yang nilai atau valuenya absolute. sehingga akan menjadi seprti ini dalam penerapan kode cssnya

body{

margin:0;

padding:0;

}

#main{

min-width:150px;

width:100%;

background:#f5f5f5 ;

margin:0px;

font-size:14px;

font-family:arial;

}

.link{

text-decoration:none;

}

.lis{

list-style:square inside;

}

.terlihat{

display:block;

}

#kepala{

background-color:#00acf4;

color:#fff;

padding:7px;

position:absolute;

}

#isi{

background:#f7f8f9;

color:#000;

}

dan dari kode diatas maka akan menghasilkan output seperti berikut.

 




dari hasil diatas tampilan absolute ialah merubah posisi menjadi di depan tulisan selektor isi dan untuk lebarnya menjadi pendek maka, kita sekarang coba perbaiki
kode diatas agar kelihatan lebih menarik dan sekarang kita coba kode css seperti berikut ini.
body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
position:absolute;
width:99%;
}
#isi{
background:#f7f8f9;
color:#000;
padding:83px 7px 7px 7px;
}

dan dari kode di atas akan dihasilkan seperti berikut



 dan sekarang kita coba properti position dengna nilai atau value fixed, sehingga dalam penerapan kode css nya seperti berikut

body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
position:fixed;
width:99%;
}
#isi{
background:#f7f8f9;
color:#000;
padding:83px 7px 7px 7px;
}

dan akan dihasilkan dari kode diatas seperti berikut.


tampaknya dari gambar diatas tidak menunjukkan perubahan apa-apa, tapi sebentar dulu, coba kalian scroll atau gulir atau keatas kebawahin maka akan tampak perubahan

yaitu selektor kepala tidak akan ikut bergerak, selektor kepala akan tetap pada tempatnya seperti gambar berikut




 ada juga nilai atau value dari properti position ini yaitu static dan sticky. dari kedua value tersebut jarang saya pakai dan ketika saya coba ternyata tidak ada

perubahan sama dengan value relative diatas.

untuk tulisan position ini saya rasa cukup sekian dulu, kita lanjut di next tulisan, mudah-mudahan tulisan ini membawa dan memberikan manfaat bagi kita semua,aamiiin.


salam sobat semua.


jika ingin download silahkan download di sini


#css #free #share #html #property #position #fixed #absolute #sticky #berbagi #gratis

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya