Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

----------------------------------------------------------------------------------------------------------------------------------

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

----------------------------------------------------------------------------------------------------------------------------------

Ich hoffe ihr könnt mir helfen!

Answer 1

[lillian92]

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.

Answer 2

[medmonk]

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

Comments

[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

Answer 3

[DnYGmR]

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 ;)