index.html
======================================
<html>
<head>
<title>webset tempel barlianno </title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id ="halaman">
<div id="kepala">
<div id="logo">
untuk logo
</div>
<div id="barner">
untuk barner
</div>
kepala barlianno
</div>
<div id ="latihan">
<ul id="menu">
<li><a href="#">Menu 1 </a></li>
<li><a href="#">Menu 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul>
</div>
<div id ="isi">
<div id ="kiri">
isi kiri
<div id ="menuvertikal">
<ul id="menuv">
<li><a href="#">Menu 1 </a></li>
<li><a href="#">Menu 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul>
konten lain
</div>
</div>
<div id ="kanan">
isi kanan
</div>
ISI barliannet.com
<p>lkjlkjlkjlkjjh
lkjljlijth
kjljlkj
jljlj</p>
</div>
<div id ="bawah">
isi bawah
</div>
BARLIANNO halaman
</div>
</body>
</html>
=================================
style.css
=================================
@charset "utp-8";
body{
background-color:GREY;
COLOR:red;/*warna tek semua warna tek akan merah*/
margin-top:0px;/*agar halaman menepi ke atas tanpa batas*/
margin-botton:0px;/*agar halaman menepi ke bawah tanpa bawah*/
}
#halaman{
width:960px;
height:auto;/*agar halaman disesuaikan dengan tex yang di tulis*/
background-color:blue;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
margin-bottom:0px;/*agar halaman menepi ke bawah tanpa batas*/
}
#halaman #kepala{ /*agar terbaca di index.html harus ada div kepala */
width:950px;/*kepala berada di dalam halaman jadi 950px*/
height:140px;
background-color:green;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
margin-bottom:auto;
}
#halaman #kepala #logo{ /*agar terbaca di index.html harus ada div kepala */
float:left;/*agar logo berada di sisi kiri*/
width:100px;/*logo berada di dalam kepala */
height:100px;
background-color:66CCFF;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
margin-bottom:auto;
}
#halaman #kepala #barner{ /*agar terbaca di index.html harus ada div kepala */
float:right;/*agar barner berada di sisi kanan*/
width:850px;/*950-100 berada di dalam kepala */
height:100px;/*supaya sejajar dengan logo*/
background-color:66CC00;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
margin-bottom:auto;
}
#menu, ul#menu ul.sub-menu {
padding:0;
margin:0;
text-align:center;
opacity:.9;/*9 untuk nilai tranparasi nilaiya dari 0 sd 9*/
}
#menu li, ul#menu ul.sub-menu li {
list-style-type:none;
display:inline-block;
width:150px;/*lebar kotak untuk menu */
}
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration:none;
color:#0106E5;/*warna tek menu biru*/
background:#DDFE00;/*warna beckgroud tiap kotak menu kuning */
padding:5px;/*lebar kotak ke bawah*/
display:block
}
ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
background:#33FF66; /*kalow di dekatkan mose warna akan berubah jadi hijau muda */
}
ul#menu li {
position:relative
}
ul#menu li ul.sub-menu {
position: absolute;
top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
display:none
}
ul#menu li:hover ul.sub-menu {
display:block
}
#halaman #isi{ /*agar terbaca di index.html harus ada div halaman */
width:950px;/*isi berada di dalam halaman jadi 950px*/
height:700px;
background-color:white;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
margin-bottom:auto;
}
#halaman #isi #kiri{ /*agar terbaca di index.html harus ada div isi */
float:left;/*agar barner berada di sisi kiri*/
width:200px;/*isi berada di dalam halaman jadi 950px*/
height:700px;
background-color:660066;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
margin-bottom:auto;
}
#halaman #isi #kiri #menu, ul#menuv ul.sub-menu {
padding:0;
margin:0;
text-align:center;
width: 200px;
opacity:.9;/*9 untuk nilai tranparasi nilaiya dari 0 sd 9*/
}
#halaman #isi #kiri #menuv li, ul#menuv ul.sub-menu li {
list-style-type:none;
display:inline-block;
width:150px;/*lebar kotak untuk menu */
}
#halaman #isi #kiri ul#menuv li a, ul#menuv li ul.sub-menu li a {
text-decoration:none;
color:#0106E5;/*warna tek menu biru*/
background:#DDFE00;/*warna beckgroud tiap kotak menu kuning */
padding:5px;/*lebar kotak ke bawah*/
display:block
}
#halaman #isi #kiri ul#menuv li a:hover, ul#menuv li ul.sub-menu li a:hover {
background:#CC0000; /*kalow di dekatkan mose warna akan berubah jadi merah */
}
#halaman #isi #kiri ul#menuv li {
position:relative
}
#halaman #isi #kiri ul#menuv li ul.sub-menu {
position:center;
top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
display:none
}
#halaman #isi #kiri ul#menuv li:hover ul.sub-menu {
display:block
}
#halaman #isi #kanan{ /*agar terbaca di index.html harus ada div isi */
float:right;/*agar barner berada di sisi kanan*/
width:200px;/*isi berada di dalam halaman jadi 950px*/
height:700px;
background-color:00FF33;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
margin-bottom:auto;
}
#halaman #bawah{ /*agar terbaca di index.html harus ada div halaman */
width:950px;/*isi berada di dalam halaman jadi 950px*/
height:30px;
background-color:black;
margin-left:auto;
margin-right:auto;
margin-top:auto;/*agar halaman menepi ke atas tanpa batas*/
margin-bottom:auto;
}
===============================
lihat hasil
===============================
============================
#menu, ul#menu ul.sub-menu {
padding:0;
margin:0;
text-align:center;
opacity:.9;/*9 untuk nilai tranparasi nilaiya dari 0 sd 9*/
}
=============================
dirubah menjadi
============================
#halaman #isi #kiri #menu, ul#menuv ul.sub-menu {
padding:0;
margin:0;
text-align:center;
width: 200px;
opacity:.9;/*9 untuk nilai tranparasi nilaiya dari 0 sd 9*/
}
========================================
merubah ini supaya menu horosontal berubah menja horisontal
=========================================
ul#menu li ul.sub-menu {
position: absolute;
top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
display:none
}
=========================================
dirubah menjadi
=========================================
#halaman #isi #kiri ul#menuv li ul.sub-menu {
position:center;
top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
display:none
}
========================================
ini berpungsi supaya tek sub menu tidak bertabrakan.
semogabermangpaat.
telah di tes di lab barlianno.
Tidak ada komentar:
Posting Komentar