well come barliannet.: Desember 2013

Jumat, 27 Desember 2013

cara memasukan image dengan css

buat fail index.html buat fail style.css buat satu polder untuk menyimpan fail gambar

ferintah untuk cssnya
=========================================================
img.format1 { width:60px; height:60px; float:left;border:1px solid blue;border-radius:10px;}
img.format2 { width:100px; height:100px; float:right;border:3px solid red;}
img.format3 { width:120px; height:120px;;border:1px solid blue;border-radius:10px;box-shadow:5px;}
==========================================================
perintah di cssnya

perintah di htmlnya

dibawah ini scrif fullnya
index.html
=====================================
<!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>memasukan image dengan css </title>
<link rel='stylesheet' type='text/css' href='style.css'/>

   </head>

   <body>
     <div id="halaman">
   <div id="header">
<br> image dengan format css <br/>
<img src="image/barlianno.jpg" class="format1" alt="gb barlianno" title="text" />
<img src="image/barlianno.jpg" class="format2" alt="gb barlianno" title="text" />
<img src="image/kunkunmarkun.jpg" class="format1" alt="gb kunkun" title="text" />
<img src="image/kunkunmarkun.jpg" class="format2" alt="gb kunkun" title="text" />
<img src="image/barlin_nadin.jpg" class="format3" alt="gb kunkun" title="text" />
   </div>
   <div id="kiri"class="semua_kotak1">
isi KIRI
<br> height:400px;
padding:10px;
background-color:#CCCCCC;
float:left;
width:250px;
margin-top:10px;
border-radius : 10px;
pakai class "class="semua_kotak1"
   </div>
   <div id="kanan">
   isi KANAN
   <img src="image/kunkunmarkun.jpg" class="format3" alt="gb kunkun" title="text" />
   <br>
   height:400px;
padding:10px;
background-color:#33FF33;
float:right;width:250px;
margin-top:10px;
tanpa class
<br>
<img src="image/barlin_nadin.jpg" class="format2" alt="gb kunkun" title="text" />
   </div>
   <div id="tengah"class="semua_kotak2">
   isi TENGAH
   <br>
   height:400px;
padding:10px;
background-color:#CCCCCC;
margin:10px 290px 0 290px;
pakai class "class="semua_kotak2"
contoh gambar dengan format css
<br>
<img src="image/barlianno.jpg" class="format1" alt="gb kunkun" title="text" />
<img src="image/kunkunmarkun.jpg" class="format1" alt="gb kunkun" title="text" />
<img src="image/barlin_nadin.jpg" class="format1" alt="gb kunkun" title="text" />
<img src="image/gundul.jpg" class="format1" alt="gb kunkun" title="text" />
   </div>
   <div id="footer">

   FOOTER
   </div>


   </div>
   </body>
   </html>
=======================================
fail style.css
=======================================
@charset "utp-8";
/**/
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
.semua_kotak2 {font-family:tahoma, verdana; font-size:18px; color:blue;}/*ini adalah class*/
img.format1 { width:60px; height:60px; float:left;border:1px solid blue;border-radius:10px;}
img.format2 { width:100px; height:100px; float:right;border:3px solid red;}
img.format3 { width:120px; height:120px;;border:1px solid blue;border-radius:10px;box-shadow:5px;}
#halaman{
width:980px;
margin:0 auto;
background-color:#03438D;/*warna biru*/
}
#header {
height: 250px;
padding:10px;
background-color:#CCCCCC;
}
#kiri{
height:400px;
padding:10px;background-color:#CCCCCC;
float:left;
width:250px;
margin-top:10px;
border-radius : 10px;
}
#kanan {
height:400px;
padding:10px;
background-color:#33FF33;
float:right;width:250px;
margin-top:10px;
}
#tengah {
height:400px;
padding:10px;background-color:#CCCCCC;
margin:10px 290px 0 290px;
}
#footer { clear:both; height:40px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
================================================
hasil broser

telah di uji coba di lab barlianno

semoga bermangfaat
kunjugi juga ke
www.barliannet.com

perbedaan div dan class barlianno.

perbedaan div dan class barlianno.

