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!

CSS, html5
3 Antworten
Wie kann ich die Höhe eines HTML Elementes bestimmen?

Hey, ich habe mir Gestern eine Vorlage für einen Flexslider heruntergeladen und auf meiner Webseite integriert. Mit viel Hilfe habe ich es geschafft. Jedoch gibt es nun Probleme mit der Grösse http://projektarbeit-webseite.de/. Jetzt möchte ich die Grösse dieses Sliders ändern und verstehe den Code der Vorlage nicht wirklich (Vorlage: http://flexslider.woothemes.com/).

Die Grösse sollte ca 1000px breit sein und 500px hoch (wenn möglich)

Die Wichtigen HTML Teile:

<link href="design.css" rel="stylesheet">
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<div class="flexslider"> <ul class="slides">  <li>   <img alt="some slide" src="slide1.png" width="500" height="500">  </li>  <li>   <img alt="some slide" src="slide1.png" width="500" height="500">  </li>  <li>   <img alt="some slide" src="slide1.png" width="500" height="500">  </li>  <li>   <img alt="some slide" src="slide1.png" width="500" height="500">  </li> </ul> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.flexslider-min.js"></script> <script src="javascript.js"></script>

Mein CSS Code:

body {
background-image: url("http://projektarbeit-webseite.de/Unbenannt.png");
background-size: 100%;
margin: 0pt;
}
.title { font-size: 35pt; font-family: Stencil; color: black; text-align: center; background-color: #81DAF5; background-size: 2000px; height: 80px; display: flex; align-items: center; justify-content: center; }


.navigation { background-color: white; font-size: 25px; text-align: center; height: 80px; display: flex; align-items: center; justify-content: center; }


.t { color: gray; font-size: 35px; font-weight: bold; text-align: center; }


a:link, a:active, a:visited { color: gray; }


a:hover { color: black; }

hr {
width: 100%;
border: 0;
height: 5pt;
background-color: #CEECF5;
}

Code der Vorlage:

http://projektarbeit-webseite.de/flexslider.css

Javascript der Vorlage:

$(window).load(function() {
 $('.flexslider').flexslider({
  animation: "slide"
 });
})
Internet, Software, Website, HTML, IT, Programmieren, CSS, Wordpress, JavaScript, slider, Woocommerce
4 Antworten

Was möchtest Du wissen?