CSS Layouting – Position absolute dan relative

Melanjutkan bahasan css layouting, postingan sebelumnya sudah di singgung mengenai posisi absolut dan relative. Untuk yang awam mungkin masih bingung terkait perkara ini, namun apabila kita terus menggalinya dengan mempraktekannya maka lambat laun akan menemukan titik terang.

Apa fungsi dari position, position berguna untuk membantu kita dalam mengatur letak sebuah elemen dalam halaman html seperti pada gambar ilustrasi dibawah.

css-position

Ada beberapa macam nilai dari position, seperti static, absolute, relative dan fixed. pada gambar diatas posisi masing-masing bawaan adalah static atau bawaan default elemen dalam sebuah halaman, elemen terlihat berurut dari atas kebawah.

Namun bagaimana untuk membuat halaman dengan posisi elemen seperti berikut.

css-position-absolute-relative

Hal ini tidak bisa dilakukan dengan nilai static, jadi gunakan nilai posisi yang lain. Mari kita coba dengan nilai absolute dan relative.

Coba kita praktekan dengan menggunakan kode html berikut.

<html>
    <head>
        <title>CSS - Layouting</title>
        <style>
        body {
            background-color: yellow;
            padding: 0;
            margin: 0;
        }
        
        header {
            background-color: pink;
            margin: 10px;
            padding: 10px;
        }
        
        nav {
            background-color: red;
            margin: 10px;
            padding: 10px;
        }
        
        footer {
            background-color: orange;
            margin: 10px;
            padding: 10px;
        }
        </style>
    </head>
    <body>
        <header>Header</header>
        <nav>Navigation</nav>
        <footer>Footer</footer>
    </body>
</html>

Hasil Output

css-postion-001

Sekarang kita coba modifikasi kode pada bagian berikut

        footer {
            background-color: orange;
            margin: 10px;
            padding: 10px;
            position: absolute;
        }

Hasil output

css-postion-002

Bagian footer lebarnya menjadi tidak sama dengan parentnya.  Nilai absolute biasanya di barengi dengan atribut top, left, right, bottom.  untuk mencobanya kita ubah kode berikut.

        footer {
            background-color: orange;
            margin: 10px;
            padding: 10px;
            position: absolute;
            top: 0;
        }

Hasil Output.

css-postion-003

Setelah diberi atribut top 0, maka footer menjadi posisi atas, menutupi header. Silahkan di coba dengan atribut left, right, dan bottomnya.

jadi position absolute bisa mengabaikan atau tidak berhubungan dengan div yang mewadahinya. contoh lain adalah kode berikut.

<html>
    <head>
        <title>CSS - Layouting</title>
        <style>
        .box-1 {
            width: 500px;
            height: 500px;
            background: #faa;
            margin: 50px 0;
        }
        
        .box-2 {
            width: 400px;
            height: 400px;
            background: #fbb;
            margin: 50px 0;
        }
        
        .box-3 {
            width: 300px;
            height: 300px;
            background: #fcc;
            margin: 50px 0;
        }
        
        .box-4 {
            width: 200px;
            height: 200px;
            background: #fdd;
        }
        
        body, .box-1, .box-2, .box-3, .box-4 {
            display: flex;
            justify-content: center;
        }
        </style>
    </head>
    <body>
        <[hapus]div class="box-1">
            <[hapus]div class="box-2">
                <[hapus]div class="box-3">
                      <[hapus]div class="box-4">
                      </div>        
                </div>        
            </div>        
        </div>
    </body>
</html>

Hasil output.

css-postion-004

box-4 adalah kotak yang ditengah.

.box-4 {
    width: 200px;
    height: 200px;
    background: #fdd;
    position: absolute;
    top: 0;
}

Hasil output.

css-postion-005

perubahannya adalah box-4 keluar dari wadahnya box-3, menjadi ke bagian body.

script diubah lagi menjadi berikut.

.box-1 {
    width: 500px;
    height: 500px;
    background: #faa;
    margin: 50px 0;
    position: absolute;
}

bisa dilihat perubahan layout, box-4 di wadahi oleh box-1 yang memiliki property position absolute;

css-postion-006

Sekarang untuk memperlihatkan perbedaan dengan relative, coba dengan kode berikut.

<html>
<head>
<title>CSS - Layouting</title>
<style>
.box-1 {
width: 500px;
height: 500px;
background: #faa;
margin: 50px 0;
}

.box-2 {
width: 400px;
height: 400px;
background: #fbb;
margin: 50px 0;
}

.box-3 {
width: 300px;
height: 300px;
background: #fcc;
margin: 50px 0;
}

.box-4 {
width: 200px;
height: 200px;
background: #fdd;
left: 0;
position: relative;
}

body, .box-1, .box-2, .box-3, .box-4 {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<[hapus]div class="box-1">
<[hapus]div class="box-2">
<[hapus]div class="box-3">
<[hapus]div class="box-4">
</div> 
</div> 
</div> 
</div>
</body>
</html>

Hasil Ouput.

css-postion-007

dapat dilihat box-4 bergeser kanan karena property left: 100px; relative dan left akan berperngaruh dan berada dalam posisi div wadahnya yang terdekat seperti contoh kode diatas. kalau diisi absolute maka posisi div ke div body.

semoga bermanfaat, wassalam.

Bersambung …

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.