perbedaan antara lain:
dalam penulisan css div diawali dengan(#) sedankan class di awali dengan titik (.)

contoh penulisan div dan class.
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
#halaman{ width:980px; margin:0 auto; background-color:#03438D; /*ini adalah div*/

setiap class bisa di masukan pada div sesuai dengan keinginan kita.untuk lebih jelas kita coba langgsung praktek.
buat 2 fail di satu polder yang di beri nama index.html dan style.css

style.css
===========================================
@charset "utp-8";
/**/
.semua_kotak1 {font-family:tahoma, verdana; font-size:24px; color:red;}/*ini adalah class*/
.semua_kotak2 {font-family:tahoma, verdana; font-size:18px; color:blue;}/*ini adalah class*/

#halaman{
width:980px;
margin:0 auto;
background-color:#03438D;/*warna biru*/
}
#header {
height: 80px;
padding:10px;
background-color:#CCCCCC;
}
#kiri{
height:400px;
padding:10px;background-color:#CCCCCC;
float:left;
width:250px;
margin-top:10px;
border-radius : 10px;
}
#kanan {
height:400px;
padding:10px;
background-color:#33FF33;
float:right;width:250px;
margin-top:10px;
}
#tengah {
height:400px;
padding:10px;background-color:#CCCCCC;
margin:10px 290px 0 290px;
}
#footer { clear:both; height:40px;padding:10px; background-color:#CCCCCC; margin-top:10px;}
=======================================
index.html
=======================================
<!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>Layout 3 kolom dengan css barlianno </title>
<link rel='stylesheet' type='text/css' href='style.css'/>

   </head>

   <body>
     <div id="halaman">
   <div id="header">
   HEADER
   </div>
   <div id="kiri"class="semua_kotak1">
isi KIRI
<br> height:400px;
padding:10px;
background-color:#CCCCCC;
float:left;
width:250px;
margin-top:10px;
border-radius : 10px;
pakai class "class="semua_kotak1"
   </div>
   <div id="kanan">
   isi KANAN
   <br>
   height:400px;
padding:10px;
background-color:#33FF33;
float:right;width:250px;
margin-top:10px;
tanpa class
   </div>
   <div id="tengah"class="semua_kotak2">
   isi TENGAH
   <br>
   height:400px;
padding:10px;
background-color:#CCCCCC;
margin:10px 290px 0 290px;
pakai class "class="semua_kotak2"
   </div>

   <div id="footer">

   FOOTER
   </div>


   </div>
   </body>
   </html>
==========================================
hasil
==========================================

keterangan gambar:
pada isi kiri muncul warna tek merah karna menggunakan class semua_kotak1
pada isi tengah muncul warana biru karna menngunakan class semua_kotak2
pada isi kanan muncul warna tek yang belum di seting pakai class.

cara memasukan di html

semoga bermangfaat
telah di uji coba di lab barlianno.

Rabu, 18 Desember 2013

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.

Senin, 16 Desember 2013

memasukan scrip html ke dalam postingan

program untuk memasukan kode / scrip html ke dalam postingan

bingung memasukan scrip html ke dalam postingan blog. saya coba di copy terus di paste di postingan setelah di publikasikan ehh ternya scripnya berubah tidak karuhan. jagan bingun coba pakai program ini. caraya paste scrip yang mau di postingkan pada kotak di bawah ini, setelah itu klik tombol parse scrip.lalu copy di tempat postingan.maka scrip akan sesuai dengan yang di inginkan.

