Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Bagaimana Cara Membuat Logo dan Menu Bersebelahan
Saya ingin membuat logo dan menu (navigation) bersebelahan dalam satu kotak. Seperti header sekolah koding saat ini.
Saya punya kode sebagai berikut
== CSS ==
.header-wrapper{
background: #F44336;
padding: 50px;
width: 100%;
}
#header{
float: left;
width: 40%;
}
#sub-menu{
float: left;
width: 60%;
}
#sub-menu li{
padding: 2px;
display: inline-block;
}
#sub-menu a{
text-decoration: none;
color: #fff;
padding: 5px;
font-size: 120%;
}
== 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="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
Untuk hasil sementara saat ini seperti ini
Terima kasih, semoga bisa dibantu
10 Jawaban:
ini sepertinya bisa
<li><a href="#"><span class=fa fa-home>Home</li>
@kuntoro46 itu kan cuma nambah font awesome, maksudnya biar rapi di tengah kotak2 itu. Itu kan di gambar ada dibawah :)
Lebih baik pakai bootstrap bro simpel dan cepat,
Tapi kalau mau native bisa sih,
Pakai
.container {
display: block;
}
#header,
#sub-menu {
display: inline-block;
}
<div class="container">
<div id="header"></div>
<div id="sub-menu"></div>
</div>
Maaf kalau bukan yang dimaksud karena pertanyaan anda kurang jelas hehe
Biar bisa bersebelahan, ilangin aja width nya.Di header dan submenu
melihat kodingan bang @trihap sih harusnya gk sampe kebawah gitu, mungkin itu effect floatnya , coba di kasih class clearfix di setiap setelah penggunaan float
.clearfix::after{
clear:both;
content:'';
display:table;
}
coba taruh class clearfix di bagian .header-wrapper nya itu yang saya tau dan saya belum ngetes kodenya sih hehehe, lagi males bang :D
@sector18 bisa lihat header sekolahkoding? Ya seperti itu, yang saya inginkan.
@naufalhfzhn kok tidak ada perubahan apapun ya? Hmm
Jawaban Terpilih
uda saya coba bisa kok.. taruh classnya mungkin salah , kyk gini harusnya
<div class="header-wrapper clearfix">
font-size biasakan pakai pixel aja, jangan %
coba pake css flexbox sperti ini mudah2an bs membantu
<div class="header-wrapper">
<div class="brand-logo">
<h1>SETASHOP</h1>
</div>
<ul class="sub-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
.header-wrapper {
background-color: #F44336;
padding: 0 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.brand-logo {
width: 20%;
}
.sub-menu {
width: 80%;
text-align: right;
}
.sub-menu li {
display: inline-block;
margin-left: 10px;
}
.sub-menu li a {
text-decoration: none;
color: #fff;
font-size: 14px;
}
.sub-menu li a:hover {
text-decoration: underline;
}
