1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

Tutorial: Membuat Tableless Layout Dengan CSS

Discussion in 'Desain Web & Grafis' started by Tom-182, Mar 14, 2007.

Page 1 of 3
  1. Tom-182

    Tom-182 Super Hero

    Joined:
    Mar 22, 2006
    Messages:
    1,272
    Likes Received:
    46
    Karena kmaren ada yg bikin thread tentang tableless design, akhirnya gue putusin bikin contoh design tableless menggunakan CSS. Mudah2an membantu & bisa memberi gambaran :).

    index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/url]
<html xmlns="[url]http://www.w3.org/1999/xhtml">[/url]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tutorial: Tableless Layout With CSS</title>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

<body>
<div id="container">
	<div id="header"> Ini headernya lhoo..</div>
	<div id="content">
		<div id="leftcol">
		 <p>Nah ini kolom sebelah kiri</p>
		 <h1>Tes tag &lt;h1&gt;  </h1>
		 <h2>Tes Tag &lt;h2&gt;</h2>
		 <blockquote>
		  <p>Ini buat tes &lt;blocquote&gt;</p>
	   </blockquote>
		</div>
		<div id="rightcol">
		Nah kalo yg ini yg sebelah kanan
		</div>
	</div>
	<div id="footer">
	Akhirnya, ini footernya..
	</div>
</div>
</body>
</html>
    style.css
    Code:
    body {
	font: 80% Arial, Helvetica, sans-serif;
	background: #fff;
	margin: 0 auto;
	text-align: center;
	padding: 0;
}

h1 {
	font: 2.0em Georgia, "Times New Roman", Times, serif;
}

h2 {
	font: 1.8em Georgia, "Times New Roman", Times, serif;
}

blockquote {
	width: auto;
	height: auto;
	padding: 0.2em;
	margin: 0.4em;
	background: #CC6600;
	font: 1.4em "Courier New", Courier, mono;
	color: #fff;
}

#container {
	width: 100%;
	text-align: left;
}

#header {
	width: 99%;
	height: 50px;
	background: #999;
	border-bottom: 2px solid #DEDEDE;
	padding: 0.4em;
	margin-bottom: 0.2em; 
}

#content {
	width: 100%;
	background: #666;
	margin: 0;
	padding: 0;
}


#leftcol {
	float: left;
	width: 79%;
	height: 400px;
	padding: 0.4em;
	background: #CCCC33;
}

#rightcol {
	float: left;
	width: 19%;
	height: 400px;
	padding: 0.4em;
	background: #99CC00;
}