kalow anda ingin membuat seperti di atas ini scripnya
=======================================================
<script type="text/javascript">function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&");replaced = replaced.replace(/</ig, "<");replaced = replaced.replace(/>/ig, ">");replaced = replaced.replace(/"/ig, """);replaced = replaced.replace(/±/ig, "±");replaced = replaced.replace(/©/ig, "©");replaced = replaced.replace(/®/ig, "®");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}</script><br /> <table border="0" cellpadding="0" cellspacing="0" style="width: 400px;"><tbody> <tr> <td valign="top" width="400"><textarea cols="50" id="somewhere" rows="15" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 2px solid rgb(204, 204, 204);"></textarea><input onclick="convert();" type="button" value="Parse Script" /> <a href="http://mas-andes.blogspot.com/2012/11/memasukan-html-di-postingan.html" target="_blank" title="Get This Widget"><button>Get This Widget</button></a></td> </tr> </tbody></table>
============================================================
Cara Pemasangan:

Anda dapat memasangnya di dalam postingan dengan menaruh kode tersebut didalam kolom posting mode HTML (bukan di Compose). Atau bisa juga memasangnya sebagai widget dengan menaruh di sidebar, caranya klik Tata Letak » Tambah Widget » HTML/Javascript (paste kode tersebut, kemudian klik Save).

sumber// http://mas-andes.blogspot.com/2012/11/memasukan-html-di-postingan.html

membuat menu horisontal dan vertikal dengan css

membuat menu vertikal sederhana dengan mengunakan css
buat fail index.html dan style.css dalam satu polder

index.html

==================================
<!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>bikinmenubarlianno</title>
<link rel="stylesheet" type="text/css" href="barlianno.css"/>
</head>

<body>
<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>
</body>
</html>
===================================================
fail barlianno.css
===================================================
@charset "utf-8";
/* CSS Document */

#menu, ul#menu ul.sub-menu {
padding:0;
margin:50;
text-align:center;
width:200px; /*agar menjadi menu horijontal wide di hilangkan*/
opacity:.9
}

#menu li, ul#menu ul.sub-menu li {
list-style-type:none;
display:inline-block;
width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration:none;
color:#8557FB;/*warna tek*/
background:#666;
padding:6px;
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:right;/*kalow untuk menu horisontal pakai 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
}
==============================================================
lihat di boser

semoga bermangpaat.

cara membuat menu horisontal

bikin fail dengan nama index.html dan style.css

index.html
==============================================================
<!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>bikinmenubarlianno herisontal</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<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>
</body>
</html>
========================================================
fail style.css
========================================================
@charset "utf-8";
/* CSS Document */

#menu, ul#menu ul.sub-menu {
padding:0;
margin:0;
text-align:center;
opacity:.9
}

#menu li, ul#menu ul.sub-menu li {
list-style-type:none;
display:inline-block;
width:120px
}

ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration:none;
color:#8557FB;/*warna tek*/
background:#666;
padding:5px;
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
}
=================================================================
lihat di broser

kolow kita perhatikan dalam pembuatan menu horisontal dan pertikal sama, kita haya mengedit sedikit fail css pada css horisontal yaitu

kita haya merubah
=================================
#menu, ul#menu ul.sub-menu {
padding:0;
margin:0;
text-align:center;
opacity:.9
}
=================================
agar jadi menu vertikal ditambah dengan width 200px dirubah menjadi:
=================================
#menu, ul#menu ul.sub-menu {
padding:0;
margin:50;
text-align:center;
width:200px; /*agar menjadi menu horijontal wide di hilangkan*/
opacity:.9
}
=================================
posisi:absolut dirubah menjadi posisi: right maka droup menu menjadi tidak bertabrakan.pada menu pertikal.
=================================
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
===============================

ul#menu li ul.sub-menu {
position:right;/*kalow untuk menu horisontal pakai absolute*/
top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
display:none
}
=============================
selamat mencoba dan semoga bermanfaat.

telah di uji coba di lab barlianno

Jumat, 06 Desember 2013

toturial css barliannet untuk pemula.

toturial css barliannet untuk pemula.

pada kesempatan ini saya akan mencoba membuat layout sederhana menggunakan css.
buat dua buah fail. satu diberi nama
.index.html.
.style.css
.software editor notepad 2
.software xamp untuk melihat hasil di broser

gb hasil pembuatan fail

fail style.css edit dengan notepad 2 sehingga hasilnya seperti di bawah ini.
===================================================
@charset "utp-8";

body{
    background-color:GREY;
    COLOR:RED;

    }
#halaman{
    width:960px;
    height:200px;
    background-color:blue;
}

=================================================

gb hasil editan di nopad 2

isi fail.style.css

gb pail css yang di edit di notepad 2

setelah membuat dua pail tersebut sekarang coba lihat di mozila maka kasil ya akan seperti di bawah ini

gb di mozila hasil pembuatan 2 pail tersebut.

membuat kepala pada web

edit style.css seperti di bawah ini
==================================

@charset "utp-8";

body{

background-color:GREY;

COLOR:RED;

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;

}

=====================================================
edit index.html
=====================================================

==================================================================

untuk melihat hasil lihat di broser.