Langsung ke konten utama
membuat menu horisontal dan menu vertikal bagian 2
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
===============================
untuk membuat menu vertikal saya mencopy dari menu css menu hori jontal dan sedikit mengedit supaya bisa jadi menu vertikal yaitu.menu di ganti degan nama menuv agar tidak bentrok degan menu horisontal.

============================
    #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.


Komentar

Posting Komentar

Postingan populer dari blog ini

agar phpmyadmin bisa di akses dari luar

Setting local server XAMPP agar bisa di panggil dari komputer lain dalam jaringan katika akan membuat aplikasi client server dengan mengandalkan localserver XAMPP hal yang apling penting yaitu XAMPP pada komputer server dapat dipanggil dari komputer client. Agar XAMPP komputer server dapat dipanggil maka perlu kita lakukan pengaturan sebagai berikut: Buka file httpd.conf   di folder C:\xampp\apache\conf , ggunakan notepad atau notepad++ untuk lebih mudahnya Cari tulisan LoadModule vhost_alias_module modules/mod_vhost_alias.so  dan hilangkan tanda pagar (#) didepannya. Cari tulisan Include "conf/extra/httpd-vhosts.conf" apabila didepanya masih ada tanda # hilangkan tanda tersebut. Selanjutnya kita perlu mengatur siapa saja yang dapat mengakses XAMPP pada komputer server, langkah-langkahnya seperti berikut. Buka file httpd-xampp.conf di C:\xampp\apache\conf\extra . Dibagian paling bawah terdapat tulisan seperti berikut view plain print ?
2 komentar
Baca selengkapnya

CARA MENGHITUNG Solar Charge Controller

CARA MENGHITUNG SOLAR CHARGE CONTROLLER Untuk menghitung kebutuhan solar charge controller, maka kita harus mengetahui dulu karakteristik dan spesifikasi dari solar panel, pada solar panel terdapat spesifikasi sebagai berikut : maximum power (Pm)                            = 110 Wp Optimum Power Voltage (Vmp)             = 16,7 VDC Optimum Operation Current (Imp)        = 6,6 A Open Circuit Voltage (Voc)                    = 20,7 A short circuit current (Isc)                      = 7,5 A yang harus diperhatikan adalah angka Isc (short circuit current) , nilainya dikalikan dengan jumlah panel surya, hasilnya merupakan nilai berapa nilai minimal dari charge controller yang dibutuhkan contoh kita menngunakan 1 panel surya 110 wp maka kita memakai controler 10 A. kalow kita memakai dua buah panel surya dipasang paraler maka kita butuk kontroler 7,5 X 2 = 15 A. maka sebaiknya kita menggunakan controler yang 20 A agar aman. cara kerja controler.   Solar charge controller , ad
Posting Komentar
Baca selengkapnya

cara pasang jarum dot matrix lq 2180

memasang jarum 24 pin dotmatrik merupakan hal yang paling sulit, dan memerlukan kesabaran, apalagi jika kita tidak mengetahui urutan pemasangan jarum nya. di bawah ini saya akan mencoba memasang jarum serta tahapan tahapannya. kunci dari pemasangan terletak pada pemasangan jarum pendek. kita harus memastikan jarum pendek terpasang secara sempurna pada titik lobang yang telah ditentukan.kita harus memasang jarum pendek dari urutan pertama dan meloncati satu lobang untuk nantinya dipasang jarum panjang.kalow pemasangan jarum pendek tidak terpasang dengan sempurna maka pada waktu pemasangan jarum panjang akan susah masuk. dan harus di ulang dari awal capepee dehhh.   gambar di atas memperlihatkan tahap pemasangan jarum pendek sampai ke jarum panjang. setelah pemasangan jarum selesai dan head sdiap di coba . selamat mencoba telah di uji di lab barlianno. http://www.sewadpc.com/
9 komentar
Baca selengkapnya