Bagian Kedua dalam Contoh Pembuatan Layout Menggunakan CSS

caridisini.ga on

Minggu, 26 Mei 2013

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>

Labels: Belajar Website, Tutorial CMS, Tutorial CSS, Tutorial HTML

Thanks for reading Bagian Kedua dalam Contoh Pembuatan Layout Menggunakan CSS. Please share...!