CSS Layout dengan Float
Contoh dibawah ini kita akan membuat suatu laman dengan membagi layer menjadi kolom, dengan
tampilan laman sebagai berikut:
Buat laman css dengan nama float.css, dengan coding seperti dibawah ini:
*{
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 15px;
}
.bg-tomato {
background-color: tomato;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
Buat laman web dengan nama float-01.htm, dengan coding sebagai berikut:
<!DOCTYPE html>
<html>
<head>
1|P age
<link rel="stylesheet" type="text/css" href="float.css">
</head>
<body>
<h2>CSS Layout Dengan Float</h2>
<p>Box mengapung secara berjajar:</p>
<div class="clearfix">
<div class="kontainer">
<div class="box bg-tomato" >
<p>Teks dalam box. jhsdjfhdsk fhdsk fhsdkfhsdf hdsjfhdsjfh dsjf hsdsdjf hdsjfhsdjf hsdjf hsdjf
hsdjhdsj dsjfhsdsdj dsjfhsdsdjf sdjf hsdjfh sdsdjf hsdsdj ffh dsdj fhfgfhfh sg fj g sdjfg dsfgsdd sffgdsh
fgdfgg dshfgdsh g dsh g dsfg dshfg dsfhg </p>
</div>
<div class="box" style="background-color:#ccc">
<p>Teks dalam box. dshfdshfjsdhjsdfhdjsfh jdsfh dsjh djs hsdj hdjs hsdj hsdj hdjs hdjs hdjs dsj
dsj</p>
</div>
<div class="box" style="background-color:#ddd">
<p>Teks dalam box.</p>
</div>
</div>
</div>
<p>Perhatikan code ini juga menggunakan clearfix hack untuk menangani flow layout, dan juga
menambahkan properti box-sizing untuk memastikan bahwa box tidak rusak karena penambahan
padding. Coba hapus kode box-sizing untuk melihat efeknya.</p>
</body>
</html>
2|P age
Contoh membuat laman dengan dua kolom dengan menggunakan CSS Layout
Float
Membuat laman web dengan hasil sebagai berikut :
Buat file baru dengan nama tes.cc, kemudian ketik CSS dibawah ini:
.kontainer {
width: 1000px;
margin: 20px auto;
font-family: Tahoma;
}
.kolom1 {
background-color: tomato;
float: left;
width: 48%;
height: 250px;
padding: 10px;
}
.kolom2 {
background-color: darkgray;
float: left;
width: 48%;
padding: 10px;
height: 250px;
}
.clear {
clear: both;
}
3|P age
Buat file baru dengan nama tes.htm, sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tes</title>
<link rel="stylesheet" type="text/css" href="tes.css">
</head>
<body>
<div class="kontainer">
<div>
<img src="AKDS.png" width="150">
<img src="PLB150.png" width="200" style="float: right;">
</div>
<div class="kolom1">
<h2> Apa yang dimaksud dengan Web Site?</h2>
<p>
Website adalah kumpulan halaman yang berisi informasi tertentu dan dapat diakses
dengan mudah oleh siapapun, kapanpun, dan di manapun melalui jaringan internet.
Sebuah situs web (sering disebut juga web site, site) adalah sebutan bagi
sekolompok halaman web (web page), yang umumnya merupakan bagian dari suatu
nama domain (domain name) atau sub domain di World Wide Web (WWW)
</p>
</div>
<div class="kolom2">
<h2>Apa itu HTML?</h2>
<p>
HTML merupakan singkatan dari Hypertext Markup Language, yaitu bahasa markup
standar untuk membuat dan menyusun halaman dan aplikasi web yang kemudian
dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah
web Internet (Browser)</p>
</div>
</div>
</body>
</html>
Jalankan file tes.htm
4|P age
Membuat laman web seperti dibawah ini:
Buat lama CSS dengan nama mycss.css, dengan coding sebagai berikut:
.container {
width: 1000px;
margin: 20px auto;
font-family: Tahoma;
}
.headerna {
background-color:#00426D;
color: white;
padding: 2px 20px;
}
.menubarna {
background-color: lightgray;
padding: 2px 20px;
}
.menubarna ul{
padding: 0;
margin: 0;
background: lightgray;
overflow: hidden;
}
a{
5|P age
text-decoration: none;
}
.menubarna ul li{
float: left;
list-style-type: none;
padding: 10px;
}
.menubarna {
text-decoration: none;
padding: 10px;
}
.badan {
height: 400px;
}
.sidebarna {
//background: red;
float: left;
height: 400px;
width: 20%;
}
.isina {
float: left;
width: 80%;
}
.clear {
clear: both;
}
.footerna {
background-color:#00426D;
color: white;
padding: 2px 20px;
}
6|P age
Buat lama web dengan nama index.htm, dengan coding sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Layout</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div class="container">
<div class="headerna">
<h1>HG HGHJGJHH</h1>
</div>
<div class="menubarna">
<ul><li>
<li><a href="">Dashboar</a></li>
<li><a href="">Menu-1</a></li>
<li><a href="">Menu-2</a></li>
</ul>
</div>
<div class="sidebarna">
<ul>
<li><a href="">Dashboar</a></li>
<li><a href="">Menu-1</a></li>
<li><a href="">Menu-2</a></li>
</ul>
</div>
<div class="isina">
<p>ssakh sakjfhsakjfhsajfhsajkhsakjh JFHSDJKFHDSKJHDSKJFH DSKJFH DSKJF HDSJK
FHDSJFHDSKJFHDSJF H DSJFHDSJFH DSJ FH DSJFHDSJFHDSJF HDSJF H HDSJFHDSJ
DSJFHDSJF HDSJFHDSJF HDSJ HDSJFHDSJ FHDSJ FHDSJFH DSJFHDSJF HDSJ
FHDSJFHDSJFHF HDSJF HDSJFH DSJFHDSJ</p>
</div>
<div class="clear"></div>
<div class="footerna">
<p>dasd kashdsjadhasjdhasjdh</p>
</div>
</div>
</body>
</html>
7|P age
CSS Layout denga Flexbox
Membuat laman web dengan tampilan sebagai berikut:
Buat lama CSS dengan nama file cssgue.css, dengan coding sebagai berikut:
.container{
background-color: lightgray;
display: flex;
}
.box {
padding: 20px;
width: 50%;
}
.box1 {
background-color: tomato;
}
.box2 {
background-color: lightblue;
}
8|P age
Berikutnya buat lama web dengan nama flexbox.htm, dengan coding seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Belajar Flex Box</title>
<link rel="stylesheet" type="text/css" href="cssgue.css">
</head>
<body>
<h1>CSS Layout Flex</h1>
<div class="container">
<div class="box box1">
<h1>BOX-1</h1>
<p>sakdh sakjdhsajdhsajdhsajdhsakjdhaskjdhaskjd
haskjdhasjdhasjdhaskjdhaskjdhasjkdhsajdhasjdhasjdhasjdhaskjdhasj</p>
</div>
<div class="box box2">
BOX-2
<p>scks ahjahasj hasjdhasjkdhsakjd hasjd hasjk dhaskjdh sakd hsajd hasjkd hasjkd
hasjkd hasjkd hsajkd hsajkd hsajkd hsajkd hsajkd hasjkd hasjkd hsajkd hasjkdhsajkd
hsajk dhasjkdhasjdkhaskj</p>
</div>
</div>
<p>skhs fksjfgsj dfgsjfg dshdsh ask dhsakjdhaskjd hsajdhsajd hsajd hsajkdhsakdhsakjh dk dhsakjdh
askjdh h sajdhsajd hdh asj dhsaj hsajd hsaj dhsajkd hsakjd hsajkhsajd hsajdhsajdk hsajdhsaj</p>
</body>
</html>
Kemudian jalankan file flexbox.htm
9|P age
CSS Layout dengan Flex
Contoh dibawah ini kita akan membuat suatu laman dengan membagi layer menjadi kolom, dengan
tampilan laman sebagai berikut:
Buat laman css dengan nama flex.css, dengan coding seperti dibawah ini:
.container {
display: flex;
margin: 30px;
flex-wrap: nowrap;
}
.box {
padding: 20px ;
width: 200;
//kalo pake % tetappersentase ukuran layar
}
.box-col-2 {
padding: 20px ;
width: 40%;
}
.box-col-3 {
padding: 20px ;
width: 60%;
}
.box-col-4 {
padding: 20px ;
width: 80%;
}
10 | P a g e
.box-col-5 {
padding: 20px ;
width: 100%;
}
.bg-tomato {
background-color: tomato;
}
.bg-green {
background-color: green;
}
.bg-skyblue {
background-color: skyblue;
}
Buat laman web dengan nama flex-01.htm, dengan coding sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Latihan Flex Box</title>
<link rel="stylesheet" type="text/css" href="cssgue.css">
</head>
<body>
<p>dd sjfhskfhskdfhsdkfhskd f h sdkfh sdkjfhsdkfhsdkf ds kfdskfhsdj fhsdj fh sdj fh sdjfh sdjfh sdjfhsdj
fh sdj ffh sdjkfh dsj fh dsjfh sdj kfhsdj fh sdjkffh sdj kffh sdjkfh sdjkfh dsjfhsdjfhsdjfh sdj fh sdsdj kjs
hjsdhskhaskdh asj dhsaj dhsaj dhasjddh asjdhsajdhsaasj dhasdh asasj d
</p>
<div class="container">
<div class="box bg-tomato ">
<h1>Tentang Kita</h1>
<p>adh ajddh dhs gshg gsah gsah dgsahdgh hgsahd gsah dgas dgash dgash dgashdg
ash h dgash h dgashdghashas hdgsah dg ash gshad gash dgsahdh gashdh gasdh
gsadg sahdh gashgd sah dgsah dgashdh gashdh gashdh gashdh gashdh gashdh
gashdh gashdsahjh</p>
</div>
<div class="box ">
<h1>Tentang Kamu</h1>
<p>sdj fsjbb nbczxnb jsh ahasksjkhsjh hasj h asjdhjas dhajshssjdhasasj dhaasjddh
aasjd dh aasjd dh aasjhassdjahssdjhas jddh asjdh asjdh jasdh asjdh ajs dhasjd hasjd
hasasj dhasd. shjsadjsadasjdgasdh gashd gash dgashd gash dgashdh gasjd gasjd ghgs
adh gash dgahsd ghasd gsha dsahd gsahd gashd gasdh gah dhasjdhasdh asjsdhjashd
jasdhasjdhasjdh asjhd djsah jh skhskhjk khkjahasasjh jashjash asjshjas h asjddhasj
shasj hasjdhas ashajsh asjhd asj hh saj hsjdhjasdh ajs dhaasj ddh saasj.</p>
11 | P a g e
</div>
</div>
</body>
</html>
12 | P a g e
