Warum ist da ein weißer Rand?

3 Antworten

Hi LiamOlek123,

der "weiße Rand" um genauer zu sein was du meinst ist der Abstand, kommt von der List selbst. ("ul") Um den zu entfernen, musst du lediglich der List "margin: 0" geben, oder am besten gleich allen HTML Elementen, damit man der Abstand nur dann erscheinen tut, wenn man ihn braucht. Und "padding" solltest du auch von der List entfernen, wie im Beispiel. (Kannst ja mal schauen was "padding" bewirkt, in dem du die Regel entfernst)

HIER EIN BEISPIEL

Ebenfalls empfehle ich dir auf deine HTML/CSS formatierung zu achten. Über nimm dir am besten das Format vom Beispiel. Und nicht zu vergessen, Code immer NUR entweder auf Seiten wie JsFiddle oder PasteBin oder sonstigen Posten.

LG Schark ;)

Wo ist ein weißer Rand? Bild würde helfen, da wir nicht wissen, welchen Rahmencode du hast und welche DIVs und Tags du sonst noch benützt!

Ich vermute, dass es oben und links und rechts ist? Das kommt höchstwahrscheinlich vom Body.

Füge mal das hier hinzu:

body {margin: 0px;}

PS.: Das white-space: no-warp; kannst du auch in den CSS-Teil einfügen.

Ich war mal so frei und habe dein Markup und CSS überarbeitet. Vor allem im CSS unnötige Formatierung entfernt sowie längere Verkettungen einzelner Selektoren mit Hilfe von Klassen verkürzt.

Markup:

<nav class="topbar-nav">
  <ul class="menu menu-primary">
    <li class="menu-item current"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Neumöbel-Logistik</a></li>
    <li class="menu-item"><a href="#">Lager & Logistik</a></li>
    <li class="menu-item"><a href="#">Werkstatt</a></li>
    <li class="menu-item"><a href="#">Kontakt</a></li>
  </ul>
</nav>

CSS:

.topbar-nav {
 width: 100%;
 background: rgba(255, 255, 255, 0.95) url("pfad/headerline.png");
 position: fixed;
 top: 0;
 z-index: 1000;
}

.menu {
 list-style-type: none;
 padding: 0;
 margin: 0;
}

.menu-primary {
 font: 700 1.15em/3.25em "Open Sans Condensed", sans-serif;
 text-align: center;
}
.menu-item {
 display: inline-block;
 position: relative;
 -webkit-transition: top 0.15s ease-in-out;
 transition: top 0.15s ease-in-out;
}

.menu-item:hover {
 top: 5px;
}

.menu-item:hover a, .menu-item:hover span {
 background: #c1cac5;
 color: #fff;
}

.menu-item a {
 color: #6b7770;
 text-decoration: none;
 text-transform: uppercase;
 display: block;
 border-radius: 0 0 6px 6px;
 -webkit-transition: background-color 0.075s ease-in-out, color 0.075s ease-in-out;
 transition: background-color 0.075s ease-in-out, color 0.075s ease-in-out;
 padding: 6px 1.5em 0.25em 1.5em;
}

.menu-primary .current a {
 background: #b1ddab;
 color: #fff;
}

.dropdown {
 display: none;
}

LG medmonk

Ach, ganz vergessen auf die eigentliche Frage zu antworten. Du musst lediglich dem <ul> Element deiner Liste ein margin von 0 zuweisen. Dann verschwindet auch auch der weiße Spalt oben.

#nav ul {
  position: relative;
  margin: 0;
}

Solche Sachen kannst du auch schnell selber herausfinden, in dem du die einzelnen Elemente mit Hilfe der Browser eigenen Developer-Tools (Chrome mit dem Shortcut Strg+Shift+i) untersuchst.

LG medmonk

0

Was möchtest Du wissen?