[ASK] Agar Logo di Kiri dan Menu di Kanan

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.

 

Apakah menggunakan vertical-align pilihan tepat?
@Garett @Ardilas @Dan @KangAndre

 

itu template apa?
Blogger? Buatan siapa? Apa namanya? Pengen nyoba otak atik juga..

 

Coding sendiri ini hehe,

 

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?

 

Nggak tetap berjajar. Coba lihat saja kode contoh yang diinginkan...

 

nyimak omm//./
gx ahli coding

 

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.

 

Gausah nyepam, silahkan baca Rules
Terima Kasih.

 

apa ini... kelupaan baca https://www.bersosial.com/pages/rules

 

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

 

@Damar kenapa tidak sesuai yak?

 

Hemm, bisa lihat kode-nya?

 

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

 

Ternyata ada perbedaannya juga ya,
Sekarang sudah bisa