Pencerahan di CSS saya

Masukan dari @herihehe setelah kemarin belajar slicing dikit2 dan css nya😀

Berikut yang harus revisi dari belajar coding CSS saya hehehe :
1. logo:

– tambahkan width dan height pada h1 nya. biasanya di dalam h1 ada tag a, jadi logo bisa di klik. strukturnya menjadi seperti ini div#logo>h1>a. nah kalau seperti itu, nanti yang diberi width dan height, dan text-indent adalah a-nya. karena a secara default adalah inline element (ga bisa dikasih height dan width), maka a harus diubah ke block level dg property display:block.

2. link (a)
kalau dilihat, saat a dihover, maka ga keliatan jelas. ini bisa diakali dg memberi warna berbeda atau underline pada a:hover ← ini namanya pseudo element (googling ya).

note: kalau me-reset a agar ilang underlinenya, jangan lupa nambahin underline di hovernya.

contoh:

a {
text-decoration:none
}

a:hover {
text-decoration:underline
}

3. Clearing
Praktek udah bagus, dengan memakai floating element. Kalau yang sekarang kan setiap ada floating element selalu ditambahkan

Ini kurang bagus. Bisa diakali dengan menggunakan:

class.

misal pada css tambahkan:

.clear { clear:both }

trus di htmlnya nanti pake tag br saja, misal:

2.teknik clearfix (googling juga ttg ini).
jadi di css tambahkan:
.clearfix:before, .clearfix:after { content: “020”; display: block; height: 0; visibility: hidden; }

.clearfix:after { clear: both; }

.clearfix { zoom: 1; }

kemudian elemen yang di float, harus ditambahin class ini. misal sidebar mau di float, nanti di html ditulis:

, atau

2 thoughts on “Pencerahan di CSS saya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s