Issue
You can see the "visually hidden" hit boxes of the previous and next buttons. Also, the indicators on the bottom look really weird. And it doesn't slide as smoothly as it should.
I looked everywhere and tried everything I could, but im just out of ideas what it could be. So if someone could please help me, I would be delighted.
h1 {
text-align: center;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 50px;
}
.row {
height: 120px;
}
.text-container {
padding-top: 56px;
}
.c-item {
height: 500px;
}
.c-image {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/stylesheet.css">
<title>Home</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand mb-0 h1" href="#">Miltons Hotel</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle-navigation">
<span class="navbar-toggler-icon"></span>
Menu
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item ">
<a href="Impressum.html" class="nav-link">Impressum</a>
</li>
<li class="nav-item ">
<a href="Hilfe.html" class="nav-link">Help</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false" role="button">
Login
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a href="Loginuser.html" class="dropdown-item">Login</a>
</li>
<li>
<a href="Registrierung.html" class="dropdown-item">Sign Up</a>
</li>
</ul>
</ul>
<div class="ml-auto"></div>
<form class="d-flex">
<input type="text" class="form-control me-2">
<button type="submit" class="btn btn-primary">
Search
</button>
</form>
</div>
</div>
</nav>
<div id="slider" class="carousel slide text-container" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#slider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#slider" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#slider" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active c-item">
<img src="img/carousel1.jpg" class="d-block w-100 c-image" alt="Slide 1">
</div>
<div class="carousel-item c-item">
<img src="img/carousel2.jpg" class="d-block w-100 c-image" alt="Slide 2">
</div>
<div class="carousel-item c-item">
<img src="img/carousel3.jpg" class="d-block w-100 c-image" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#slider" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slider" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container text-container">
<div class="row">
<div class="col-12">
<h1>Milton Hotels</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Solution
The problem is that you included Bootstrap CSS v4.3.1
and Bootstrap JS v5.2.2
.
Change Bootstrap CSS from v4.3.1
to v5.2.2
.
See the snippet below.
h1 {
text-align: center;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 50px;
}
.row {
height: 120px;
}
.text-container {
padding-top: 56px;
}
.c-item {
height: 500px;
}
.c-image {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/stylesheet.css">
<title>Home</title>
</head>
<body>
<div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand mb-0 h1" href="#">Miltons Hotel</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle-navigation">
<span class="navbar-toggler-icon"></span>
Menu
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item ">
<a href="Impressum.html" class="nav-link">Impressum</a>
</li>
<li class="nav-item ">
<a href="Hilfe.html" class="nav-link">Help</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false" role="button">
Login
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a href="Loginuser.html" class="dropdown-item">Login</a>
</li>
<li>
<a href="Registrierung.html" class="dropdown-item">Sign Up</a>
</li>
</ul>
</ul>
<div class="ml-auto"></div>
<form class="d-flex">
<input type="text" class="form-control me-2">
<button type="submit" class="btn btn-primary">
Search
</button>
</form>
</div>
</div>
</nav>
<div id="slider" class="carousel slide text-container" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#slider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#slider" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#slider" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active c-item">
<img src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" class="d-block w-100 c-image" alt="Slide 1">
</div>
<div class="carousel-item c-item">
<img src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" class="d-block w-100 c-image" alt="Slide 2">
</div>
<div class="carousel-item c-item">
<img src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" class="d-block w-100 c-image" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#slider" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slider" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="container text-container">
<div class="row">
<div class="col-12">
<h1>Milton Hotels</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Answered By - Cervus camelopardalis
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.