CSS Layouting – Position

Hal lain yang tak kalah pentingnya dalam membuat layout adalah property position. Position berguna untuk membantu anda dalam menentukan letak sebuah elemen. Property position ada beberapa nilai atau value yang telah disediakan yaitu static, relative, fixed, absolute. Penjelasan nilai position adalah sebagai berikut.
Static : merupakan nilai default bawaan dari setiap elemen, dengan nilai ini, elemen akan mengikuti alur dokumen. Untuk property top, bottom, left, right tidak berfungsi.
Relative : hampir sama dengan static, namun untuk property top, bottom, left, right berfungsi.
Absolute : elemen akan mengabaikan alur dari documen dan mengacu kepada document sebagai halaman utamanya saja.
Fixed : hampir sama dengan absolute, hanya saja nilai fixed hanya akan berperngaruh kepada element dengan nilai posisi relative saja.
Inherit : nilai akan sama dengan parentnya.
Agar bisa di pahami harus dilakukan langsung dengan percobaan.

CSS Layouting – BOX Sizing

Pada postingan sebelumnya di perlihatkan bahwa lebar box property width akan bertambah dengan adanya property padding, dan border, jadi akan di akumulasi. Bagaimana cara agar ukuran box atau div supaya tidak bertambah ukuran atau sesuai dengan width, caranya adalah dengan menggunakan property box-sizing. Jadi meskipun ditambah dengan padding dan border size maka ukuran widthnya tetap segitu.

Adapun contoh penulisannya adalah sebagai berikut.

/* box model simple*/
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* box model fancy */
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Hasil tampilannya adalah sebagai berikut.

endang-we-css-layouting-box-sizing

untuk memberlakukan ke semua element kita bisa menggunakan cara berikut. Tanda *, akan memberlakukan kepada semua element html.

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Semoga bermanfaat wassalam.

 

CSS Layouting – Box Model

Box atau  elemen div memiliki property width yang bisa di seting, sehingga ukuran lebarnya bisa ditentukan. Berikut ada dua box model contoh yang dimana bisa kita cermati perbedaanya terkait dengan property width dan property lainnya.

.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}

pada style css di atas hasilnya berikut.

endang-wp-css-layout-simple-fancy

bisa dilihat pada class simlpe ukuran sesuai dengan 500px untuk lebarnya. sedangkan pada class fancy ada penambahan padding 50px dan border lebar 10px, sehingga lebar total menjadi 500px+50px+50px+10px+10px  = 620px; terjadi akumulasi penambahan angka untuk lebarnya. ini terjadi karena ada penambahan lebar pada beberapa  property. semoga bermanfaat wassalam.

 

CSS Layouting – max-width

Property max-width bedanya dengan width seperti pada postingan sebelumnya adalah width ukuran dari div statis sesuai dengan nilai yang diberikan misal 600px seterusnya 600px. Tapi apabila di berikan property max-width : 600px; maka div akan memiliki ukuran max 600px; ketika browser di kecilkan ukuran div akan mengecil dynamis namun tidak menjadikan scroll di browser. Maksud dari penggunaan max-width adalah untuk memenuhi kebutuhan tampilan di versi mobile.

<_div class="container"></div>

style css

.container {
max-width: 600px;
margin: 0 auto;
}

Bisa di praktekan bagaimana hasilnya di browser. Property ini sudah hampir di support oleh berbagai browser terkini. semoga bermanfaat, wassalam.

CSS Layouting – Margin : auto;

Mari lanjutkan ke tema selanjutnya yaitu margin : auto; margin auto adalah sebuah property margin dengan kondisi nilai yang isinya otomatis atau terisi dengan sendirinya. Sebagai contoh adalah pada komponen tag div dengan nama class container berikut.

<_div class="container"></div>

div tersebut memiliki style sebagai berikut

.container {
width : 600px;
margin: 0 auto;
}

maksud dari kode css diatas adalah div class container akan memiliki lebar 600px dan posisi div berada di tengah layar dikarenakan sisi kanan dan kiri akan memiliki margin otomatis alias menyesuaikan sisa dari lebar div.

endangcahyapermana-margin-auto

Semoga bermanfaat, wassalam.

CSS Layouting – Property Display

Property display merupakan peroperti penting dalam mengontrol sebuah layout. Property display secara default memiliki nilai block atau inline, tergantung dari elemen html nya. seperti elemen tag span memiliki nilai property display inline, dan tag div yang memiliki nilai block.

Apa itu tag div, tag div adalah sebuah tag yang memiliki standard nilai block, yang dimana memiliki karakter memiliki lebar yang memenuhi ukuran parent dari kiri ke kanan. selain div, yang memiliki karakter yang sama adalah tag p, form dan tag baru di html 5 yaitu header, footer dan section.

endangcahyapermana-div-block.png

Apa itu tag span, tag span adalah sebuah tag yang memiliki standar nilai inline. karakter dari inline adalah lebar tag sesuai dengan isi di dalamnya. contohnya tag a, yang ukurannya hanya sesuai dengan konten isi didalam tag a.

endangcahyapermana-span-inline

Semoga bermanfaat, wassalam.

 

CSS Layouting itu?

Apa itu CSS layouting ? …

CSS layouting adalah tehnik untuk mengatur tata letak sebuah halaman web dengan menggunakan kode CSS. Kemudian apa tujuannya ? Tujuan dari CSS Layouting adalah agar halaman yang dibuat terlihat rapih, menarik sesuai dengan yang diharapkan oleh si pembuat.

Untuk belajar CSS layouting, bagi yang awam dan ingin belajar tentang hal ini ada beberapa ilmu css dan tentu saja html dasar yang harus di kuasai. Selanjutnya bisa naik ke permasalahan pengaturan tata letak dengan css.

Salah satu referensi untuk belajar mengenai css layout bisa di kunjungi web site https://learnlayout.com. semoga bermanfaat, wassalam.