2082 Posts in 489 Topics- by 822 Members - Latest Member: HJS798

Pages: [1]   Go Down
  Print  
Author Topic: buat coding buat coding HTML CSS 3 Coloum  (Read 4002 times)
dulzaja
phpBB Guru
*
Offline Offline

Posts: 6

gadul_46
View Profile Email
« on: May 13, 2009, 04:00:36 AM »

assalamu'alaikum.wr.wb.

oia...bagi temen-temen yang tau gimana html-nya untuk buat content kanan dan kiri tanpa menggunakan tabel??
jadi intinya bagian kiri tersendiri dan kanan juga tersendiri...kalau pake tabel kan jadi satu...
nah solusinya itu gimana??? :?

makasih... Smiley
wassalamu'alaikum.wr.wb.
Logged
webmaster
Administrator
phpBB Guru
*****
Offline Offline

Posts: 924


hairulazami
View Profile WWW
« Reply #1 on: May 14, 2009, 03:29:04 AM »

CSS Style:

Code:
<style media="all" type="text/css">
html { height: 100%;margin-bottom: 1px; }
body { margin:10px;font-family: Arial;font-size: 80%;line-height: 135%;background:#666; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
.clr { clear: both; }
#container { width:886px; margin: auto; }
#header { background-color: #F90; height: 150px; }
#content { background-color: #690; width: 586px; min-height:200px; }
#sidebar_left { background-color: #060; width: 150px; min-height:200px; }
#sidebar_right { background-color: #6C0; width: 150px; min-height:200px; }
#footer { background-color: #FFC142; text-align:center; height:59px; padding-bottom:68px; }
.float { float: left; }
.clear { clear: both; }
</style>

HTML Code:
Code:
<div id="container">
<div id="header">
    HEADER
    </div>
   
    <div id="sidebar_left" class="float">
    LEFT
    </div>
   
    <div id="content" class="float">
    CONTENT
    </div>
   
    <div id="sidebar_right" class="float">
    RIGHT
    </div>
   
    <div id="footer" class="clear">
    FOOTER
    </div>
</div>

Full Code
Code:
<!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>HTML CSS 3 Coloum by dr.emi</title>
<style media="all" type="text/css">
html { height: 100%;margin-bottom: 1px; }
body { margin:10px;font-family: Arial;font-size: 80%;line-height: 135%;background:#666; }
a { text-decoration: none; }
a:hover { text-decoration: none; }
.clr { clear: both; }
#container { width:886px; margin: auto; }
#header { background-color: #F90; height: 150px; }
#content { background-color: #690; width: 586px; min-height:200px; }
#sidebar_left { background-color: #060; width: 150px; min-height:200px; }
#sidebar_right { background-color: #6C0; width: 150px; min-height:200px; }
#footer { background-color: #FFC142; text-align:center; height:59px; padding-bottom:68px; }
.float { float: left; }
.clear { clear: both; }
</style>
</head>

<body>
<div id="container">
<div id="header">
    HEADER
    </div>
   
    <div id="sidebar_left" class="float">
    LEFT
    </div>
   
    <div id="content" class="float">
    CONTENT
    </div>
   
    <div id="sidebar_right" class="float">
    RIGHT
    </div>
   
    <div id="footer" class="clear">
    FOOTER
    </div>
</div>
</body>
</html>

Preview Page:
http://www.csslovers.co.cc/online-view/ ... -3col.html
Logged


dulzaja
phpBB Guru
*
Offline Offline

Posts: 6

gadul_46
View Profile Email
« Reply #2 on: May 14, 2009, 04:47:43 AM »

sip...sip...langsung menuju TKP pak dokter... Cheesy

makasih... :)
Logged
webmaster
Administrator
phpBB Guru
*****
Offline Offline

Posts: 924


hairulazami
View Profile WWW
« Reply #3 on: June 16, 2009, 11:29:19 AM »

woke woke, mahap baru bales Cheesy:D:D
Logged


N4ck0
phpBB Guru
*
Offline Offline

Posts: 4


View Profile Email
« Reply #4 on: June 22, 2009, 09:32:12 PM »

wahh nice om
thx for share
Logged
Pages: [1]   Go Up
  Print  
 
Jump to: