Hallo, hab mir eine kleine navbar erstellt und möchte diese auch bischen responsive machen.
Bisher passt alles aber wen ich die window size bis zu einem punkt kleiner mache, klappt es in sich zu sammen.
Btw ja ich weiß mein code ist nicht strukturiert
Bild in full size :
Bild mit fehler:
CSS:
Bisher passt alles aber wen ich die window size bis zu einem punkt kleiner mache, klappt es in sich zu sammen.
Btw ja ich weiß mein code ist nicht strukturiert
Bild in full size :
HTML:
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Startseite</title>
<link rel="stylesheet" href="G:css\style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img class="logo" src="G:logo.png"
<li><a class="bild" <a href="shop.html">Shop</a></li>
<nav>
<ul class="navlinks">
<li><a href="G:\WTF\html\barcode.html">Barcode Scanner</a></li>
<li><a href="G:\WTF\html\firewall.html">Firewall</a></li>
<li><a href="G:\WTF\html\about.html">Über das Projekt</a></li>
</ul>
</nav>
<a class="cta" href="#"><button>Kontakt</button></a>
</header>
<h1>Abschlußprojekt über Lagerlogistik<h1>
<h2> 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..<br><br><br><br><br><br><br><br><br><br><br><br><br><br></h2>
</body>
</html>CSS:
Code:
* {
box-sizing: border-box;
margin:0px;
padding:0px;
background-color:#2f3037;
}
li,a,button, .bild
{
font-family:'Montserrat', sans-serif;
font-weight:800px;
font-size: 21px;
color:#edf0f1;
text-decoration: none;
list-style: none;
}
h1
{
font-family:'Montserrat', sans-serif;
font-size: 24px;
color:#edf0f1;
padding: 30px 5%;
}
h2
{
border:1px transperent;
border-radius: 14px;
font-family:'Montserrat', sans-serif;
font-size: 18px;
color:#edf0f1;
padding: 10px 8%;
padding-right: 10px;
padding-left: 10px;
margin-left: 120px;
margin-right: 120px;
background-color:#3b3c45;
}
header
{
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 5%;
}
img
{
margin-right: auto;
max-width: 80px;
max-height: 60px;
}
.navlinks li
{
list-style: none;
display: inline-block;
padding:0px 20px;
}
.bild
{
margin-right: auto;
list-style:none;
color: #66cc99;
}
button
{
padding: 9px 25px;
border:none;
}