Perjalanan seorang Herli

"because writing is, like death, a lonely business." – Neil Gaiman

Minimum Height di CSS

Setelah lama berkutat dengan transparansi, slicing design kali ini malah menghindari transparansi, yang berarti image nya harus dalam format standard: jpeg atau gif, dan tanpa css transparency sama sekali.

Saya mencoba pakai png dengan transparansi 50%, tapi tetap saya ada kendala dengan browser dengan berbagai macam standard dalam menangani png. Jadi saya memakai cara lain, yaitu dengan mengeset tinggi minimum untuk satu div supaya background image nya tidak terpotong.

Ternyata hanya dibutuhkan 3 baris css !! Dan.. bekerja di semua browser: Firefox 2, Firefox 3, IE6, IE7, IE8, Safari, Chrome, Opera. Sip !! Ini dia yang saya butuhkan. 😀

Saya menemukan solusinya disini.

First things first. Use the “min-height” in your css like this:

.myDiver{
min-height:100px;
}

NEXT! Set the regular height to “auto” using the “!important” tag.

.myDiver{
min-height:100px;
height:auto !important;
}

LAST! Set the regular height (again) but to the minimum height. 😉

.myDiver{
min-height:100px;
height:auto !important;
height:100px;
}

This will keep the div at 100px; and if the content inside of it extends beyond 100px, it will grow. This is true in ALL BROWSERS! Check out this example below:

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd

sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd
sdf ffdsa fd

Hebat yaaaa !! Menyelesaikan masalah saya dalam sekejap! Hanya dengan 3 baris code css !! 😀

4 Responses to “Minimum Height di CSS”

  1. kresent says:

    mba herli..ngerti ttg html g?
    kmrn aq mo gnt template..kan aq copy paste..blg nya malah gini..
    “Please correct the error below, and submit your template again.
    The new widget id “Recent-Posts-Widget1″ is invalid for type: Feed”
    trus aq coba ja apus Recent-Posts-Widget1 dr dpn ampe blakang..te2p g bs..knp y?
    aq pake blogger.

  2. Herli says:

    @kresent: wah.. blogger ya? maap cc, aku ga pakai blogger jadi ga gitu tau itu kenapa >.<

  3. kresent says:

    eh..nyantai ja..hehehhehe! kmrn aq otak atik sana sini..finally bs jg..hiks2! ternyata hrs di ganti type nya mslhe g di mengerti ma mbah blogger..hehehehe!
    aq malah bingung klo pake wp..susah nyerep ilmu baru. ^_^

  4. Herli says:

    @kresent: ini kan masalah kebiasaan aja, hihihi.. 😀

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>