Monday, 27 September 2010

Membuat Layout dengan CSS (Sample 2)

| Monday, 27 September 2010 | 1 comments


Masih  tentang  bagaimana  membuat  layout  dengan  CSS,  kita  lanjutkan  untuk  membuat
layout yang lain. Berikut ini adalah desain layout yang akan kita buat 

 
Bagian background (warna abu-abu) akan kita beri image.

Langkah  pertama,  seperti  biasa  kita  harus  membuat  bagian-bagian  elemen  dahulu
menggunakan division (div). Berikut ini adalah code dasar untuk setiap elemennya.

<body>
<div id="content">
<div id="header">
<h1>welcome to my site</h1>
</div>

<div id="menu">
<div class="navigasi">
     <h3>Menu Navigasi A</h3>
           <ul>
  <li><a href="link1.htm">Link 1</a></li>
  <li><a href="link2.htm">Link 2</a></li>
  <li><a href="link3.htm">Link 3</a></li>
  <li><a href="link4.htm">Link 4</a></li> 
     </ul> 
</div>

     <div class="navigasi">
     <h3>Menu Navigasi B</h3>
      <ul>
   <li><a href="link1.htm">Link 1</a></li>
   <li><a href="link2.htm">Link 2</a></li>
   <li><a href="link3.htm">Link 3</a></li>
   <li><a href="link4.htm">Link 4</a></li>
      </ul>
      </div>

</div>

<div id="isi">
<img src="sunset.jpg" class="gambar" />

<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
         bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
         adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
         isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
         bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
         adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian  
         isi. Ini adalah bagian isi. 
      </p>

<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
         bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
         adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
         isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
         bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
         adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian  
         isi. Ini adalah bagian isi. 
      </p>

      <p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
         bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
         adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
         isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
         bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
         adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian  
         isi. Ini adalah bagian isi. 
      </p>  
</div>

<div id="footer">
    <p>Copyright &copy; 2007 by rosihanari</p>
</div>
</div>
</body> 

Seperti  yang  kita  lihat  pada  code  di  atas,  bahwa  semua  sel  (header,  isi,  footer  dan
navigasi) merupakan bagian dari bagian content. Mengapa dimasukkan ke dalam bagian 
content?  Hal  ini  dikarenakan  kita  akan  membuat  style  untuk  bagian  tersebut,  misalnya
meletakkan di tengah halaman dan juga mengatur lebar bagian content nya.

OK… let’s get to the point…

Kita  akan  membuat  style  untuk  body  nya  terlebih  dahulu.  Karena  kita  akan
menambahkan  efek  background  image  pada  seluruh  halaman,  maka  berikut  ini  adalah
stylenya

body {
 background: url(background.jpg);
    

Selanjutnya kita akan membuat style untuk bagian content dengan mengatur lebarnya 
adalah 750 pixel dan berada di tengah halaman. 

#content {
       width: 750px;

       margin: auto;      /* membuat posisi di tengah */
   }
 
Saat nya memodifikasi bagian header. Kita akan membuat blok untuk headernya dengan
menambahkan style berikut.

#header {
           border:1px solid #000000;   
           background-color:#000000;
           padding: 10px       
        }


h1 {
 color: #FFFFFF;
 font-size: 40px;
   }
 

 
Apabila Anda merasa space antara text heading dengan tepi blok bawah dan atas terlalu
lebar, dapat menggunakan line-height untuk mengaturnya. Semakin kecil nilai line-height
maka akan semakin kecil spacenya.

h1 {
 color: #FFFFFF;
 font-size: 40px;
line-height: 5px;
  

Selanjutnya kita akan membuat style untuk bagian footer beserta teks pada footernya.

#footer {
           padding:10px;
           border:1px solid #000000;
           background-color:#CCCCCC;

        }

#footer p {
            text-align: justify;
font-weight: bold;
          } 





1 comments:

selaluenak said...

Jelly Gamat QnC

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 
Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com