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

2»

Comments

  • Originally posted by badrun
    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?

    hm kalo ini mah udah lebih ke designer taste nya ya :D

    kalo saya sukanya font sans serif yg modern seperti calibri ( font default windows XP ) dan lucida grande ( font macOSX )

    ukuran dan warna menyesuaikan background. kalau background web kita putih, biasanya fontnya berukuran 11px dengan warna #444 - #666 :D

    kalo warna saya pribadi lebih prefer warna2 pastel :cool: lebih lembut di mata dan komposisinya ngga gitu sulit :D
    contoh warna pastel yg saya suka:

    hijau: #C5E8E2
    kuning: #F6F0BC
    biru: #9BDDEE
    merah #F3DEE3

    :D
  • thank's
    ngomong2 kedua font itu tersedia secara default ga di os selainnya
    akan gw inget baik2 warna2nya
    yg laen gmana masih ada koleksi lagi

    oh iya ngomong2 soal font
    ternyata arial bisa dibuat bervariasi dan lebih menarik loh
    dg sedikit sentuhan css

    coba deh liat kesini

    http://designworld.master.web.id/?p=91
  • utk font, kalo bisa hindari pake satuan "px" . Soalnya si bego IE6-, gak bisa ngezoom / resize font yg diset pake px.

    Sebaiknya pake satuan relatif-length spt em, ex, dan/ato %. Gw sih lebih suka pake em, kadang juga pake kombinasi em & %.

    fyi,
    satuan absolute-length yg bisa dipake : in, mm, cm, pt, pc

    satuan relative-length : em, ex, px (secara teknis, px adalah satuan relatif karena sifatnya yg relatif terhadap resolusi monitor)

    satuan relative-size: larger, smaller, %

    satuan absolute-size: xx-small, x-small, small, medium, large, x-large, xx-large
  • @mas_ab

    nah ini dia masukan yg gw harepin
    ok
    terusin lagi

    @yg_lainnya

    aduh keabisan ide gw
    yg laen bantuin tanya2 or kasih trik2
    yg berhubungan dengan layer dan css sih..
  • aq ada format div seperti ini :

    body
    {
    margin:0 auto;
    font-size:14px;
    font-family:verdana;
    }

    .isi_satu
    {
    width:900px;
    margin:0 auto;
    position:absolute;
    padding:2px 0px 2px 0px;
    border:1px solid #003399;
    }

    .isi_blank
    {
    margin:3px;
    padding:3px;
    position:relative;
    border:1px solid #003399;
    }

    html :
    <div class="isi_datu">
    <div class="isi_blank">Cuman coba doank .....</div>
    </div>

    yang jadi masalah, gmana cara agar semua isi yang ditampilin dihalaman web bisa ditengah (center) ....???
    coz kalo aq pake format diatas itu div pada rata ke kiri semua ......

    dah ta coba pake "text-align:center" di bagian bady, tapi koq yang ketengah cuman tulisannya aja ...
    posisi div na masih di kiri ... :[

    tulungin dunk ......
  • <div style="margin-left: auto; margin-right: auto"..
  • Originally posted by khiwie1979

    body
    {
    margin:0 auto;
    font-size:14px;
    font-family:verdana;
    }

    .isi_satu
    {
    width:900px;
    margin:0 auto;
    position:absolute;
    padding:2px 0px 2px 0px;
    border:1px solid #003399;
    }

    .isi_blank
    {
    margin:3px;
    padding:3px;
    position:relative;
    border:1px solid #003399;
    }

    html :
    <div class="isi_datu">
    <div class="isi_blank">Cuman coba doank .....</div>
    </div>

    Mas-mas semua kalo ngelihat kode CSS n HTML diatas, margin-left:auto n margin-right:auto (seperti punya mas hadi) di taruh di CSS / Class yang mana ...???? supaya isi site bisa ke tengah ....
  • ya di element yg mau dibuat ke tengah.
    kalau biasanya paling umum dipasang di div utama alias container

    <div id="container">
    </div>

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

    kalo menurut contoh di atas, kodenya di .isi_satu
    tapi margin-left: auto; margin-right: auto; adalah sama dengan margin: 0 auto;
  • yup pake margin
    jangan lupa pake dtd biar bisa berjalan dg baik di IE6

    <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"; >
    ..
    <style type="text/css">
    #luar{
    width:900px;
    background:yellow;
    }

    #dalam{
    /* diberi lebar agar lebih terlihat ketengahnya */
    width:200px;
    background:blue;
    margin:0 auto;
    }
    </style>
    ..
    <div id="luar">
    <div id="dalam">&nbsp;</div>
    </div>

    tip & trik

    intinya simple hanya dg mempertemukan 2 garis
    garis 1 berwarna lebih terang, garis 2 berwarna gelap
    misalnya garis 1 putih dan garis 2 hitam
    dan dipadukan dg background yg warnanya mungkin lebih cocok warna pastel seperti yg dipakai yamazaki
    disini saya ambil contoh warna background abu2:#c0c0c0

    trik ini akan membuat object yg diberi garis menjadi tampak timbul

    code:
    ...
    <style type="text/css">
    #main{
    width:900px;
    background:#c0c0c0;
    }

    .batang{
    border-bottom:solid #333333 1px;
    border-top:solid #ffffff 1px;
    }
    </style>
    ...
    <div id="main">
    <div class="batang">&nbsp;</div>
    <div class="batang">&nbsp;</div>
    <div class="batang">&nbsp;</div>
    <div class="batang">&nbsp;</div>
    <div class="batang">&nbsp;</div>
    <div class="batang">&nbsp;</div>
    </div>

    question

    gmana caranya utk membuat object yg ada di dlm layer tepat ketengah secara vertical
    gw udah coba pake vertical-align:middle tapi tdk berhasil
    ada yg punya solusi

    tentang ie hack
    ada yg tau link ke referensi, contoh atau tutorialnya ga?
    soal nya gw ga tau sama sekali soal ini

    @tarzilla

    daripada validasi input yg bertipe button utk membedakan text dan button, kenapa ga pake tag button aja biar ga ribet
    '<button type="...">...</button>'
    jadi utk button, cssnya tinggal

    button{
    ...
    }

    dan utk text langsung aja

    input{
    ...
    }

    tapi yg gw heran kenapa ya orang jarang pake tag ini biasanya pada pake '<input type="button" value="..." />'
    tag button ini termasuk standar ga?
  • vertical-align setau gw cuma bisa kalo pake table
  • <!--[if IE]>
    hack you
    <![endif]-->

    <!--[if IE 5]>
    hack you
    <![endif]-->

    <!--[if IE 5.0]>
    hack you
    <![endif]-->

    <!--[if IE 5.5]>
    hack you
    <![endif]-->

    <!--[if IE 6]>
    hack you
    <![endif]-->

    <!--[if IE 7]>
    hack you
    <![endif]-->

    <!--[if gte IE 5]>
    hack you
    <![endif]-->

    <!--[if lt IE 6]>
    hack you
    <![endif]-->

    <!--[if lte IE 5.5]>
    hack you
    <![endif]-->

    <!--[if gt IE 6]>
    hack you
    <![endif]-->

    gt: greater than
    lte: less than or equal to

    <comment>tidak akan tampil di ie</comment>
  • Originally posted by yamazaki
    ya di element yg mau dibuat ke tengah.
    kalau biasanya paling umum dipasang di div utama alias container

    <div id="container">
    </div>

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

    kalo menurut contoh di atas, kodenya di .isi_satu
    tapi margin-left: auto; margin-right: auto; adalah sama dengan margin: 0 auto;

    kalo di container ditambah element
    position:absolute, koq itu div jadi nempel ke kiri trus ...?????
    apa perlu dikasih margin ya ....?????

    sory nanya terus ........
  • koreksi, value vertical-align: bukan middle tapi center

    :)
  • jelas aja karena position: absolute; membuat posisi menjadi absolute alias fix. ditambah dengan properti left: 0;
    diartikan oleh CSS menjadi element ini diposisikan 0 pixel dari pojok kiri.
    makanya nempel di pojokan :D
  • tips

    biar layer/objek nempel ke kiri atas dokumen
    giniin

    body{
    margin:0;
    }

    @yamazaki

    weks
    vertical-align:middle donk...
    liat ksini
    http://www.w3schools.com/css/css_positioning.asp

    hadi_mulyadi

    thanks ie hack yg cukup lengkap, paham deh

    kalo masih ada
    lengkapin lagi dong temen2..

    btw
    gw masih menunggu jawaban
    pertanyaan2 gw yg belun terjawab
    termasuk pertanyaan yg lama :D
  • hmmm gw coba di opera ga jalan tuh ... :D
    kayaknya gw ga jodoh sama vertical-align deh. gw coba ga pernah bisa mlulu :D
  • Originally posted by hadi_mulyadi
    vertical-align setau gw cuma bisa kalo pake table

    dibilangin gak percaya
  • hehehe
    pecaya pecaya
    tapi dicoba2 dulu siapa tau bisa di yg laen
    kalo gitu kasih solusi donk gmana biar bisa pas ditengah secara vertikal

    tips: dropcap di css

    code:
    ...
    <style type="text/css">

    .dropcap{
    width:400px;
    font:10px verdana;
    }

    .dropcap:first-letter{
    font:48px verdana;
    float:left;
    padding-right:4px;
    }

    </style>
    ...
    <div class="dropcap">
    Text content yang panjang sebagai contoh content dari suatu halaman web.
    Text content yang panjang sebagai contoh content dari suatu halaman web.
    Text content yang panjang sebagai contoh content dari suatu halaman web.
    Text content yang panjang sebagai contoh content dari suatu halaman web.
    Text content yang panjang sebagai contoh content dari suatu halaman web.
    Text content yang panjang sebagai contoh content dari suatu halaman web.
    Text content yang panjang sebagai contoh content dari suatu halaman web.
    </div>
    ...

    sebenarnya intinya cuma dg menggunakan pseudo elements :first-letter
    pseudo elements ini akan memformat huruf pertama dari text yg memiliki classnya
    ditambah dg float:left yg membuat text menempel kekiri agar tidak terlihat toggle

    keterangan lebih lanjut tentang pseudo elements:
    http://www.w3schools.com/css/css_pseudo_elements.asp
  • @yamazaki
    jeng tar, itu udah pernah saya post kok.
    di IE ada filternya buat support PNG transparant. ntar saya googling bentar

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

    materinya kosong tuh di link itu
    bisa dijelasin ga gmana supaya png transparan di IE?
    garis besarnya aja juga gpp
  • Originally posted by badrun

    materinya kosong tuh di link itu
    bisa dijelasin ga gmana supaya png transparan di IE?
    garis besarnya aja juga gpp

    manfaatin fitur sret-nya, ketemu http://www.entropy.ch/blog/?query=PNG&x=0&y=0
  • nah tu dia ketemu
    thank's mas Yeni..

    gw ada pertanyaan lagi nih
    karna gw biasa pake table
    biasanya kalo gw isi tuh kolom table pake image "<img src=... />"
    maka kolom tersebut menyesuaikan dg besar image tersebut
    tapi kalo di dlm div
    divnya ga mengikuti tinggi image
    sementara kalo diisi text dia mau menyesuaikan
    jadinya kalo gw buat div yg berisi text dan image bertumpuk
    maka isinya bisa melenyot2 kalo tinggi image tidak sesuai

    ex.
    <div><img src="..." /> text yg panjang... </div>
    <div><img src="..." /> text yg panjang... </div>
    <div><img src="..." /> text yg panjang... </div>

    nah kalo tinggi imagenya sesuai dg tinggi div ga masalah
    tapi kalo imagenya melebihi tinggi div
    ya berantakan semua
    beda kalo di dlm "<td>" yg selalui menyesuaikan tingginya
    ga peduli apapun isinya mau image atau yg lain

    gmana ya solusinya?
  • saya biasanya menggunakan fixed width ato height utk div yg saya pakai.

    sedang utk mencegah gambar melebihi lebar/tinggi div adalah menggunakan css:

    #namadiv{
    width:500px;
    height:800px;
    }
    #namadiv img{
    max-width:450px;
    }

    tapi tentu saja penggunaan max-width tsb tidak akan berfungsi jika browser yg dipakai adalah IE 6 kebawah, IE 7 dah bisa.
  • thank's masukannya

    tapi kalo pake max-width/max-height ukuran imagenya
    ntar ga sesuai aslinya donk...
    kalo lebar/tinggi imagenya melebihi batas
    tapi gpp-lah daripada kacau

    oh iya fixed width/height itu apa sih?
  • cuma istilah aja, fix itu seperti 800px atau 800em dsb, sedang yang gak fix ya seperti 50%
  • Hanya info semata http://centricle.com/ref/css/filters/.

    Semoga bermanfaat,
  • sekedar info juga
    http://www.phong.com

    cari inspirasi seorang desainer
    waktu itu gw pernah ktemu POGD (Principle Of Graphic Design)
    udah gw download
    isinya presentasi flash tentang teori pewarnaan, typografi, dll
    kalo ktemu linknya kasih tau ya...
    siapa tau bermanfaat utk mencari inspirasi dlm css

    btw, tred ini langsung kelip gini
    padahal baru gw tinggal berapa hari
    wadoh temen2 testi donk :D
  • yang jelas kalau untuk tiap browser bakal beda2 ngerendernya karena acuannya belum ada yang yg standart.

    jadi kalau aku nyaranin untuk ngedesain pertama kali pake firefox, ntar dari firefox ke netscape gak jauh beda, ke opera ada perbedaan sedikit, ke ie baik ie5/6 agak beda. nah ie 5/6 baru disesuaikan lagi. seperti postingnya mas hadi code css-nya di"hack".

    di ie misalnya margin 5px ama di di mozila beda ukuran.

    kalau aku mendingan pake semacam script atau apalah yg membedakan browser jadi kalau dia pake ie.x loading css yg ini, kalau pake firefox loading css yg itu.
  • "..yang jelas kalau untuk tiap browser bakal beda2 ngerendernya karena acuannya belum ada yang yg standart.."

    selamat datang dan bergabung di dunia dokumen web, pastikan untuk mengunjungi w3c.org

    mozilla dan ie, yang satu merasa kalo padding itu berarti menambah space ke luar yang satu lagi merasa berarti mengurangi space ke dalam

    kalo aku kerja gak ada yang mana yang dicoba dulu, semua browser ini masing2 dibuka:
    ff 1.05
    ie 5.5 kompi & ie 6.0 laptop
    ns 7 kompi & ns 8 laptop
    opera 8 saja

    kenapa cuma browser2 itu?, maap2 aja bukannya menganaktirikan browser lain, tapi aku berpedoman pada trend statistik pengunjung situs2 ku dan tentu saja statistik browser dunia

    kalo css kita valid tentu saja lebih aman di browser manapun

    - w3c membuat draft
    - developer browser mengikuti w3c
    - saya mengikuti w3c
    = browser & produk saya selaras
  • bukan-nya mana yg harus di buka dulu, tapi untuk memudahkan desain layout aku udah biasa ama aturannya firefox dan lagian dari firefox ke netscape dan opera gak jauh2 amat beda tampilannya, ntar dari ie baru aku coba pake ie 5 dan 6..... karena ie 5 dan 6 juga beda.
    Makanya w3c itu ada untuk membuat standarisasi web agar seragam, tapi emang belum kesampaian.
  • buat semuanya...
    mau nanya nich...
    cz binggung mau nanya siapa lgi
    he...he...he. :D

    kalau gunain float,otomatis Tag html yg d kasih float akan posisinya berada di atas.

    ex.

    #posting{
    float:none
    }

    #Sidebar{
    float:right;
    }

    nah permasalahanya di bawah nya Div posting dan Sidebarkan ada Footer.Jadi sidebar posisinya menimpa/menutupi Footer karena sudah d Float,kemudian panjang kebawah jika isinya panjang.
    gimana cranya y' footer tadi berada tepat di bawah sidebar secara otomatis walau panjang sidebar berbeda dgn posting.

    kalau posting yg panjang oke lah footernya otomatis k bawah,tpi kalau sidebar yg panjang dri posting gimana soslusinya...?

    thanks udah baca curhatku yg sdikit ini. :D
  • buat semuanya...
    mau nanya nich...
    cz binggung mau nanya siapa lgi
    he...he...he. :D

    kalau gunain float,otomatis Tag html yg d kasih float akan posisinya berada di atas.

    ex.

    #posting{
    float:none
    }

    #Sidebar{
    float:right;
    }

    nah permasalahanya di bawah nya Div posting dan Sidebarkan ada Footer.Jadi sidebar posisinya menimpa/menutupi Footer karena sudah d Float,kemudian panjang kebawah jika isinya panjang.
    gimana cranya y' footer tadi berada tepat di bawah sidebar secara otomatis walau panjang sidebar berbeda dgn posting.

    kalau posting yg panjang oke lah footernya otomatis k bawah,tpi kalau sidebar yg panjang dri posting gimana soslusinya...?

    thanks udah baca curhatku yg sdikit ini. :D
Sign In or Register to comment.