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!
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 ... :[
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 ....
#dalam{
/* diberi lebar agar lebih terlihat ketengahnya */
width:200px;
background:blue;
margin:0 auto;
}
</style>
..
<div id="luar">
<div id="dalam"> </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
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
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?
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
</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
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
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
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
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.
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...?
buat semuanya...
mau nanya nich...
cz binggung mau nanya siapa lgi
he...he...he.
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...?
Comments
hm kalo ini mah udah lebih ke designer taste nya ya
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
kalo warna saya pribadi lebih prefer warna2 pastel :cool: lebih lembut di mata dan komposisinya ngga gitu sulit
contoh warna pastel yg saya suka:
hijau: #C5E8E2
kuning: #F6F0BC
biru: #9BDDEE
merah #F3DEE3
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
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
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..
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 ......
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 ....
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;
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"> </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"> </div>
<div class="batang"> </div>
<div class="batang"> </div>
<div class="batang"> </div>
<div class="batang"> </div>
<div class="batang"> </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?
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>
kalo di container ditambah element
position:absolute, koq itu div jadi nempel ke kiri trus ...?????
apa perlu dikasih margin ya ....?????
sory nanya terus ........
diartikan oleh CSS menjadi element ini diposisikan 0 pixel dari pojok kiri.
makanya nempel di pojokan
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
kayaknya gw ga jodoh sama vertical-align deh. gw coba ga pernah bisa mlulu
dibilangin gak percaya
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
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
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?
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.
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?
Semoga bermanfaat,
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
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.
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
Makanya w3c itu ada untuk membuat standarisasi web agar seragam, tapi emang belum kesampaian.
mau nanya nich...
cz binggung mau nanya siapa lgi
he...he...he.
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.
mau nanya nich...
cz binggung mau nanya siapa lgi
he...he...he.
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.