Analisa Layout CSS Internet Positif (IPO)

internet-positif.org biasanya menyebalkan, tapi untuk tulisan kali ini sangat berguna karena memiliki desain layout yang simple dan cocok untuk digunakan sebagai bahan pelajaran.

layout internet-positif.org

Layout HTML

Seperti inilah tampilan IPO setelah layoutnya di-break-down.

Bagian utama terdiri dari:

  • #header
  • #alert
  • #content
  • #footer

Untuk #content sediri memiliki child:

  • #news
  • #more

Lalu #news memiliki child yang terdiri dari 3 buah colomn.

Dan akhirnya, untuk setiap child news yang ada di tiap kolom dibagi lagi menjadi:

  • #category
  • #image
  • #news_title
  • #news_date
  • #news_content

Kode CSS

Beberapa CSS ini sangat berpengaruh terhadap hasil layout IPO.

Untuk div #header, #alert, #content, dan #footer dibubuhkan class .container yang kodenya seperti ini:

.container {
max-width: 100%;
}

Kode ini digunakan agar lebar web dapat memenuhi layar.

Bagian dalam #content sedikit berbeda, karena menggunakan div bantuan yang dibubuhi class .wrapper seperti ini:

.container .wrapper {
max-width: 980px;
width: 100%;
margin-left: auto;
margin-right: auto;
}

Kode max-width digunakan agar lebar tampilan maksimal pada content dapat diatur. Sedangkan margin-left, dan margin-right yang bernilai auto, membuat layout diatur ketengah layar.

Lalu untuk membentuk 3 kolom pada desain, kode CSS yang digunakan adalah:

.news_uzone > div {
width: 33.33333333%;
float: left;
padding: 0 10px;
}

Maksudnya setiap div yang ada di #news akan dibuat menjadi kolom dengan lebar 1/3 dari lebar parentnya yaitu #news. Ditambah float agar melayang ke kiri (bingung juga jelasin float gimana), lalu ada sedikit padding kiri-kanan agar setiap kolom memiliki renggang satu sama lain.

Dan terakhir, tinggal mempercantik tampilan sedikit pada tiap-tiap #news pada bagian kolom, misalnya untuk #news_title ada kode seperti:

.uzone_title {
background-color: #000;
color: #fff;
}

Yang maksudnya agar bagian #news_title itu memiliki warna background hitam, dan tulisannya berwarna putih.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.