Postingan

CSS Layouting : Z-index

Z-index z-index berfungsi untuk mengatur tinggi elemen daalm position, semakin besar z-index maka akan semakin dekat ke kita jadi tidak akan tertimpa oleh element lain. Z-index biasanya digunakan untuk membuat element posisinya menjadi paling depan, sehingga tidak akan tertumpuk oleh element lain. contoh cara penulisan:     z-index: (masukan nilai);   contoh ;  z-index: 1;  simpan di css element yang ingin di berikan z-index

CSS Layouting : position2;

Position absolute Ketika kita menggerakan elemen dengan posisi absolute(menggunakan properti top, left, bottom dan right), ruang yang ditempati oleh elemen tersebut dianggap tidak ada ketika kita menggerakan elemen dengan posisi absolute, elemen akan bergerak relatif terhadap posisi dari elemen parent-nya, selama element parent-nya memiliki posisi yang juga non-static jika kita memberi properti top: 0; dan left: 0; maka elemen akan berada di ujung kiri atas dari elemen parent-nya    fixed ketika kita menggerakan elemen fixed(menggunakan properti top, left, bottom dan right), maka fixed akan selalu bergerak relatif terhadap windows browser ketika kita scroll halaman, element tersebut akan tetap di posisinya

CSS Layouting : position

Gambar
Position Position static relative absolute fixed Static static adalah nilai default dari tiap tiap element ketika tidak diberi property position menggunakan position selain static(non static), akan membuat sebuah element menjadi seolah-olah berbeda dimensi dari element lainnya element yang diberi position selain static dapat menggunakan property top, left, bottom dan right untuk mengatur posisinya contoh :     jika dibuat 3d maka hasilnya:     jika kotak 2 digeser kebawah 20px dan kekanan 20px menggunakan margin maka hasilnya: relative ketika kita menggerakan element dengan posisi relative (menggunakan properti top, left, bottom dan right), ruang yang ditempati element tersebut masih ada ketika kita menggerakan element dengan posisi relative, elemen akan bergerak relative terhadap posisi semula-nya jika kita memberi properti top: 0; dan left: 0; maka elemen tidak berubah posisinya  contoh :      jika kotak dua diberi position relative hasilnya: ...

CSS Layouting : clear

 clear untuk mengatasi masalah pada float cara pertama kita bisa mengakalinya dengan property overflow: hidden;. cara ini adalah untuk mengakali bukan mengatasi cara kedua  kita bisa menggunakan div kosong lalu pada css kita berikan property clear:both; cara ketiga  kita juga bisa menggunakan skrip dari

CSS Layouting : Float

Gambar
      Float merupakan property pada CSS untuk mengatur posisi sebuah element. Sebuah element dapat dipaksa untuk berada di sebelah kiri atau kanan dari parent/pembungkusnya dengan menggunakan property ini.     Float nilai defaultnya none, kita bisa beri nilai left (elemennya akan berada dikiri) dan right  (elemennya akan berada dikanan). contoh :     diatas saya  mempunyai tiga div dengan lebar dan tinggi 100px dan satu paragraf. sekarang kita coba tuliskan float: left; di kotak kedua. hasilnya :      hasilnya kota ketiga akan hilang, sebenarnya kotak ketiga tersebut tidak hilang, tapi kotak tersebut berada dibawah kotak dua. karena kotak dua diberi float jadi kotak terbebut keluar dari jalurnya yang mengakibatkan kotak dua tidak dianggap dan kotak tiga maju keatas.     jika kita berikan float: right;     maka kotak tersebut akan berada di sebelah kanan.     kita dapat menggunakan float untuk membu...

CSS Layouting : Reset

Gambar
          Ada banyak element HTML yang memiliki default margin dan padding. contohnya pada body yang memiliki margin pada default nya     cara mengatasinya dengan mengatur body dengan margin dan padding 0     namun bukan body saja yang memiliki margin atau padding default. jika kita tulis satu-satu bisa dibilang cukup ribet. kita juga bisa mereset dengan menggunakan selector universal yaitu *, dengan selector universal maka akan mereset sebua selector yang ada di HTML     namun cara tersebut akan mereset semua element yang ada di html, jadi cara tersebut ada yang bilang cukup "berat" untuk dingunakan. ada cara lain untuk mereset semua element html, yaitu dengan css reset yang telah dibuat oleh eric meyer bisa dilihat dari website https://meyerweb.com/eric/tools/css/reset/  atau cari di google css reset     kita cukup mengcopy yang ada di dalam kotak kedalam css maka akan otomatis mereset selector html yang sering...

CSS Layouting : Box model (Border)

Gambar
  Border     border adalah batas di sekeliling konten dan padding cara penggunaan          border: ukuran style warna; contoh:           border: 2px solid black; hasilnya: ada beberapa macam style border, diantaranya:     property border juga dapat dipisahkan contohnya :     - border-width: 3px;     - border-style: solid;     - border-color: black;           namun cara tersebut jarang digunakan          kita juga dapat memberi border pada satu sisi, dengan menggunakan     - border-left: ;     - border-right: ;     - border-top: ;     - border-bottom: ;          border juga dapat mempengaruhi ukuran, cara mengatasinya dengan kalkulasi ukuran atau dengan property box-sizing: border-box;