Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

mulai belajar layer (div) & trik2 css

monggo dibaca tips cara membuat 3 equal height column layout

http://blog.kometdigital.web.id/2006/03/equal_heights_three_column_lay.php

:D udah pernah dipost sama om RisK di dWeb kayaknya :D
«1

Comments

  • klo mau pake layer .. pake layer semua.
    klo pake table .. pake table semua ..
    jangan digabungin layer sama table
    klo digabungin .. djamin bakalan 100 %gak karuan diliat dengan berbagai brwser ..
  • selamat datang di dunia CSS :D

    untuk awal2nya anda bisa lihat contoh2 web dengan css. intip sourcenya :D

    http://cssbeauty.com
    http://csszengarden.com
    http://stylegala.com
    http://cssreboot.com

    kalo udah monggo belajar ke:

    http://alistapart.com
  • wii..

    http://csszengarden.com

    keren cuy
    banyak review webpage cantik dg css
    sample nya bisa di donlod lagi

    jadi ini situs yg dimaksud di tred bagi2 css

    slama ini gw cuma belajar teknik pemrograman
    dan beberapa bahasa web
    jadi belun bener2 serius dalemin desain

    sementara tgl 29 ntar umur gw udah 21 th
    :( apa udah terlambat ya buat belajar

    udah 2 tahun lebih dikit
    gw belajar komputer
    tapi belun juga bisa buat web 100%
    kelamaan ga' sih
    kamuorang gmana
    kira2 berapa tahun sih bisa bener2 jadi web master
  • yah dia curhat...hihihihi

    jangan tanya berapa taun bro. selama masih bisa belajar, ya belajar terusss!
  • kapan sih
    position:absolute dipakai
    atau position:relative dipakai

    gw udah tau bedanya tapi kapan dan dmana yg salah satu darinya digunain

    trus kalo ada div di dlm div itu baik ga?
    soalnya gw pengen background mengikuti tinggi isinya
    tapi isinya ini berupa layout yg dibuat dari div juga

    oh iya sekalian
    ada ga ya alternatif lain utk buat form yg rapih
    selain pake table

    waktu itu pernah gw coba pake tag span
    kayak gini

    ex.
    <style>
    span{
    width:200px;
    }
    </style>

    <span>Username:</span>
    <input type=text /><br />
    <span>Password:</span>
    <input type=password /><br />
    <input type=submit value=login />

    hasilnya sih rapih
    tapi ternyata hanya di ie
    span ga bisa dikasih attribute width
    sementara kalo pake div langsung otomatis pindah baris

    padahal rapihnya form
    cukup dengan sama lebarnya label
    tapi karena ga ada tag yg bisa diatur widthnya terus ga pindah baris
    terpaksa dah pake tabel lagi
    yg panjang dan boros
    klo mau pake layer .. pake layer semua.
    klo pake table .. pake table semua ..
    jangan digabungin layer sama table
    klo digabungin .. djamin bakalan 100 %gak karuan diliat dengan berbagai brwser ..

    iya gw juga pernah ngalamin
  • relative lebih banyak dipake untuk kontainer dari elemen yg absolute.
    &lt;div id=&quot;parent&quot;&gt;
        &lt;div id=&quot;child&quot;&gt;
        ....
        &lt;/div&gt;
    &lt;/div&gt;
    
    div#parent { position: relative; }
    div#child { position: absolute; top: 10px; left: 20px; }
    

    klo div#parent ngga dikasi posisi relative, div#child - yg punya posisi absolute - bisa berubah posisinya klo ukuran jendela browsernya diubah. soalnya patokan top, left, bottom, dan right dari div#child ini justru relatif dari pojok kiri jendela browser.

    jadi susunan kayak gini kasarnya untuk ngasi patokan untuk div#child

    nah klo dua ini digabungin, lu bisa maen dgn layout positioning yg lumayan canggih tanpa harus takut acak-acakan klo ukuran jendela browsernya berubah. sori ya klo kurang jelas. yg laen mungkin bisa bantu jelasin..

    trus soal form. u bisa cek tips-tips praktis css ini.

    oia, supaya span bisa dikasi width, coba kasi display: block.
  • Originally posted by badrun
    oh iya sekalian
    ada ga ya alternatif lain utk buat form yg rapih
    selain pake table

    waktu itu pernah gw coba pake tag span
    kayak gini

    ex.
    <style>
    span{
    width:200px;
    }
    </style>

    <span>Username:</span>
    <input type=text /><br />
    <span>Password:</span>
    <input type=password /><br />
    <input type=submit value=login />

    hasilnya sih rapih
    tapi ternyata hanya di ie
    span ga bisa dikasih attribute width
    sementara kalo pake div langsung otomatis pindah baris

    padahal rapihnya form
    cukup dengan sama lebarnya label
    tapi karena ga ada tag yg bisa diatur widthnya terus ga pindah baris
    terpaksa dah pake tabel lagi
    yg panjang dan boros

    coba pakai ini:

    <html>
    <head>
    <style>
    div{
    width:200px; float:left;
    }
    </style>
    </head>
    <body>
    <div>Username:</div>
    <input type=text /><br />
    <div>Password:</div>
    <input type=password /><br />
    <input type=submit value=login />
    </body>
    </html>
  • ok
    thank's
    abang2 bedua

    ada pertanyaan lagi nich
    dulu gw kalo buat menu vertical kebawah
    biasa pake table
    karena menu itemnya harus sama lebar
    tapi semenjak gw menemukan cara baru
    yaitu mengganti table dengan list
    dg memberi list-style:none
    code gw jadi lebih sedikit dan terlihat lebih cantik

    tapi gmana kalo menunya horizontal
    adakah alternatif laen selain table

    ok
    sekalian juga ya kalo ada trik2 css laennya
    sumbangin donk... :P
  • dapet cuy
    dari tips-tips praktis oom RisK

    ternyata listnya hanya dikasih display:inline

    ok
    kalo ada tips & trik lagi please...

    soalnya gw butuh penjelasan
    dari beberapa attribute css yg baru menurut gw
    tolong sih beri beberapa attribute css yg sering dan perlu digunakan
    seperti beberapa yg diatas

    btw
    ternyata pengetahuan css gw jauh tertinggal dari kalian
  • tips: kalo mau bikin container tepat di tengah, bisa dikasih rule sbb:

    div#container
    {
    margin: 0 auto;
    width: 750px;
    }

    ntar container tsb bisa berada persis di tengah2 halaman web :D
    ya mungkin uda agak basi sih tipsnya hehehe :D
  • wah wah wah wah
    trus-trusin lagi

    gantian ya nih trik buat fotter agak 3d

    pertama buat gradient ke bawah
    misalnya dg photoshop
    misal ukuran 20px X 20px
    terserah warna apa aja
    misalnya disimpan dg nama fotter.gif

    terus beri css gini

    .fotter{
    background:url("fotter.gif");
    width:780px;
    height:20px;
    }

    terus pake deh classnya di tag div atau what ever
    hehehe
    coba heightnya lebihin 4 pixel
    jadinya bagus loh
    kalo jelek coba lebihinya 2px

    oh iya masalah attr display:inline
    di sebuah list
    gmana ya supaya listnya rapet
    kayak cellpadding=0 cellspacing=0 nya tabel

    jangan lupa
    triknya lagi doooonk...
  • Originally posted by badrun

    oh iya masalah attr display:inline
    di sebuah list
    gmana ya supaya listnya rapet
    kayak cellpadding=0 cellspacing=0 nya tabel

    mainin padding ama margin-nya utk mendapat "kerapatan" yg sesuai.

    ah, 21 taun mah masih muda kang. saya udah umur 24 tahun ilmunya ga nambah2 :(
  • Originally posted by yeni setiawan

    ah, 21 taun mah masih muda kang. saya udah umur 24 tahun ilmunya ga nambah2 :(

    PACARAN MOLO SIH!



    dudududu....
  • Originally posted by RisK
    PACARAN MOLO SIH!



    dudududu....

    DARIPADA JADI HOMOK!!

    la.. la.. la..
  • Originally posted by yeni setiawan
    ah, 21 taun mah masih muda kang. saya udah umur 24 tahun ilmunya ga nambah2 :(

    percaya deh ... :D :D :D

    @kang badrun:
    itu kode footer untuk background jangan lupa tambahin jadi:

    background: transparent url("fotter.gif") left top repeat-x;

    supaya direpeat sepanjang apapun footernya :D
    untuk display:inline supaya bisa maen2 sama padding kyk di table, cukup:

    ul li
    {
    display: inline;
    margin: 0; // cellspacing
    padding: 0; // cellpadding
    }

    :D
  • @yamazaki
    kan tanpa di repeat X udah ngerepeat sendiri

    o tinggal dikasih margin:0 padding:0
    thank's ya

    trik nya lagi please...
  • dapet GRP ga nih? hehehehe...nih satu deh, tutorial bikin layout tiga kolom sama tinggi.

    basbang sih. tapi tiap hari ada aja tuh yg dateng lewat search engine. brarti masi banyak yg masi bingung.
  • Originally posted by badrun
    @yamazaki
    kan tanpa di repeat X udah ngerepeat sendiri

    o tinggal dikasih margin:0 padding:0
    thank's ya

    trik nya lagi please...

    lupa kalo default value background untuk repeat adalah repeat-all :D wkwkwkkwkw
  • ok, thank's oom RisK

    gantian lagi yah (walaupun dg trik2 murahan :D )
    ni dia trik membuat gambar timbul dan nyungsep

    intinya sama aja kayak buat sebuah button
    kan kalo button ingin terlihat timbul biasanya
    tampilannya dibuat
    mempunyai border kanan dan bawah yg berwarna hitam/gelap
    sedangkan lainnya (kiri dan atas) putih/terang

    tapi kalo pengen terlihat nyungsep (masuk ke dalam)
    tinggal diberi warna kebalikannya yaitu
    mempunyai border kanan dan bawah yg berwarna putih/terang sedangkan lainnya (kiri dan atas) hitam/gelap

    jadi simpelnya css nya gini aja
    - css timbul

    .timbul{
    border-left:solid black 2px;
    border-top:solid black 2px;
    border-right:solid white 2px;
    border-bottom:solid white 2px;
    }


    .nyungsep{
    border-left:solid white 2px;
    border-top:solid white 2px;
    border-right:solid black 2px;
    border-bottom:solid black 2px;
    }

    eh iya sekalian nanya lagi nih
    ada ga cara buat menu popup atau pulldown
    dg css tanpa melibatkan javascript sama sekali
    soalnya css kan ga ada operator logika if
    atau ada triknya ?

    @RisK
    ayo donk keluarin lagi... trik dasyatnya
    hehehehe

    @yg_lainnya
    mana nih yg lainnya...
  • "..soalnya css kan ga ada operator logika if.."

    la emang apa yang bisa kamu harapkan dari style????????

    "..dg css tanpa melibatkan javascript sama sekali .."

    HTML EVENT ATTRIBUTES + HTML DOM !!!

    onmouseover="( this.style.borderLeft='solid white 2px' )"
    onmouseout="( this.style.borderLeft='solid black 2px' )"

    html gitu loch..
  • Kalo utk hover, ga perlu pake javascript Mas. Kan dah ada hover
    /* timbul */
    .tombol{ 
    border-left:solid black 2px; 
    border-top:solid black 2px; 
    border-right:solid white 2px; 
    border-bottom:solid white 2px; 
    } 
    
    /* nyungsep */
    .tombol:hover{ 
    border-left:solid white 2px; 
    border-top:solid white 2px; 
    border-right:solid black 2px; 
    border-bottom:solid black 2px; 
    }
    
  • ye kalo hover sih gw juga dah tau

    pertanyaan baru lagi nih
    gw baca tutorial utk buat form rapih dari bang risK
    nah yg gw ga ngerti dari situ
    apa sih fungsi dari clear:both ?
  • Originally posted by badrun
    ye kalo hover sih gw juga dah tau

    pertanyaan baru lagi nih
    gw baca tutorial utk buat form rapih dari bang risK
    nah yg gw ga ngerti dari situ
    apa sih fungsi dari clear:both ?

    buat ngebersihin sisa float dari element yg ada di atas. misal

    <div id="left">left float</div>
    <div id="right">right float</div>
    <div><p>blah blah blah</p></div>

    di mana

    div#left { width: 200px; float: left; }
    div#right { width: 300px; float: right; }

    tanpa clear both, element yg berada di bawah left dan right akan 'nyungsep' di belakang div left dan div right.
    dengan clear both, elemen di bawah akan berada pada tempatnya

    <div id="left">left float</div>
    <div id="right">right float</div>
    <div class="clear"></div>

    <div><p>blah blah blah</p></div>

    dimana:

    div.clear { clear: both; }
  • woo.. begitu
    pantes gw kemaren buat layer pake float
    terus tumpuk2an gitu..
    anjriiit

    new question

    Gmana cara bikin supaya div tingginya bisa pas ama browser, meskipun isi (text) pada div tersebut cuman dikit. Tapi pas isi (text) lumayan banyak tingginya div bisa menyesuaikan ....????

    gw ngulang pertanyaan khiwie1979 :D
    di http://www.diskusiweb.com/viewthread.php?tid=19685

    soalnya ga ada yg jawab jadi gw penasaran
    menghadapi layer2 yg bandel ini

    trus ada yg bisa kasih contoh ga
    misalnya gw punya layout sederhana dg tabel
    yg garis besarnya seperti ini

    <table>
    <tr>
    <td colspan="3">banner</td>
    </tr>
    <tr>
    <td colspan="3">fotter</td>
    </tr>
    <tr>
    <td>menu</td>
    <td>content</td>
    <td>login form</td>
    </tr>
    <tr>
    <td colspan="3">fotter</td>
    </tr>
    </table>

    nah kalo diubah jadi layer gmana tuh source codenya ?
  • utk DIV agar ukurannya ketika belum terisi adalah n piksel, saya biasa pake min-height/min-width (lawannya max-height/max-width).

    tapi baru saya coba di Opera & Firefox. di IE kayaknya ga jalan, mungkin di IE7 jalan.
  • monggo dibaca tips cara membuat 3 equal height column layout

    http://blog.kometdigital.web.id/2006/03/equal_heights_three_column_lay.php

    :D udah pernah dipost sama om RisK di dWeb kayaknya :D
  • oh... thank's thank's
    friend..

    gw baru tau kalo ada attribute
    min-height dan max-height

    @yamazaki
    wow tutorialnya top abis dah...
    tapi kalo gitu apa bedanya div dg table

    selagi belun ada pertanyaan lain
    biar tred nya masih jalan
    gw kasih trik lagi ah...

    ini dia trik membuat kotak frame
    yg biasa dipakai di menu xp style

    intinya mudah
    masih seputar border dan background
    sebenarnya simpel tinggal membuat sebuah kotak

    trus warna background terserah asal warna muda
    dan diberi warna border solid yg sama tetapi sedikit lebih tua

    misalnya gini

    .xpframe{
    background:#f5f5f5;
    border:solid #c0c0c0 1px;
    }

    nah itu contoh utk warna abu-abu
    bisa juga diganti jadi biru dan lainnya hihihi

    gantian donk kasih trik2 lagi...
  • "..Kalo utk hover, ga perlu pake javascript Mas. Kan dah ada hover .."
    - la iya kebutuhannya kalo cuman hover?????
    - yang mana javascriptnya sich? onclick? this? yang bener aja luh!! itu dah gw sebutin gede-gede html event attribute sama hmtl dom, gak kebaca?

    "..buat ngebersihin sisa float dari element yg ada di ata.."
    wah kurang tepat nih, yang bener bukan yang ada di atas mas, tapi yang di kanan sama yang di kiri, soalnya kan ada tuh clear : right atau clear: left. eg. my site ofcourse :D

    "..tapi kalo gitu apa bedanya div dg table.."
    emang lu pantesnya baca tutorial gw di http://diskusiweb.com/viewthread.php?tid=15699 ha.. ha.. ha..
  • thank's utk koreksi dan tutorialnya...
    emang lu pantesnya baca tutorial gw di http://diskusiweb.com/viewthread.php?tid=15699 ha.. ha.. ha..

    iya iya ga usah diketawain juga gw udah ngerasa pemula banget kok
    makannya gw tanya2 sama kalian

    btw
    maaf sebelumnya bila ada salah omong
  • gw bukan ngetawain, tapi emang gw dasarnya suka ketawa :D
  • Originally posted by hadi_mulyadi
    wah kurang tepat nih, yang bener bukan yang ada di atas mas, tapi yang di kanan sama yang di kiri, soal......

    <div style="float: left;">left</div>
    <div style="float: right;">right</div>

    <div style="clear: both;"></div>

    apa salah kalo saya bilang untuk membersihkan efek float dari elemen di atas kalo dilihat dari contoh kodenya ? :D
    kalo saya bilang untuk membersihkan yg di kanan sama yg di kiri kok aneh ya, lha divnya aja ngga sejajar :D
  • wah min-height max-height
    ga bisa ie6
    tapi kalo di firefox kan bisa
    nah masalahnya gmana solusinya biar bisa di dua2nya
    kalo di ie cukup dg attribute height aja
    layernya bisa menyesuaikan tinggi sesuai isinya
    tapi kalo di firefox nggak
    musti pake min-height
    sementara kalo attr height dan min-height
    digunakan semua maka hasilnya tetep ga sesuai keinginan

    juga tutorialnya yamazaki
    yg merubah div jadi table
    ternyata ga jalan di ie6
    padahal gw pengen buat 3 kolom
    yg bila salah 1 kolom terisi panjang ke bawah
    maka 2 kolom lainnya akan menyesuaikan tingginya
    sehingga ketiga kolom sama tinggi
    gmana ya caranya?

    trus tips "margin:0 auto"
    utk buat ketengah ternyata juga ga bisa di ie
    jadi gw akalin gini
    *{
    text-align:left;
    }

    body{
    text-align:center;
    }

    #layer{
    margin:0 auto;
    }

    tampaknya akan merubah semuanya termasuk th dan h1, dan lainnya
    jadi align left...
    ada solusi ga?

    btw
    gmana sih cara malidasi halaman web kita
    ke w3 utk mengetahui sudah standar pa belun?
  • Set deh, gue ketinggalan neh, jadi terpaksa rada panjang postingan ini. yamazaki san rajin bgt jawabne, sayonara :D

    Bro, kalo difirefox dan dsb ternyata css lo oke-oke aja. Lebih baek lo pake IE hack, jadi attribute-nya cuma bakal ngaruh di IE doang. Contoh nih buat yg height.

    #kolom {
    min-height: 200px;
    }

    // IE hack
    * html #kolom {
    height: 200px;
    }

    Tapi kudu inget, IE Windows dan Mac agak rada beda dikit, kalo Mac kadang bisa pake komen. Ner ga boss RisK (baca: suhu css hack)?

    Buat yg align center, IE memang ga peduli dengan margin: auto, kudu ditambahin text-align: center. Buat ngakalin biar yg didalem ga center juga, tambahin deh text-align: left;

    #layer {
    text-align: left;
    }

    Ga ada jalan lain kalo pengen semua browser kompakan, kudu make CSS hack & filter bro.

    Buat validasi (XHTML dan HTML) bisa http://validator.w3.org/ sementara buat CSS http://jigsaw.w3.org/css-validator/.

    Tanya kunaon?
    Gue pengen nanya nih, gimana caranya content didepan background, backgroudnnya transparan tapi content didalemnya normal. Hm... bingung gw jelasinnya. Gini deh,
    1. Ada sebuah halaman dengan background pemandangan alam.
    2. Ada div diatasnya dengan background putih, yg dalamnya ada tulisan "So what gitu lhooo...".
    3. Si div itu background putihnya kudu transparan terhadap pemandangan alam, tapi si tulisannya kudu normal.

    Solusinya ada 2, gw dah obok-obok.
    1. Pake image PNG transparent (IE gagal, karena IE penyakitan dengan PNG).
    2. Pake css attribute "opacity" (Opera < 9 gagal, karena tidak support, lalu dibrowser lain termasuk tulisannya juga ikut transparan).

    Gimana caranya bro-bro skalian solusinya, biar browser ga saling mendahului untuk kasus ini?

    La... la... la...
  • "..apa salah kalo saya bilang untuk membersihkan efek float dari elemen di atas.."
    gimana sih lu ya emang di atas, tapi kurang lengkap, di atas kanan atau kiri? clear both mana ada di taro di tengah atau di atas, ya di bawah kan

    "..gimana caranya content didepan background.."
    pake position: absolute; z-index: 1 (bisa 0, 1, 2, 3, 4, dst. )
    <div>gambar dsb</div>
    <div style="position: absolute; z-index: 1; top: terserah; left: terserah">konten di dalam div ini akan berada satu tingkat di atas konten "gambar dsb"</div>
  • @hadi_mulyadi
    Bukan content didepan background bro masalahnya, tapi background yg transparan dengan content yg normal. Soalnya pake kalo PNG transparan IE ogah, kalo pake opacity contentnya ikut transparan juga.
  • hallo tarzilla
    lama tak jumpa
    "nyow kabakh nikuw" (bahasa lampung) :D

    thanks replynya
    ntar gw coba dulu ya ie hacknya
    ntar gw tanya2 lagi kalo ada masalah
    so stay nongkrong disini aja ya pada

    gw perkuat pertanyaan tarzilla
    soal tanya background transparan
    btw gw juga baru tau tuh bisa transparan
  • eet..
    bentar dulu ada iklan

    berdasarkan pengembangan dari display:block from risK
    gw dapet resep baru nih
    resep membuat button hemat :D

    daripada setiap membuat button yg terbuat dari image kita harus membuat button satu2 dikarenakan caption di dlm button yg berbeda2
    yg padahal image container button selalu sama
    dan mengakibatkan pemborosan image
    maka gw akalin jadi gini

    misal gw punya button1.gif berwarna biru dan button2.gif berwarna merah yg sama2 berukuran 80px X 20px
    nah nih cssnya

    .mybutton{
    background:url("button1.gif");
    width:80px;
    height:20px;
    display:block;

    color:#ffffff;
    text-align:center;
    text-decoration:none;
    font-weight:bold;
    font:10px verdana;
    }

    .mybutton:hover{
    background:url("button2.gif");
    }

    nah utk mengatur letak text cukup dg padding

    @tarzilla
    manjur tuh resep ie hacknya

    @yamazaki
    DOCTYPE ya ntar gw coba dulu
    DTD yg html4.01 bukan ?
  • jeng tar, itu udah pernah saya post kok.
    di IE ada filternya buat support PNG transparant. ntar saya googling bentar :D

    http://www.entropy.ch/blog/Website/2005/03/23/Transparent_PNGs_in_Windows_Internet_Explorer.html

    http://www.gabrielharper.com/en/Articles/Web-Design/CSS-Transparency-Opacity-IE-Mozilla-Firefox

    @badrun: di IE margin: 0 auto; jalan kok hanya saja harus ada DOCTYPEnya. entah kenapa tapi waktu DOCTYPEnya saya hapus, margin: 0 auto; nya nggak jalan :D

    @hadi: iya deh anda emang paling pinter. maaf kalau kata2 saya salah :D
  • jeng tar, kalo pake ie hack yg
    <!--[IF IE]

    -->
    bedanya apa ya sama yg jeng tulis. enakan yg mana ?
    soalnya saya masih pake yg !important hueheuheu

    @badrun:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;

    ini sih yg saya pake :D
  • @badrun
    hallo tarzilla
    lama tak jumpa
    "nyow kabakh nikuw" (bahasa lampung) :D
    He eh, tos lami teu peundak (bahasa: sunda) :D

    Button: Biar lo ga cape nulis tiap input yg tipenya button ditambah css class itu. Pake DOM dikombinasi dengan javascript className bro, lo bisa filter tuh input berdasarkan tipenya, trus lo apply class yg sesuai buat tipe itu. Jadi ga perlu nulis: <input type="button" class="bla">, semuanya tag <input> bertipe button otomatis punya class itu. Lumayan ngirit beberapa karakter di HTMLnya :cool:

    @yamazaki
    Thanks bro, buat linknya, tp belum sempet cobain, ntar gue jajal.
    jeng tar, kalo pake ie hack yg
    <!--[IF IE]

    -->
    bedanya apa ya sama yg jeng tulis. enakan yg mana ?
    Nah kalo itu ga bisa ditulis didalem tag <style> atau file stylesheet, jadi cuma diHTML doang. Stylesheet kan cuma mengenal komen dengan /* */. Soal enak ga enak sih enakkan bubur ayam deh kayanya :D enakkan pake yg css hack kalo menurut gue mah, jadi keliatan mana yg hack & filter punya IE, FF, Opera, IE Mac, Safari, Konqueror dkk. Cayo!!

    Buat IE Mac hacknya pake komen didalem komen, karena rada bug gitu deh, contoh:
    /** /
    #header div.panes a.preferences
    {
    	margin-left: 32px;
    	padding-left: 16px;
    	background: url(../images/icon-preferences.png) left center no-repeat;
    }
    /**/
    

    Biar lebih jelas dan banyak lagi, gue saranin baca buku "Wiley, CSS Hacks and Filters - Making Cascading Stylesheets Work" ato tanya-tanya ke orang yg demen banget SEO ** ngaciiir coy!! **

    Kayanya nih tret ok kalo dijadiin sticky. Om mod-mod stickyin dong ah ;)
  • @tarzilla

    hehey siapa bilang pake input type button
    maksud gw classnya ditarok di hyperlink (kan ada hovernya)

    <a href="#" class="mybutton">Login Donk</a>

    oh iya tapi boleh tuh
    jadi semua input type button langsung mengadopsi style css nya
    ada contoh codenya ga?
  • @badrun
    Gue kirain teh <input>.

    Code? Kalo pake prototype (http://prototype.conio.net) bisa lebih fleksibel.

    Biasa:
    var els = document.getElementsByTagName(&#039;input&#039;);
    var node;
    for (var j=0; j &lt; els.length; j++) {
      var node = els[j];
      if (node.type == &#039;submit&#039; || node.type == &#039;reset&#039; || node.type == &#039;button&#039;) {
        // Tambah class &quot;button&quot; kalo tipenya button, reset atau submit.
        node.className = &#039;button&#039;;
      } else if (node.type == &#039;text&#039;) {
        // Tambah class &quot;text&quot; kalo tipenya text.
        node.className = &#039;text&#039;;
      }
    }
    

    Pake prototype:
    var els = $A(document.getElementsByTagName(&#039;input&#039;));
    els.each (function(node) {
      if (node.type == &#039;submit&#039; || node.type == &#039;reset&#039; || node.type == &#039;button&#039;) {
        // Tambah class &quot;button&quot; kalo tipenya button, reset atau submit.
        Element.addClassName(node, &#039;button&#039;);
      } else if (node.type == &#039;text&#039;) {
        // Tambah class &quot;text&quot; kalo tipenya text.
        Element.addClassName(node, &#039;text&#039;);
      }
    });
    
  • Originally posted by tarzilla
    @yamazaki
    Nah kalo itu ga bisa ditulis didalem tag <style> atau file stylesheet, jadi cuma diHTML doang. Stylesheet kan cuma mengenal komen dengan /* */. Soal enak ga enak sih enakkan bubur ayam deh kayanya :D enakkan pake yg css hack kalo menurut gue mah, jadi keliatan mana yg hack & filter punya IE, FF, Opera, IE Mac, Safari, Konqueror dkk. Cayo!!

    Buat IE Mac hacknya pake komen didalem komen, karena rada bug gitu deh, contoh:
    /** /
    #header div.panes a.preferences
    {
    	margin-left: 32px;
    	padding-left: 16px;
    	background: url(../images/icon-preferences.png) left center no-repeat;
    }
    /**/
    

    Biar lebih jelas dan banyak lagi, gue saranin baca buku "Wiley, CSS Hacks and Filters - Making Cascading Stylesheets Work" ato tanya-tanya ke orang yg demen banget SEO ** ngaciiir coy!! **

    Kayanya nih tret ok kalo dijadiin sticky. Om mod-mod stickyin dong ah ;)

    ohhh begitu ya jeng. *manggut manggut* ntar saya coba cari bukunya. moga2 ada di googlebooks :D
    makasih buat pencerahannya :)

    oia setuju deh nih thread jd sticky :D
  • lg gosipin gue ya?
  • @RisK
    lg gosipin gue ya?
    Ga kok, lagi gosipin pacar barunya si yamazaki san n selingkuhannya si bang badrun. Yoi ga bro?

    Woiii batman sang raja kalong yg demen SEO nongol lagi!! (cocok bgt avatarna) ** ngumpet ah **
  • @yamazaki & @tarzilla

    hmmm.... sticky in forum ini
    tenang aja boy biarpun ga disticky-in
    gw yg bakal jagain biar tetep sticky :D

    atau U2U in aja tuh mas goku
    sang moderator kategori html & css
  • pertanyaan baru

    jujur aja warna yg bagus yg gw tau yg sering gw pake cuma

    abu-abu:#c0c0c0,#f5f5f5
    hitam:#333333

    ada ga warna yg lebih bagus lagi misalnya utk warna hijau atau biru

    terus font dan ukurannya aja
    yg gw sering gw pake paling 10px verdana
    atau 10px/11px arial
    apa lagi ya tipe font yg lebih bagus

    ada yg bisa jelasin dg lengkap ga
    apa itu typografi

    trus utk membuat garis vertical ke bawah
    yg baik pake apa ya
    kalo gw sih ngakalin pake border
    ada alternatif laen ga?
  • Warna? Gue mah gimana mata aja, kalo warna itu idem dimata ya pake.

    10px itu kaya dw ini ya? Gw sih bisa pake 13px Arial, tp kadang pake pt, em dsb, tergantung sikon, gue ga suka yg kecil2 biar ga terlalu lelah mata memandang, tapi ga semuanya sama, ada yg kecil ada yg gede, ya gitu deh. Buat print version pake sans-serif ukuran default.

    Tipografi? Maksutloh? Auk ah ga mudeng soal ini mah :D

    Garis vertikal konteksnya buat apa dulu. Bisa pake border ato background. Toh ga ada pilihan lain kan?
  • eh dsini juga ada banyak materi berbahasa indonesia loh

    http://designworld.master.web.id

    ada warna, css, tipografi
Sign In or Register to comment.