#footer {
	float: left;
	clear: both;
	width: 99%;
	height: 20px;
	background: #ccc;
	border-top: 2px solid #999;
	padding: 0.4em;
	margin-top: 0.3em;
}
     
    Tom-182, Mar 14, 2007
    #1
  2. Radian

    Radian Super Hero

    Joined:
    Aug 11, 2006
    Messages:
    1,780
    Likes Received:
    7
    Hebaat neeh... tutorial lengkap yg user-friendly.... thanks!

    Mo dicoba deh... ::)
     
    Radian, Mar 14, 2007
    #2
  3. the9squad

    the9squad Ads.id Starter

    Joined:
    Mar 13, 2007
    Messages:
    96
    Likes Received:
    0
    eh adminnya siapa disini ? belom kenal :D :D, siapa kek.

    ni topic di merge aja ma postingan gw OK ?
     
    the9squad, Mar 14, 2007
    #3
  4. Radian

    Radian Super Hero

    Joined:
    Aug 11, 2006
    Messages:
    1,780
    Likes Received:
    7
    iya... ::)

    biar gak acak-acakan neeh...
     
    Radian, Mar 14, 2007
    #4
  5. Tom-182

    Tom-182 Super Hero

    Joined:
    Mar 22, 2006
    Messages:
    1,272
    Likes Received:
    46
    Kalo bisa sih biarin aja kaya' gini. Kan emang di sini forum khusus buat nampung semua thread Web & Graphic Design ;).

    Gue udah nyiapin tutorial baru bikin form web 2.0ish yg simple pake CSS, sebelumnya udah gue tulis di situs tips gue pake bahasa inggris. Nanti tgl di translate ulang aja ;D
     
    Tom-182, Mar 14, 2007
    #5
  6. bowoekowidodo

    bowoekowidodo Guest

    Klo nurut aq mending buat html trus kita buat masing masing design. Ya kayak zenggarden tapi versi adsense-id. Dulu di diskusiweb mo buat tapi blm jadi. Trus klo ada yang gunain design harus ngasih link (cari backlink:D)
     
    bowoekowidodo, Mar 14, 2007
    #6
  7. masery

    masery Super Hero

    Joined:
    Aug 3, 2006
    Messages:
    1,567
    Likes Received:
    3
    yang susah CSS tuh numpuk2 desain biar kayak profesional website template dari monster...
     
    masery, Mar 14, 2007
    #7
  8. gtc50

    gtc50 Newbie

    Joined:
    Sep 13, 2006
    Messages:
    13
    Likes Received:
    0
    makasih tutornya mas TOM-182, jadi lbh mudah nich klo ada kebetan... ;D...btw, ada nga cara buat link menu yg external file, supaya klo buat page baru tinggal update file link menunya aja..., trims. ;D
     
    gtc50, Mar 22, 2007
    #8
  9. rayofshadow

    rayofshadow Hero

    Joined:
    Nov 18, 2005
    Messages:
    583
    Likes Received:
    3
    Location:
    Jogja
    maksutnya gimana ini? buat link yg kebukkanya new windows atau gimana?
     
    rayofshadow, Mar 22, 2007
    #9
  10. gtc50

    gtc50 Newbie

    Joined:
    Sep 13, 2006
    Messages:
    13
    Likes Received:
    0
    maksudnya kaya css gitu, tinggal ubah file css langsung ubah seluruh design pagenya. klo link gimana yaa... soalnya klo buat web aku pake dreamweaver biasanya kan secara offline, trus klo mau upload ke hostnya aku hrs hapus dulu semua file di host, baru upload file yg baru. baru semua link dipage lama keupdate semua. klo seperti css kan tinggal ganti file cssnya aja. makasih...
     
    gtc50, Mar 22, 2007
    #10
  11. rayofshadow

    rayofshadow Hero

    Joined:
    Nov 18, 2005
    Messages:
    583
    Likes Received:
    3
    Location:
    Jogja
    loh kok musti di hapus, bukannya otomatis akan ditanya mau di replace atau ndak, tinggal yes aja kan otomatis file di host yg lama akan di replace dengan yg baru.

    terus apa hubungannya upload dengan yg baru dengan link di page lama akan terupdate semua (*makin bingung*)
     
    rayofshadow, Mar 22, 2007
    #11
  12. ajemanis

    ajemanis Ads.id Pro

    Joined:
    Feb 27, 2007
    Messages:
    265
    Likes Received:
    1
    kenapa gak pada pake cms aja sih :)
    kan tinggal ganti theme udah beres?
    udah gitu, kita bisa fully modify it kan? jadi gak perlu report2 untuk ngasih script biar support rss, friendly url, security guarantee, bug analyse.. semuanya jadi udah tersedia kalo pake cms.
    tinggal kita bikin theme sendiri atau edit/modify yang udha ada aja deh ;)
     
    ajemanis, Mar 22, 2007
    #12
  13. gtc50

    gtc50 Newbie

    Joined:
    Sep 13, 2006
    Messages:
    13
    Likes Received:
    0
    hmmm gimana yaaa.. misalkan aku punya web dgn 3 page : index, p1 dan p2.
    dipage index ada link ke p1 &p2
    di p1 jg ada link ke p2, index
    di p2 jg ada link ke p1 , index

    misal aku tambah artikel lg, misalkan p3 berarti aku hrs tambah/update link di index,p1, p2. klo aku cuma upload file p3 aja, maka link utk p3 tidak ada di p1,p2,index. tapi di p3 ada link utk p1,p2,index.. apa cara aku yg salah yaaa... mohon pencerahan, mas Rayofshadow ,dkk thanks. ;D
     
    gtc50, Mar 22, 2007
    #13
  14. rayofshadow

    rayofshadow Hero

    Joined:
    Nov 18, 2005
    Messages:
    583
    Likes Received:
    3
    Location:
    Jogja
    woalahhhh.....
    ngarti sekarang :D ini buatnya manual pake html to? bukan pake php atau CMS (Content Management System) kalo pake PHP (programming) atau CMS kamu ndak perlu repot repot bikin halaman baru lainnya, lha kalo 100 halaman mau gimana coba :p
    coba baca baca di bagian CMS itu, banyak tutor disitu juga penggunaan macemmacem CMS lainnya.

    kalo memang mau manual begitu ya bisa saja hanya perlu edit satu file aja, dengan file PHP nanti di includkan file yg ada bagian bagian menunya (misal menu.php), jadi kalo update atau nambah halaman tinggal di update file menu.php tadi.
     
    rayofshadow, Mar 22, 2007
    #14
  15. gtc50

    gtc50 Newbie

    Joined:
    Sep 13, 2006
    Messages:
    13
    Likes Received:
    0
    ooo,.... makasih banyak mas atas bantuannya.... ;D
     
    gtc50, Mar 23, 2007
    #15
  16. ajemanis

    ajemanis Ads.id Pro

    Joined:
    Feb 27, 2007
    Messages:
    265
    Likes Received:
    1
    kalo bisa dibikin gampang, kenapa harus dipersulit toh mas :)
    nah gitu kan enak, wong CMS gratisan ini :)
     
    ajemanis, Mar 23, 2007
    #16
  17. yudhis97

    yudhis97 Super Hero

    Joined:
    Dec 20, 2005
    Messages:
    2,438
    Likes Received:
    16
    Location:
    Jogja
    @ajemanis cms macam joomla kan make kayak ginian, emang template nggak pake html dan css
    tableless kan disukai search engine walaupun beberapa kekuranganya (kalo saya fully tableless susah).
     
    yudhis97, Mar 23, 2007
    #17
  18. the9squad

    the9squad Ads.id Starter

    Joined:
    Mar 13, 2007
    Messages:
    96
    Likes Received:
    0
    wkekkeke,

    udah pada pro soal desain-mendesain yah member2 disini ;D !

    GJ!
     
    the9squad, Mar 23, 2007
    #18
  19. the9squad

    the9squad Ads.id Starter

    Joined:
    Mar 13, 2007
    Messages:
    96
    Likes Received:
    0
    kalo pengen bikin banyak halaman pke database aja dong ;)
     
    the9squad, Mar 23, 2007
    #19
  20. ajemanis

    ajemanis Ads.id Pro

    Joined:
    Feb 27, 2007
    Messages:
    265
    Likes Received:
    1
    makanya, biar gak susah pake cms aja mas :)
    kalo cms sekarang kan hampir semua udah gak pake table. tapi.. ngomong-ngomong, forum kita ini kan pake SMF ya? padahal SMF itu kan masih pake table :D
     
    ajemanis, Mar 23, 2007
    #20
Page 1 of 3

Share This Page