Website?
Hallo
Ich habe direkt 2 Fragen:
- Wieso ist um diese Navbar ein weisser Balken?
- Wenn ich über die Links(in der Navbar) hovere wird nur ein kleiner Hintergrund helleres blau. Jedoch möchte ich das von der Höhe die ganze Navbar helleres Blau wird. Wie kann ich dass machen?
Bei Fragen melden. Vielen Dank im Voraus
Lg Luca
CSS:
body{
font-family:sans-serif;
font-size: 16px;
}
/* Navbar */
.topnav {
background-color: #1E262D;
overflow: hidden;
}
/* Logo Navbar */
.logonav{
width: 20%;
height: 20%;
min-width: 120px ;
min-height: 91px;
}
/* Links */
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px;
text-decoration: none;
margin-top: 2%;
margin-bottom: 2%;
}
/* Links Hover */
.topnav a:hover {
background-color: #2C3E50;
background-size: 100%;
}
.topnav .icon {
display: none;
}
/* Media Queries */
@media screen and (max-width: 600px) {
.topnav a:not(.child) {display: none;}
.topnav a.icon {
float: right;
display: block;
background-color: #1E262D;
color: #ddd;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
background-color: #1E262D;
color: #ddd;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
HTML:
<!DOCTYPE html>
<html lang="en">
<!--Head-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="java.js"></script>
</head>
<body>
<div class="topnav" id="myTopnav">
<!--<img src="logoblue.png" alt="logo" class="logonav">-->
<a href="contact.html">Contact</a>
<a href="portfolio.html">Portfolio</a>
<a href="index.html" >About me</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</body>
</html>
2 Antworten
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Internet
Zu 1.
Das body-Tag hat als Default Setting den wert margin: 8px;
https://www.w3schools.com/tags/tag_body.asp
Setz diesen also mal auf 0, dass sollte den weißen Rand entfernen.
body{
margin:0;
}
Zu 2.
Der fehlende Bereich sind die 2% die du als margin-top und als margin-bottom definierst. Versuch also mal die Flächen anders zu definieren.
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
1) Das body-Element definiert standardmäßig noch einen Abstand nach außen. Setze also einfach nur den Außenabstand auf 0.
body {
/* ... */
margin: 0;
}
2) Die Ursache liegt in dem margin, den du für die a-Elemente definierst.
.topnav a {
/* ... */
margin-top: 2%;
margin-bottom: 2%;
}
Entferne beide Properties, stattdessen könntest du den vertikalen Innenabstand erhöhen.
Geschätzt:
padding: 30px 16px;
