Ohne deinen Code angesehen zu haben: Es liegt mit ziemlicher Sicherheit daran, dass der Defaultwert für die vertikale Ausrichtung baseline ist, dadurch kommt die Lücke zu Stande. Lässt sich leicht beheben, indem man dem Bild ein vertical-align: top; gibt, siehe hier:
https://jsfiddle.net/Sempervivum/ogscxL7e/5/
Häufiges Problem übrigens.
Danke Sempervivum, hat wunderbar geklappt.
Könnte sein, dass es ganz einfach an der Defaulteinstellung vom CSS liegt - da werden Bilder mit 'verical-align: baseline;' formatiert. Baseline ist aber eben nicht unten, sondern erzeugt einen wenige Pixel großen Abstand nach unten.
Versuche es mal mit vertical-align: top; ... oder vertical-align: bottom;
Danke Sailor, hat wunderbar geklappt.
Hallo 
,
ich hab ein Problem mit meiner Seite und zwar habe ich einen Abstand zwischen Header-Banner und Nav Leiste.
Foto:
html-seminar.de/woltlab/attachment/2055/
Ich habe jetzt schon recht lange nach dem Fehler gesucht aber komme einfach nicht weiter..
hier einmal das Html und CSS für euch:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="******">
<title>*********</title>
</head>
<body>
<!-- Header-BANNER -->
<header>
<img class="header-banner" src="Bilder-usw\header-banner.jpg" alt="Ein Banner-Foto von einer Wiese.">
<a href="Index.html">
<img src="Bilder-usw\logo-*********.png" alt="Firm-Logo von *******.">
</a>
<!-- NAVIGATIONSLEISTE -->
<nav id="header-nav">
<div class="container" id="desktop-nav">
<div class="row">
<div class="col-6">
<ul>
<li class="active"><a href="index.html">Startseite</a></li>
<li><a href="leistung.html">zwischenRaum</a></li>
<li><a href="kontakt.html">Shiatsu</a></li>
<li><a href="impressum.html">Somatic Experiencing</a></li>
<li><a href="impressum.html">Angebot</a></li>
<li><a href="impressum.html">Über mich</a></li>
<li><a href="impressum.html">Aktuell</a></li>
<li><a href="impressum.html">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>-----------------------------------------------------------------------------------------------------------------------------------------
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Header-BANNER */
.header-banner
{
width: 100%;
max-height: 250px;
overflow: hidden;
z-index: 0;
}
header a > img {
position:absolute;top:30px;left:30px;
width: 300px;
height: auto;
z-index: 1;
}
/* NAVIGATIONSLEISTE */
#header-nav {
width: 100%;
height: 50px;
background-color: #C01959;
}
#header-nav ul {
margin: 0;
padding: 0;
height: 100%;
}
#header-nav ul > li {
display: inline-block;
height: 100%;
padding: 0 .4rem 0 .4rem
}
#header-nav ul > li > a {
margin-top: .8rem;
display: inline-block;
}
#header-nav ul > li > a:link {
color: #FFF;
text-decoration: none;
}
#header-nav ul > li > a:visited {
color: #FFF;
text-decoration: none;
}
#header-nav ul > li > a:active {
color: #E5E5E5;
text-decoration: none;
}
#header-nav ul > li > a:hover {
color: red;
text-decoration: none;
}
#header-nav .col-6 {
padding-top: 0;
padding-bottom: 0;
}
#header-nav .container,
#header-nav .row,
#header-nav .col-6 {
height: 100%;
}
/* GRID-SYSTEM */
.container {
width: 95%;
margin-left: auto;
margin-right: auto;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*='col-'] {
float: left;
min-height: 1px;
padding: .8rem;
}
.col-1 {
width: 16.666%;
}
.col-2 {
width: 33.333%;
}
.col-3 {
width: 50%;
}
.col-4 {
width: 66.666%;
}
.col-6 {
width: 100%;
}
@media (max-width: 1024px) {
.col-1 { width: 33.33%;}
}
@media (max-width: 768px) {
.col-1 { width: 50%;}
.col-2 { width: 100%;}
.col-3 { width: 100%;}
.col-4 { width: 100%;}
}
@media (max-width: 480px) {
.col-1 { width: 100%;}
.col-2 { width: 100%;}
.col-3 { width: 100%;}
.col-4 { width: 100%;}
}Würde mich sehr über hilfreiche Antworten freuen.
MfG
Marv