Saya ingin membuat sebuah header, dimana logo / judul blog di sebelah kiri dan menu navigation ada di sebelah kanan. Pertanyaan saya : Bagaimana agar bisa rapi, tulisan ada di tengah2 kotak merah tersebut. Apakah memang harus menggunakan Position relative atau ada alternative lainnya? Contoh yang saya inginkan Hasil sementara punya saya Codingan saya == CSS == Code: .header-wrapper{ background: #F44336; padding: 50px; width: 100%; } #header{ float: left; width: 40%; } #header h1{ position: relative; bottom: 18px; margin-left: 10px; } #sub-menu{ float: left; width: 60%; } #sub-menu li{ position: relative; bottom: 24px; padding: 2px; display: inline-block; } #sub-menu a{ text-decoration: none; color: #fff; padding: 5px; font-size: 120%; } == HTML == HTML: <div class="header-wrapper"> <div id="header"> <h1>SETASHOP</h1> </div> <div id="sub-menu"> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> </ul> </nav> </div> </div> Terima kasih dan ditunggu jawabannya. Last edited: Aug 15, 2017 wrep17, Aug 15, 2017 #1 wrep17 Well-Known Member Joined: Sep 26, 2015 Messages: 1,325 Likes Received: 246 Trophy Points: 63 Google+: Author Apakah menggunakan vertical-align pilihan tepat? @Garett @Ardilas @Dan @KangAndre wrep17, Aug 15, 2017 #2 Muhammad Khoir Super Level Joined: Jun 10, 2014 Messages: 2,873 Likes Received: 362 Trophy Points: 83 Google+: Author itu template apa? Blogger? Buatan siapa? Apa namanya? Pengen nyoba otak atik juga.. Muhammad Khoir, Aug 15, 2017 #3 wrep17 Well-Known Member Joined: Sep 26, 2015 Messages: 1,325 Likes Received: 246 Trophy Points: 63 Google+: Author Coding sendiri ini hehe, wrep17, Aug 15, 2017 #4 Garett Super Level Joined: Apr 13, 2015 Messages: 1,104 Likes Received: 1,049 Trophy Points: 163 Google+: Author Belum pakai framework 'kah? Kamu bisa gunakan margin atau padding untuk atur jarak spasi dari logo. Atau bila anda ingin logo dan menu bisa simetris, anda bisa gunakan wrapper pada luar navigasi. Kalau untuk atur atau preposisi, anda bisa tukar float-left-right atau urutkan tag mana duluan yang harus di atas. Btw, kamu lupa cantumkan tag logo. Apakah tag logo beruma img, atau heading? Class apa yang dipakai? Apakah tag logo tersebut terdapat di dalam navigasi atau luar? Garett, Aug 15, 2017 #5 KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 Trophy Points: 413 Itu karena menunya sedikit, coba tambah lagi sampai penuh, bagaimana hasilnya atau dibagi saja headernya: jadi header 1 dan header 2 KangAndre, Aug 15, 2017 #6 wrep17 Well-Known Member Joined: Sep 26, 2015 Messages: 1,325 Likes Received: 246 Trophy Points: 63 Google+: Author Ya benar, tidak lengkap copasan saya Coba cek lagi hehe Judul Blog / Logo = Diatas Menu = dibawahnya ya? Begitu kah kang? wrep17, Aug 15, 2017 #7 KangAndre Member Joined: Jan 25, 2014 Messages: 10,244 Likes Received: 2,714 Trophy Points: 413 Nggak tetap berjajar. Coba lihat saja kode contoh yang diinginkan... KangAndre, Aug 15, 2017 #8 wrep17 likes this. ARIF AHNAN Member Joined: Oct 18, 2016 Messages: 552 Likes Received: 61 Trophy Points: 28 nyimak omm//./ gx ahli coding ARIF AHNAN, Aug 15, 2017 #9 Garett Super Level Joined: Apr 13, 2015 Messages: 1,104 Likes Received: 1,049 Trophy Points: 163 Google+: Author Meh. Navigasi dengan list itu bagus kalau tujuannya untuk membuat sub-navigasi. Tapi bila hanya satu level, pakai anchor tag saja cukup. Ini navigasi buatan saya yang bisa dibilang sangat amat singkat. https://jsbin.com/voyemekabu/edit?html,css,output Edit: Saya mahasiswa jurusan Teknik Informatika. Saya tahu bagaimana desain web, tapi ini bukan bidang yang paling saya geluti semenjak mendesain tidak bisa jadi bahan judul makalah ilmiah. Last edited: Aug 15, 2017 Garett, Aug 15, 2017 #10 wrep17 likes this. wrep17 Well-Known Member Joined: Sep 26, 2015 Messages: 1,325 Likes Received: 246 Trophy Points: 63 Google+: Author Gausah nyepam, silahkan baca Rules Terima Kasih. wrep17, Aug 16, 2017 #11 ys. herbi Well-Known Member Joined: Mar 6, 2016 Messages: 1,251 Likes Received: 190 Trophy Points: 63 Google+: Author apa ini... kelupaan baca https://www.bersosial.com/pages/rules ys. herbi, Aug 16, 2017 #12 Damar Well-Known Member Joined: Jun 22, 2014 Messages: 1,472 Likes Received: 216 Trophy Points: 63 Google+: Author Agar posisinya ditengah (tidak terlalu ke-atas atau ke-bawah) header dan menu harus memiliki line-height yang sama. misalkan keduanya di set line-height: 40px; maka meskipun header dan menu mempunyai font-size yang berbeda, posisinya akan tetap di tengah-tengah. Saya punya contoh, dalam kasus dibawah ini line-height hanya diatur ke ul.topnav li a karena header/logo nya juga berada di ul.topnav li a sehingga yang membedakan adalah tambahan <h1> pada tag html: Code: /* ======================================== Navigasi ========================================= */ ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #F44336; box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); position: fixed; top: 0; left: 0; width: 100%; } ul.topnav li.header {float: left;} ul.topnav li.header h1 {margin: 0;} ul.topnav li.header h1 a {font-size: 32px;} /* Ukuran huruf logo */ ul.topnav li {float: right;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 22px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; line-height: 40px; /* Coba ubah bagian ini untuk mengetahui perbedaan */ } HTML: <ul class="topnav"> <li class="header"><h1><a href="#!">SETASHOP</a></h1></li> <li><a href="#!">Contact</a></li> <li><a href="#!">Testimonial</a></li> <li><a href="#!">Team</a></li> <li><a href="#!">About</a></li> <li><a href="#!">Home</a></li> </ul> Untuk demonya bisa dilihat disini: https://www.pramudito.com/files/html/nav-height.html Damar, Aug 17, 2017 #13 wrep17 Well-Known Member Joined: Sep 26, 2015 Messages: 1,325 Likes Received: 246 Trophy Points: 63 Google+: Author @Damar berarti di dalam tag <ul> semua yak ? Saya kerepotan harus mengurutkan menggunakan position: relative; wrep17, Aug 18, 2017 #14 Damar Well-Known Member Joined: Jun 22, 2014 Messages: 1,472 Likes Received: 216 Trophy Points: 63 Google+: Author Iya, itu kebetulan saya samakan antara menu dan logo jadi <li> berada di dalam <ul>, dan <ul> seharusnya berada di dalam <nav> tapi saya lupa menambahkannya Urutannya terbalik mungkin karena float:right jadi dihitung dari kanan dan baru ingat navigasi yang saya buat itu position:fixed alias navigasi melayang/overlay Damar, Aug 18, 2017 #15 wrep17 Well-Known Member Joined: Sep 26, 2015 Messages: 1,325 Likes Received: 246 Trophy Points: 63 Google+: Author @Damar kenapa tidak sesuai yak? wrep17, Aug 18, 2017 #16 Damar Well-Known Member Joined: Jun 22, 2014 Messages: 1,472 Likes Received: 216 Trophy Points: 63 Google+: Author Hemm, bisa lihat kode-nya? Damar, Aug 18, 2017 #17 wrep17 Well-Known Member Joined: Sep 26, 2015 Messages: 1,325 Likes Received: 246 Trophy Points: 63 Google+: Author Codenya : == CSS == Code: h1,h2,h3,h4,h5,h6{font-weight:700;line-height:normal;} h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%} .header-wrapper{ background: #F44336; padding: 45px; } ul.top{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background: #F44336; box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); position: fixed; top: 0; left: 0; width: 100%; } ul.top li.headermenu{ float: left; } ul.top li.headermenu h1{ margin: 0; } ul.top li{ float: right; } ul.topnav li.header h1 a {font-size: 32px;} ul.top li a{ display: inline-block; color: #f2f2f2; text-align: center; padding: 22px 16px; text-decoration: none; transition: 0.3s; line-height: 50px; } == HTML == Code: <div class="header-wrapper"> <div id="header"> <ul class="top"> <li class="headermenu"><h1>SETASHOP</h1></li> <li><a href="#!">Contact</a></li> <li><a href="#!">Testimonial</a></li> <li><a href="#!">Team</a></li> <li><a href="#!">About</a></li> <li><a href="#!">Home</a></li> </ul> </div> </div> wrep17, Aug 18, 2017 #18 Damar Well-Known Member Joined: Jun 22, 2014 Messages: 1,472 Likes Received: 216 Trophy Points: 63 Google+: Author Coba yang ini: HTML: <div class="header-wrapper"> <div id="header"> <ul class="top"> <li class="headermenu"><h1><a href="#!">SETASHOP</a></h1></li> <li><a href="#!">Contact</a></li> <li><a href="#!">Testimonial</a></li> <li><a href="#!">Team</a></li> <li><a href="#!">About</a></li> <li><a href="#!">Home</a></li> </ul> </div> </div> Saya logonya pakai link Damar, Aug 18, 2017 #19 wrep17 Well-Known Member Joined: Sep 26, 2015 Messages: 1,325 Likes Received: 246 Trophy Points: 63 Google+: Author Ternyata ada perbedaannya juga ya, Sekarang sudah bisa wrep17, Aug 18, 2017 #20 (You must log in or sign up to reply here.) Show Ignored Content Page 1 of 2 1 2 Next > Loading... Similar Threads - [ASK] Agar Logo [ask] nanya sedikit masalah php? ziuma, Dec 19, 2019, in forum: Programming Replies: 1 Views: 4,240 KangAndre Dec 19, 2019 [ask] Java atau Python di 2019? Samsul Arifin, Jan 2, 2019, in forum: Programming Replies: 3 Views: 4,083 Garett Mar 10, 2019 [Ask] Cari private html css jquery javascript wrep17, Jul 9, 2017, in forum: Programming Replies: 13 Views: 2,302 Damar Jul 13, 2017 [Ask] Github.io itu Apa? wrep17, May 21, 2017, in forum: Programming Replies: 19 Views: 3,687 wrep17 May 24, 2017 [Ask] Teknik Rekursif Bahasa C wrep17, May 6, 2017, in forum: Programming Replies: 9 Views: 2,687 Andre Jul 25, 2017 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
Belum pakai framework 'kah? Kamu bisa gunakan margin atau padding untuk atur jarak spasi dari logo. Atau bila anda ingin logo dan menu bisa simetris, anda bisa gunakan wrapper pada luar navigasi. Kalau untuk atur atau preposisi, anda bisa tukar float-left-right atau urutkan tag mana duluan yang harus di atas. Btw, kamu lupa cantumkan tag logo. Apakah tag logo beruma img, atau heading? Class apa yang dipakai? Apakah tag logo tersebut terdapat di dalam navigasi atau luar?
Itu karena menunya sedikit, coba tambah lagi sampai penuh, bagaimana hasilnya atau dibagi saja headernya: jadi header 1 dan header 2
Ya benar, tidak lengkap copasan saya Coba cek lagi hehe Judul Blog / Logo = Diatas Menu = dibawahnya ya? Begitu kah kang?
Meh. Navigasi dengan list itu bagus kalau tujuannya untuk membuat sub-navigasi. Tapi bila hanya satu level, pakai anchor tag saja cukup. Ini navigasi buatan saya yang bisa dibilang sangat amat singkat. https://jsbin.com/voyemekabu/edit?html,css,output Edit: Saya mahasiswa jurusan Teknik Informatika. Saya tahu bagaimana desain web, tapi ini bukan bidang yang paling saya geluti semenjak mendesain tidak bisa jadi bahan judul makalah ilmiah.
Agar posisinya ditengah (tidak terlalu ke-atas atau ke-bawah) header dan menu harus memiliki line-height yang sama. misalkan keduanya di set line-height: 40px; maka meskipun header dan menu mempunyai font-size yang berbeda, posisinya akan tetap di tengah-tengah. Saya punya contoh, dalam kasus dibawah ini line-height hanya diatur ke ul.topnav li a karena header/logo nya juga berada di ul.topnav li a sehingga yang membedakan adalah tambahan <h1> pada tag html: Code: /* ======================================== Navigasi ========================================= */ ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #F44336; box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); position: fixed; top: 0; left: 0; width: 100%; } ul.topnav li.header {float: left;} ul.topnav li.header h1 {margin: 0;} ul.topnav li.header h1 a {font-size: 32px;} /* Ukuran huruf logo */ ul.topnav li {float: right;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 22px 16px; text-decoration: none; transition: 0.3s; font-size: 17px; line-height: 40px; /* Coba ubah bagian ini untuk mengetahui perbedaan */ } HTML: <ul class="topnav"> <li class="header"><h1><a href="#!">SETASHOP</a></h1></li> <li><a href="#!">Contact</a></li> <li><a href="#!">Testimonial</a></li> <li><a href="#!">Team</a></li> <li><a href="#!">About</a></li> <li><a href="#!">Home</a></li> </ul> Untuk demonya bisa dilihat disini: https://www.pramudito.com/files/html/nav-height.html
@Damar berarti di dalam tag <ul> semua yak ? Saya kerepotan harus mengurutkan menggunakan position: relative;
Iya, itu kebetulan saya samakan antara menu dan logo jadi <li> berada di dalam <ul>, dan <ul> seharusnya berada di dalam <nav> tapi saya lupa menambahkannya Urutannya terbalik mungkin karena float:right jadi dihitung dari kanan dan baru ingat navigasi yang saya buat itu position:fixed alias navigasi melayang/overlay
Codenya : == CSS == Code: h1,h2,h3,h4,h5,h6{font-weight:700;line-height:normal;} h1{font-size:200%}h2{font-size:180%}h3{font-size:160%}h4{font-size:140%}h5{font-size:120%}h6{font-size:100%} .header-wrapper{ background: #F44336; padding: 45px; } ul.top{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background: #F44336; box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); position: fixed; top: 0; left: 0; width: 100%; } ul.top li.headermenu{ float: left; } ul.top li.headermenu h1{ margin: 0; } ul.top li{ float: right; } ul.topnav li.header h1 a {font-size: 32px;} ul.top li a{ display: inline-block; color: #f2f2f2; text-align: center; padding: 22px 16px; text-decoration: none; transition: 0.3s; line-height: 50px; } == HTML == Code: <div class="header-wrapper"> <div id="header"> <ul class="top"> <li class="headermenu"><h1>SETASHOP</h1></li> <li><a href="#!">Contact</a></li> <li><a href="#!">Testimonial</a></li> <li><a href="#!">Team</a></li> <li><a href="#!">About</a></li> <li><a href="#!">Home</a></li> </ul> </div> </div>
Coba yang ini: HTML: <div class="header-wrapper"> <div id="header"> <ul class="top"> <li class="headermenu"><h1><a href="#!">SETASHOP</a></h1></li> <li><a href="#!">Contact</a></li> <li><a href="#!">Testimonial</a></li> <li><a href="#!">Team</a></li> <li><a href="#!">About</a></li> <li><a href="#!">Home</a></li> </ul> </div> </div> Saya logonya pakai link