Bilah navigasi di situs web saya:

enter image description here

Seperti yang Anda lihat pada gambar bilah navigasi di situs web saya, itu terlihat baik-baik saja tetapi setiap kali saya menekan login atau mencoba menggunakan Pencarian tidak ada yang terjadi, itu hanya tetap di halaman beranda dan saya tidak tahu apa yang salah. Saya sudah mencoba youtube tetapi tidak menemukan solusi untuk itu. saya sangat baru di css dan html jadi ini mungkin kesalahan bodoh itulah sebabnya itu tidak berfungsi tetapi saya tidak tahu apa yang telah saya lakukan salah

  body {
  background-image: linear-gradient(to top, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);
  text-align: center;
}

#main {
  width: 1000px;
  height: 600px;
  background: #000000;
  border-radius: 30px;
  margin: 25px auto;
  border: solid 2px #f2f2f2;
  padding: 10px;
}

h1 {
  text-align: center;
  font-family: "Calibri";
  font: 24pt;
  color: #f2f2f2;
}

hr {
  height: 2x;
  color: #f2f2f2;
}

p {
  font-family: "Calibri";
  font-size: 16pt;
  color: #f2f2f2;
  text-indent: 48px;
  text-align: center;
}


/*Nav-bar */

.topnav {
  background-color: #000000;
  overflow: hidden;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: "Calibri"
}

.topnav a:hover {
  background-color: #d9d9d9;
  color: black;
}

.topnav a.active {
  background-color: #464646;
  color: white;
}

.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  margin-top: 8px;
  margin-right: 16px;
  font-size: 17px;
}


/*Link:Text */

.container {
  position: relative;
  width: 50%;
}

.container img {
  width: 90%;
  height: auto;
  border-radius: 10px;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: f2f2f2;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.container .btn:hover {
  background-color: black;
}

.pic-text {
  position: absolute;
  top: 300px;
  left: 30px;
  font-size: 30px;
  color: f2f2f2;
  font-family: "Calibri"
<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#Login">Login</a>
  <input type="text" placeholder="Search..">
</div>

<div id="main">
  <h1>Title</h1>
  <hr>
  <p>Text
    <div class="container">
      <img src="https://storage.googleapis.com/afs-prod/media/fc473ecb7778468aa0d454a71839c2ab/3000.jpeg" alt="Area51">
      <button class="btn">Read</button>
      <div class="Pic-Text">Picture Text</div>
    </div>

</div>
0
pat 8 Januari 2021, 00:33

3 jawaban

Jawaban Terbaik

Anda harus memberikan href jalur seperti href='/login.html' Anda.

0
ishiku_Ultra 7 Januari 2021, 21:48

Anda telah membuat tautan tombol "Beranda" ke bagian beranda menggunakan pemilih id # (yang menautkan ke id bagian di laman saat ini). Untuk menautkan ke halaman terpisah, Anda harus menentukan file.

Elemen input harus dibungkus dalam bentuk yang menentukan di mana dan bagaimana data akan dikirim.

<div class="topnav">
  <a class="active" href="home.html">Home</a>
  <a href="Login.html">Login</a>
  <form method="post" action="your_page_here.html">
    <input type="text" placeholder="Search..">
  </form>
</div>
-1
Raheel Junaid 7 Januari 2021, 21:41

Lompat ke bagian file yang ditentukan

Jika tag <a></a> Anda memiliki nilai atribut href="..." yang diawali dengan tanda hashtag (misalnya #foobar), maka tag akan menggulir ke elemen yang memiliki id="foobar".

Sebagai contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>

  <a href="#login">Click on me to go to the "Login" section</a>
  
  <div id="home" style="font-size: 48px">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  
  <a href="#home">Click on me to go to the "Home" section</a>
  
  <div id="login">
    Some login div
  </div>
  
</body>
</html>

Lompat ke dokumen HTML yang ditentukan

Atau, jika Anda ingin menavigasi ke dokumen HTML yang berbeda, coba tambahkan beberapa file HTML ke direktori yang sama dengan dokumen ini dan ubah tag <a></a> Anda menjadi ini: <a href="./yourFileName.html"></a>, maka Anda harus menambahkan yourFileName.html dan itu akan berhasil!

0
RamoFX 7 Januari 2021, 21:41