Menggunakan CSS untuk menyelaraskan gambar ke sisi kiri Layout halaman web
Lihatlah hampir semua halaman web hari ini dan Anda akan melihat kombinasi teks dan gambar yang menjadi bagian terbesar dari halaman-halaman itu. Sangat mudah untuk menambahkan teks dan gambar ke halaman . Teks dikodekan menggunakan tag HTML standar seperti paragraf, daftar, dan judul, sementara gambar disertakan menggunakan elemen .
Kemampuan untuk membuat teks itu dan gambar-gambar itu bekerja dengan baik adalah yang membedakan desainer web hebat! Anda tidak hanya ingin teks dan gambar Anda muncul satu demi satu, yaitu bagaimana elemen-elemen tingkat blok ini akan ditata secara default. Tidak, Anda ingin kontrol atas bagaimana teks dan gambar mengalir bersama dalam apa yang akhirnya akan menjadi desain visual situs web Anda.
Memiliki gambar yang disejajarkan dengan sisi kiri halaman sementara teks halaman yang mengalir di sekitarnya adalah perawatan desain umum untuk desain cetak dan juga untuk halaman web. Dalam istilah web, efek ini dikenal sebagai mengambang gambar . Gaya ini dicapai dengan properti CSS untuk "float". Properti ini memungkinkan teks mengalir di sekitar gambar rata kiri ke sisi kanannya. (Atau di sekitar gambar rata kanan ke sisi kiri.) Mari kita lihat bagaimana mencapai efek visual ini.
Mulai Dengan HTML
Hal pertama yang perlu Anda lakukan adalah menggunakan beberapa HTML. Untuk contoh kami, kami akan menulis paragraf teks dan menambahkan gambar di awal paragraf (sebelum teks, tetapi setelah membuka
tag). Berikut adalah tampilan markup HTML:
Secara default, halaman web kami akan ditampilkan dengan gambar di atas teks. Ini karena gambar adalah elemen level blok dalam HTML. Ini berarti bahwa peramban menampilkan jeda baris sebelum dan sesudah elemen gambar secara default. Kami akan mengubah tampilan default ini dengan beralih ke CSS. Namun, pertama, kami akan menambahkan nilai kelas ke elemen gambar kami . Kelas itu akan bertindak sebagai "hook" yang akan kita gunakan dalam CSS kita nanti.
Perhatikan bahwa kelas "kiri" ini sama sekali tidak ada apa-apanya! Bagi kami untuk mencapai gaya yang kami inginkan, kami perlu menggunakan CSS berikutnya.
Gaya CSS
Dengan HTML kami di tempat, termasuk atribut class "left", kita sekarang dapat beralih ke CSS. Kami akan menambahkan aturan ke stylesheet kami yang akan mengapung gambar itu dan juga menambahkan sedikit padding di sampingnya sehingga teks yang pada akhirnya akan membungkus gambar tidak terlalu menonjol. Berikut ini CSS yang mungkin Anda tulis:
.left {float: left; padding: 0 20px 20px 0; }Gaya ini mengapung gambar itu ke kiri dan menambahkan sedikit padding (menggunakan beberapa singkatan CSS) ke kanan dan bawah gambar.
Jika Anda meninjau halaman yang berisi HTML ini di browser, gambar sekarang akan sejajar ke kiri dan teks paragraf akan muncul di sebelah kanannya dengan jumlah spasi yang tepat di antara keduanya. Perhatikan nilai kelas "kiri" yang kami gunakan sewenang-wenang. Kita bisa menyebutnya apa saja karena istilah "kiri" tidak melakukan apa-apa. Ini perlu memiliki atribut kelas dalam HTML yang bekerja dengan gaya CSS aktual yang menentukan perubahan visual yang ingin Anda buat.
Cara Alternatif untuk Mencapai Gaya Ini
Pendekatan ini memberikan elemen gambar atribut kelas dan kemudian menggunakan gaya CSS umum yang mengapung elemen hanya satu cara Anda dapat mencapai tampilan "gambar rata kiri" ini. Anda juga dapat mengambil nilai kelas dari gambar dan gaya dengan CSS dengan menulis pemilih yang lebih spesifik. Sebagai contoh, mari kita lihat contoh di mana gambar itu berada di dalam divisi dengan nilai kelas "konten utama".
Untuk mengatur gaya gambar ini, Anda bisa menulis CSS ini:
.main-content img {float: left; padding: 0 20px 20px 0; }Dalam sceario ini, gambar kita akan disejajarkan ke kiri, dengan teks melayang di sekitarnya seperti sebelumnya, tetapi kita tidak perlu menambahkan nilai kelas ekstra ke markup kami. Melakukan hal ini dalam skala dapat membantu membuat file HTML yang lebih kecil, yang akan lebih mudah dikelola dan juga dapat membantu meningkatkan kinerja.
Akhirnya, Anda bahkan dapat menambahkan style langsung ke markup HTML Anda, seperti ini:
Metode ini disebut " gaya sebaris ". Ini tidak disarankan karena secara jelas menggabungkan gaya elemen dengan markup strukturalnya. Praktik terbaik web menentukan bahwa gaya dan struktur halaman harus tetap terpisah. Ini sangat membantu ketika halaman Anda perlu mengubah tata letaknya dan mencari ukuran layar dan perangkat yang berbeda dengan situs web yang responsif. Memiliki gaya halaman yang terjalin dalam HTML akan membuatnya jauh lebih sulit untuk membuat kueri media yang akan menyesuaikan tampilan situs Anda jika diperlukan untuk layar yang berbeda.
Artikel asli oleh Jennifer Krynin. Diedit oleh Jeremy Girard pada 4/3/17.