|
Nuriil
|
 |
« on: November 10, 2008, 08:21:45 PM » |
|
Met Mlm Dr Emi saya Member baru nih disini, :wink: o iy Dr emi saya mau bertanya donk , gmn cara membuat table di html pakai css style.. tapi membuat tablenya itu gak kotak-kotak di bagian pinggirnya, tetapi agak tumpul-tumpul bgitu.. saya coba gambarkanb di photoshop pak dokter.. trus sy upload, sperti ini gambarnya...  sekiranya seperti tu pak DOkter.. Mohon Pencerahannya ..dan bagaimana source codenya...  Sekiranya Terima Kasih banyak!! Maju Terus pak DOkter Emi!!!!!!!!! |
|
|
|
|
Logged
|
|
|
|
|
webmaster
|
|
« Reply #1 on: November 12, 2008, 03:48:00 AM » |
|
cobain style css ini: <style type="text/css">
#boxDiv
{
margin:0px;
padding:0px;
position:absolute;
width:197px;
float:left;
}
#boxDiv h2
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background:url("images/kopi-hari-ini_01.gif") 0 0 no-repeat;
width:117px;
height:26px;
padding-left:80px;
padding-top:16px;
margin:0px;
}
#boxDiv .content
{
background:url("images/kopi-hari-ini_02.gif") 0 0 repeat-y #000000;
width:177px;
padding:10px;
margin:0px;
}
#boxDiv p
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
margin:0px;
padding:0px;
}
#boxDiv .bottom
{
background:url("images/kopi-hari-ini_04.gif") 0 0 no-repeat;
width:197px;
height:15px;
}
</style> ni HTML na: <!--just to cover all size box--> <div id="boxDiv"> <!--start the title--> <h2>Todays Cofee</h2> <!--start the content--> <div class="content"> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> <p>this is a content about cofee .... </p> </div> <!--start the bottom--> <div class="bottom"></div> </div> Preview Hasilna disini: http://www.csslovers.co.cc/online-view/ ... style.htmlselamat mencoba |
|
|
|
|
Logged
|
|
|
|
|
bochan
|
|
« Reply #2 on: November 13, 2008, 12:51:25 PM » |
|
Klo ga salah khusus bwt mozilla mania bisa lebih simple ya omz ?! -moz-border-radius : ..px ; dll ky -...-topleft,-topright ( 0 0 0 0 :lol: btw pakabar dr.emi..?! ngiringan gabung deui ah...  |
|
|
|
|
Logged
|
|
|
|
|
webmaster
|
|
« Reply #3 on: November 13, 2008, 12:57:32 PM » |
|
yap bner banget, code itu memang bisa, tapi disni yg ditanyakan nyang make background gambar  |
|
|
|
|
Logged
|
|
|
|
|
webmaster
|
|
« Reply #4 on: November 13, 2008, 01:05:04 PM » |
|
ni contoh nya: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #roundedBorder { -moz-border-radius : 10px 10px 10px 10px ; background: #CCCCCC; height:300px; padding:10px 20px 10px 20px; } </style> </head> <body> <div id="roundedBorder">test</div> </body> </html> dan ini: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> #roundedBorder { -moz-border-radius : 10px 10px 10px 10px ; background: #CCCCCC; height:300px; padding:10px 20px 10px 20px; } #hbox { border: 10px solid #000000; width: 300px; height: 300px; /* the border will curve into a 'D' */ -moz-border-radius: 10px 200px 200px 10px; } .spacer { margin-bottom:20px; } </style> </head> <body> <div id="roundedBorder">test</div> <div class="spacer"></div> <div id="hbox">test</div> </body> </html> penulisan style yg sama dapat digabung, kayak padding:10px 20px 10px 20px; dalam CSS ini dinamakan Semantic Code, untuk menghemat beban browser saat mendecode HTML na |
|
|
|
|
Logged
|
|
|
|
|
bochan
|
|
« Reply #5 on: November 13, 2008, 01:20:05 PM » |
|
yap bner banget, code itu memang bisa, tapi disni yg ditanyakan nyang make background gambar :zensur: ) omz.. kirain tinggal : background : #000 ; :? ) IE Sama browser lain dimana aja seh dr.emi ? biar kan sering kejadian dibrowser MoZ--> ok, OP--> ok...IE ?--> ANCUR... :motz: biar Firefox favorite ttp aja IE msh da yg pake... truz klo <!--[if lt IE x]> blabla.. ato IE Hack emang kbaca "IE Sini donk..  " apa cuma statement aja? |
|
|
|
|
Logged
|
|
|
|
|
webmaster
|
|
« Reply #6 on: November 13, 2008, 01:29:19 PM » |
|
perbnyak mencoba ntar juga ketauan perbedaan IE dan MOZ pada style CSS na, misalakn yang paling gw alamin adalah Padding dan margin.
untuk yang ini <!--[if lt IE x]>, memang ada yg seperti itu, artinya style yang bersangkutan akan mengkover objek pada saat di running pada IE saja misalkan. Tapi kalo di MoZ udah tentu ga perlu make style yg dimaksud.
|
|
|
|
|
Logged
|
|
|
|
|
bochan
|
|
« Reply #7 on: November 13, 2008, 01:40:17 PM » |
|
Owh.... :idea:
OK..OK Musti sering-sering "general checkup" neh ke dr.emi tp ga pake suntik-suntikan ya... :arrow:
thx...
|
|
|
|
|
Logged
|
|
|
|
|
webmaster
|
|
« Reply #8 on: November 13, 2008, 01:52:40 PM » |
|
hoke mbro, slama gw masih bisa ngetik dan berfikir, gw bakalan ngasi tutor trus |
|
|
|
|
Logged
|
|
|
|
|
Nuriil
|
|
« Reply #9 on: November 13, 2008, 05:36:51 PM » |
|
Makasi bnyak Dokter Emi...  , tuh contoh k2 dan 3 bagus buat tabel" sderhana, tapi yg saya bingung itu kan untuk mozilla, lalu bagaimana tuk IE?? apa yg harus sy ubah?? lalu Hack CSs itu apa ya pak?? mohon pencerahannya, lalu kira" saya harus masuk tempat yg mana untuk bertanya ttg hack css itu di forum dremi. Thanks ya buat semuanya !!! |
|
|
|
|
Logged
|
|
|
|
|
webmaster
|
|
« Reply #10 on: November 13, 2008, 06:25:38 PM » |
|
contoh -moz-border-radius : 10px 10px 10px 10px ; jarang ada yang make oleh developper web, karena ga support untuk IE, hanya untuk MOZILLA, sedangakn HACK IE itu hanya istilah, bagaimana membuat code css untuk menghandle beberapa kondisi pembuatan style, tergantung dari style yang lu buat, agar bisa di load secara baik di IE maunpun di MOZILLA. kalo mao tanya ya disini juga boleh, kan udah jelas bukan yang bakalan kamu tanyakan adalah berupa "pertanyaan" dan membahas "CSS"  |
|
|
|
|
Logged
|
|
|
|
|
Nuriil
|
|
« Reply #11 on: November 13, 2008, 08:51:06 PM » |
|
Waah makasi nih pak dokter, hehehehe jd tag enak sy jd merepotkan... yasuda nanti sy coba desain halaman web dulu, nanti jika ad error dan g jalan di salah 1 browser sy baru akan minta tolong disini, nanti sy posting source code nya. Thanks y pak dokter  |
|
|
|
|
Logged
|
|
|
|
|
aby
|
|
« Reply #12 on: April 28, 2009, 02:20:18 PM » |
|
waaaah hebat ngomongnya udah pada keren2 ya eummm , , , gw bru masuk nih alias nak baru di sini hehehe mohon bimbingan nya ya para master terutama sama mbah dokter , , , gw baru belajar html ma css nih, baru mau banget alias blank banget .  kali aja disini ada tutor html buat yang bego banget kayak gw? mohon bantuannya , , , salam kenal semuach nyah , , , |
|
|
|
|
Logged
|
belajar terooooooooooooooooos tetep bodoh
|
|
|
|
N4ck0
|
|
« Reply #13 on: June 22, 2009, 09:38:44 PM » |
|
wah banyak banget yah ilmu disini
|
|
|
|
|
Logged
|
|
|
|
|
webmaster
|
|
« Reply #14 on: June 23, 2009, 01:51:32 AM » |
|
sebetulnya banyak, tapi biasanya pada males nyari....  |
|
|
|
|
Logged
|
|
|
|
|
