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%!
kenapa kontennya ikut juga ke fixed?
cara mengatasi bagian element yg juga ikut kefixed itu gimana ya gan masalahnya add di class head-konten
<div class="bg">
<div class="header">
<div class="wrap">
<h1 class="logo"><a href="#">me</a></h1>
<nav>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</nav>
<div class="head-konten">
<p>
Death is like a wind,<br> Always by my side.
</p>
</div>
</div>
</div>
</div>
cssnya
.bg{
background-image: url("img/bg.jpg");
background-size: cover;
height: 700px;
background-position: center;
background-repeat: no-repeat;
}
.wrap{
width: 85%;
margin: 0 auto;
}
.header{
/*background-color: #43d;*/
height: 80px;
line-height: 80px;
width: 100%;
position: fixed;
}
.logo{
float: left;
font-size: 40px;
text-transform: uppercase;
}
.logo a{
color: white;
transition: .3s;
}
.header nav{
float: right;
}
.header::after{
display: table;
content: "";
clear: both;
}
.header nav li{
display: inline-block;
position: relative;
margin-left:50px;
}
.header nav li a{
font-size: 40px;
color: white;
text-transform: uppercase;
transition: .5s;
}
.header nav li a:hover{
color:#444;
}
.logo:hover a{
color:#444;
}
.head-konten{
position: absolute;
top: 280px;
left:180px;
}
.head-konten p{
font-size: 50px;
text-transform: capitalize;
color:red;
font-weight: bold;
}
mohon bantuanya ya gan
Tanggapan
diperjelas pertanyannya, seperti apa gambarnya, yang kefix yang mana, yang dimau seperti apa
4 Jawaban:
jika ingin navbarnya saja yang fixed, kamu salah menutup tag div nya. coba kode di bawah ini semoga sesuai dengan yang kamu mau
<pre> <div class="bg">
&lt;div class="header"&gt;
&lt;div class="wrap"&gt;
&lt;h1 class="logo"&gt;&lt;a href="#"&gt;me&lt;/a&gt;&lt;/h1&gt;
&lt;nav&gt;
&lt;li&gt;&lt;a href="#"&gt;menu&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;menu&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;menu&lt;/a&gt;&lt;/li&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="head-konten"&gt;
&lt;p&gt;
Death is like a wind,&lt;br&gt; Always by my side.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
Biasanya memang gitu sama dengan h1 dan paragraph dalam satu div paragraphnya ikut jadi h1