Membuat Template Terletak Ditengah

Membuat template Terletak di tengah yang saya maksud adalah layout template anda akan selalu terlihat di tengah oleh pengunjung walaupun menggunakan monitor dengan resolusi yang berbeda.

Sebenarnya postingan ini khusus bagi anda yang suka mengutak-atik template ataupun yang suka mendesain sebuah template baik itu untuk di pakai sendiri ataupun untuk di pakai oleh orang lain.

Untuk membuat agar layout template anda tampak di tengah sangat lah mudah karena anda tinggal mengubah nilai kode margin ke mode auto, Contoh kodenya seperti ini :

margin: 0 auto;

Keterangan :

0 --> margin sebesar 0px ( pixel ) untuk batas atas dan batas bawah. Jika batas atas dan batas bawah ingin ada jaraknya, maka tinggal anda tambahka nilainya, misal : 10px.

auto --> agar batas kiri dan batas bawah bisa selalu seimbang, sehingga layout template anda akan selalu terlihat di tengah.

Dengan menambahkan kode tersebut ke template anda, maka layout template anda akan tampak selalu berada di posisi tengah walaupun resolusi monitor pengunjung anda berbeda-beda.

Contoh :

Dalam kode template kang Rohman, layout terluar kang Rohman di namakan #wrap :

#wrap {
    width: 966px;
    margin: 0 auto;
    padding: 0;
    line-height: 18px;
    word-wrap: break-word;
     font-family: Arial, Tahoma, Verdana;
     font-size:12px;
     overflow: hidden;
      background:$wrapcolor;      
      }

Dengan kode yang saya beri warna merah, maka layout template akan tampak berada di tengah. Lain halnya jika anda menyimpan kode seperti ini :

 

#wrap {
    width: 966px;
    margin: 0 ;
    padding: 0;
    line-height: 18px;
    word-wrap: break-word;
     font-family: Arial, Tahoma, Verdana;
     font-size:12px;
     overflow: hidden;
      background:$wrapcolor;      
      }

Layout template anda akan terlihat mepet ke kiri, semakin besar resolusi monitor pengunjung maka template anda akan terlihat semakin mepet ke kiri :

Tapi ini adalah masalah selera, situs sebesar kompas.com pun lebih suka terlihat mepet ke kiri di banding terlihat di tengah seperti halnya situs detik.com

 

Semoga anda jadi bingung dengan postingan ini !

Tweet