Okey kita akan membahas bagian selanjutnya dari
contoh yang kemarin telah otak jagat share ke teman-teman. Dalam bagian kedua dalam
contoh pembuatan Layout menggunakan CSS ini kita akan masuk pada
code-code CSS yang akan kita gunakan selanjutnya. Beda dari pada pembahasan kemarin yang hanya menuliskan
Code-code HTML dengan diikuti <div> di dalam bagian
kode HTML tersebut. Pada bagian kedua dalam
contoh Pembuatasn layout menggunakan CSS ini kita akan menuliskan apa yang akan terjadi pada bagian code <div id="volue"> atau <div class="volue">. Sampai pada bagian kedua dalam
contoh pembuatan layout menggunakan CSS mungkin ada tidak akan paham dengan kefahaman yang sempurna jika anda belum membaca pada bagian pertama dari contoh ini. Silahkan Baca
DISINI!Samapai pada paragraf kedua ini anda akan menemukan apa yang telah anda pelajari pada bagian pertama kemarin. Tidak cukup ribet dalam
penempatan code-ccode CSS yang akan kita bahas pada bagian kedua dalam
contoh pembuatan layout menggunakan CSS disini. Lihatlah kode-kode CSS berikut ini dan anda tempatka tepat di atas code </head>. Ini lah
Code css itu;
<style type="text/css">
body {background-image:url(gambar_kamu.jpg);
}
#content {
padding-top:30px;
width:1000px;
margin:auto;
}
#header {
border:1px solid #000;
background-color:#000;
padding:10px;
}
h1 {
color:#FFF;
font-size:40px;
line-height:5px;
text-align:center;
}
#footer{
padding:10px;
border:1px solid #000;
background-color:#CCC;
}
#footer p {
text-align:center;
font-weight:bold;
}
/* Menu navigasi */
#nav {
height:auto;
width: 1000px; /* lebar menu navigasi*/
margin:0px 1px 1px 1px;
background:#000000; /* Warna latar belakang menu navigasi */
font: 14px arial;
float:left;
}
#nav ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#nav li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#nav ul li {
float: left;
display:inline;
}
#nav li a, #nav li a:link, #nav li a:visited {
color:#ffffff; /* Warna teks */
padding:9px 10px 9px 10px;
text-decoration:none;
display:block;
}
#nav li a:hover {
background:#088A08; /* Warna latar saat kursor mouse berada di atas menu navigasi */
color: blue; /* Warna teks saat kursor mouse berada di atas menu */
}
#menu{
margin-top:0px;
height:360px;
float:right;
width:110px;
background-color:#F00;
}
}
#navigasi {
float:left;
border:1px dashed #000;
margin-top:0px;
padding:0px;
background-color:#0F0;
}
#navigasi h3 {
background-color:#000;
font-size:24px;
color:#FFF;
margin-top:0px;
}
#isi {
width:75
0px;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
background:white;
float:centar;
}
.gambar {
float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:20px;
margin-left:0px;
border:1px solid #000;
}
#isi p {
text-align:justify;
line-height:18px;
margin-top:0px;
}
</style>
