1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Full Width Header, Nav, dan Footer

Discussion in 'Developer Corner' started by zetyokoxxx, Jun 3, 2014.

  1. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    askumm..
    dari kemarin aku cari di mbahBING dan mbahGOOGLE gk ada yang bisaa :tidaak1:
    tolong master css ato html yng bisa membuat header,nav dan footer di blog saku menjadi full width
    [​IMG]

    http://ajitan.blogspot.com/
    please helpp.. :pleease3:
     
    zetyokoxxx, Jun 3, 2014
    #1
  2. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    coba pada css tambahkan kode dibawah
    (backup dulu ya)
    Code:
    #outer-wrapper {width:100% !important;}
#content-wrapper {width:80% !important;margin:0 auto;}
#headnya {width:100%;background:#333;margin: 0 auto;padding:0;max-width:100%;padding:0;}
#nav {width:100%}
#header-wrapper {padding: 0;}
    tapi yang jadi kendala... ada masalah pada responsive headernya...
    coba aja dulu..
     
    Yusril Ibnu, Jun 3, 2014
    #2
  3. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    mantaab gann :goodjob:
    tpi headernyaa?? :pleease3:
     
    zetyokoxxx, Jun 3, 2014
    #3
  4. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    coba yang ini...
    :goodjob:

    Code:
    #outer-wrapper {width:100% !important;}
    #content-wrapper {width:80% !important;margin:0 auto;}
    #headnya {width:100%;background:#333;margin: 0 auto;padding:0;max-width:100%;padding:0;min-height:30px}
    #Header1_headerimg {height:86px;}
    #nav {width:100%}
    #header-wrapper {padding: 0;}
     
    Yusril Ibnu, Jun 3, 2014
    #4
  5. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    mantabbb :goodjob: tpi kok lebar body jadi ngecil ya ?:woa:
     
    zetyokoxxx, Jun 3, 2014
    #5
  6. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    ini saya fix resposivenya...

    Code:
        #outer-wrapper {width:100% !important;}
    #content-wrapper {width:80% !important;margin:0 auto;}
    #headnya {width:100%;background:#333;margin: 0 auto;padding:0;max-width:100%;padding:0;min-height:30px}
    #Header1_headerimg {height:86px;}
    #nav {width:100%}
    #header-wrapper {padding: 0;height:110px;}
    @media screen and (max-width:700px){
        #header-wrapper {height:86px;}
    }
    lebar body bisa diubah pada kode berikut khususnya yang diberi warna merah... mungkin bisa ubah jadi 90% dsb.
    (pada kolom no 2 kode diatas)
    #content-wrapper {width:80% !important;margin:0 auto;}
     
    Yusril Ibnu, Jun 3, 2014
    #6
  7. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    makasih :goodjob:
    Rep+
     
    zetyokoxxx, Jun 3, 2014
    #7
  8. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    sama sama...
    Selamat sudah solved
    jangan lupa ganti prefixnya..
    semoga bermanfaat...
    Senang dapat membantu..
    Thx Repnya... :cool:
    :goodjob:
     
    Yusril Ibnu, Jun 3, 2014
    #8
  9. xtehsoda

    xtehsoda Active Member

    Joined:
    Jul 14, 2013
    Messages:
    1,061
    Waah keren ada mastah CCSS di forum ini... seneng punya mastah2 yg royality nya membantu kepada member yg lagi butuh bantuan... Manntaaaaaaapp....
     
    xtehsoda, Jun 3, 2014
    #9
  10. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    yang bener itu CSS :peace:
    Pelajari Lebih Lanjut di Thread CSS
     
    Yusril Ibnu, Jun 3, 2014
    #10
  11. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    ohya kelupaan.. kalo mau ganti header dengan gambar? lebar n panjangnya brapa??
     
    zetyokoxxx, Jun 3, 2014
    #11
  12. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    masalahnya itu tergantung...
    karena yang kita gunakan disini adalah lebar 100%, yang tidak bisa ditentukan dengan angka..
    Saya rekomendasikan mending gambar logo dan tulisan saja (tanpa background aka transparan) pake format .png, karena dari css diatas saya telah memberi warna background dengan warna #333 (hitam agak terang dikit) dan bisa diganti... dan itu bisa terlihat lebih bik lagi... :cool:
     
    Yusril Ibnu, Jun 3, 2014
    #12
  13. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    oh iya ada yg kurang nih.. :tidaak1:
    tulisan dalam navbar dan dalam footer biar lebarnya selebar body gimana ?
    :peace:
     
    zetyokoxxx, Jun 11, 2014
    #13
  14. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    untuk footer tinggal css berikut :
    Code:
    #isifooternya {width:80%}
    untuk navbar saya selidiki dulu :cool:

    update...
    untuk navbar harus dibungkus dulu...
    copas kode dibawah dibawah kode<nav id="nav">
    Code:
    <div style="width:80%;margin:0 auto;">
    dan copas kode dibawah diatas </nav>
    Code:
    </div>
    tapi masalahnya ada sedikit masalah saat responsive.
     
    Yusril Ibnu, Jun 11, 2014
    #14
  15. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    maav banget ngrepotin... :nangis1:
    jadi gimana ya :woa:
     
    zetyokoxxx, Jun 11, 2014
    #15
  16. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    gak masalah...
    udah liat update-nya blm..

     
    Yusril Ibnu, Jun 11, 2014
    #16
  17. zetyokoxxx

    zetyokoxxx Member

    Joined:
    Mar 2, 2014
    Messages:
    133
    udh..
    sekali lagi terima kasih... gpp deh masalah saat responsive
     
    zetyokoxxx, Jun 11, 2014
    #17
  18. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,373
    ya... sudah,
    sama sama.., nanti mungkin akan saya cari tau fix responsivenya... :goodjob:
    btw sya izin nyimak isi blognya ya...:ketawa:
     
    Yusril Ibnu, Jun 11, 2014
    #18

Share This Page