Press "Enter" to skip to content

Dasar Pengaturan Box Elemen HTML menggunakan CSS

Saat mengerjakan sebuah website, pada suatu saat anda akan berhadapan dengan prilaku browser yang aneh, dan sulit sekali dibedakan apakah anda sedang berhadapan dengan bug dari browser ataukah memang anda sedang berhadapan dengan sesuatu yang belum anda ketahui. Oleh karena itu dengan mempelajari sisi teori dari pengubah visual pada CSS anda akan mendapatkan dasar yang kuat untuk mengambil kesimpulan dan melakukan eksekusi.

Pada dasarnya CSS menganggap semua elemen HTML menghasilkan box persegi panjang yang disebut box elemen. Setiap box elemen memiliki area content di tengahnya. Area content ini dikelilingi oleh padding, border, outline dan margin yang jumlahnya opsional. Disebut opsional karena anda bisa saja menghilangkan salah satu atau bahkan hampir semuanya dengan memberikan angka nol.

Tiap-tiap sisi margin, border dan padding dapat diatur dengan berbagai properti, seperti margin-left atau border-bottom. Outline tidak memiliki properti spesifik yang mengatur sisi-sisinya. background, warna dan gambar contohnya, pada content diaplikasikan pada padding secara default. Margin selalu transparan, memperbolehkan background dari elemen induk terlihat. Margin memiliki panjang negatif, sedangkan padding tidak.

Border memiliki style yang ditetapkan, seperti solid atau inset dan warnanya diatur menggunakan properti border-color. Jika warna tidak diatur maka border akan mengikuti warna foreground elemen content. Contohnya jika teks dari suatu paragraf berwarna putih maka border yang mengelilingi paragraf itu akan ikut berwarna putih juga.

Dalam format visual pada CSS ada beberapa terminologi yang perlu anda ketahui.

Normal Flow
Format penulisan dari kiri ke kanan, atas kebawah. Arah flow bisa saja berubah, dari kanan ke kiri, seperti dalam format penulisan bahasa Arab contohnya.

Nonreplaced Element
Ini adalah elemen yang contentnya berada di dalam dokumen. Contohnya, sebuah paragraf (p) adalah nonreplaced element karena content tekstualnya berada di dalam elemen itu sendiri.

Replaced Element
Elemen ini berfungsi sebagai wadah untuk sesuatu, contoh klasik dari replaced Element adalah elemen img, yang semata-mata menujukan file gambar yang di masukan pada dokumen flow dimana elemen img itu sendiri diletakkan. Kebanyakan elemen-elemen form juga Replaced Element.

Root Element
Ini adalah element induk pada bagian paling atas dari dokumen. Pada dokumen HTML, ini adalah elemen html, atau rss pada dokumen RSS.

Block Box
Box yang dihasilkan oleh elemen seperti paragraf, header atau div. Box ini menghasilkan spasi pada sebelum dan sesudah box, sehingga block box menumpuk secara vertikal pada normal flow.

Inline Box
Elemen span atau strong menghasilkan box ini, tidak ada spasi pada sebelum dan sesudah box ini. Elemen manapun dapat menghasilkan inline box dengan mendeklarasikan display:inline.

Inline-block Box
Secara internal box ini menyerupai block box, akan tetapi secara eksternal bekerja seperti inline box. Serupa akan tetapi tidak sama seperti replaced element. Bayangkan anda meletakan div dan meletakkannya di baris text.

Masih ada beberapa tipe box lagi, seperti table-cell box, tidak akan dijelaskan sekarang karena tipe box ini kompleks dan membutuhkan waktu khusus untuk menjelaskannya. Selain itu kita masih harus membahasa satu tipe box lagi, yaitu:

Containing Block
Containing block adalah konteks layout untuk sebuah box. perhatikan markup berikut ini.

<body><!-- Containing block untuk elemen div-->
         <div> <!-- Containing block untuk elemen p -->
                  <p>Ini adalah paragraf</p>
         </div>
</body>

Dari markup sederhana ini, containing block untuk block box elemen p adalah adalah elemen div block box. Serupa, containing box untuk elemen div adalah box body. Dengan demikian layout p bergantung pada layout div, yang bergantung pada elemen body, dan akhirnya bergantung pada elemen html yang menghasilkan box yang disebut initial containing block.

Display
Anda dapat merubah cara browser menampilkan sesuatu dengan mengatur value pada properti display.

Values: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit

Initial value: Inline

Applies to: All Element

Inherited: No

Sebagai contoh, kita memiliki beberapa link didalam nav yang akan kita layout sebagai sidebar:

<nav>
       <a href="index.html">Nuxid Home</a>
       <a href="products.html">Products</a>
       <a href="services.html">Services</a>
       <a href="fun.html">Widgety Fun!</a>
       <a href="support.html">Support</a>
       <a href="about.html" id="current">About Us</a>
       <a href="contact.html">Contact</a>
</nav>

Kita bisa meletakkan link kedalam table cell, atau membungkus tiap link dengan nav tersendiri, atau kita bisa menjadikan semuanya block-level element, seperti ini:

nav a {
           display: block;
}

Akan membuat semua elemen a didalam nav menjadi block level element. Seumpamanya kita menginginkan serangkaian nama dengan vertikal bar disela-selanya, kita bisa melakukan hal seperti ini:

<ul id="rollcall">
      <li>Yudi</li>
      <li>Angga</li>
      <li>Slamet</li>
      <li>Jefri</li>
      <li>Rio</li>
      <li>Fajar</li>
      <li>Reza</li>
      <li>Atma</li>
</ul>

#rollcall li {display: inline; border-right: 1px solid; padding: 0 0.33em;}
#rollcall li:first-child {border-left: 1px solid;}

Maka akan ditampilkan oleh browser:

| Yudi | Angga | Slamet | Jefri | Rio | Fajar | Reza | Atma |

Ada banyak cara menggunakan display untuk design web, anda dapat lakukan eksperimen sendiri. Yang perlu dicermati adalah, dengan menggunakan display anda hanya merubah tampilan, tidak merubah sifat aslinya. Cukup sekian untuk dasar pemformatan visual pada CSS, akan dibahas lebih mendalam pada kesempatan lain.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.