Mixed-John
Neues Mitglied
Servus Leute,
bin relativ neu hier und habe folgendes Problem mit meinem Html code:
Ich möchte bei der Navigation Trennstriche mit border einfügen, leider funktioniert das aber irgendwie nicht :(
Ein weiteres Problem ist auch das die Navigation nicht an das obere bild andockt sondern ein geringer Abstand bleibt.
Aber seht selbst:
Html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ski</title>
<link href="Css/layoutS.css" rel="stylesheet" media="screen"/>
</head>
<body>
<center>
<div id="Header">
<img src="img/Skih.jpg">
</div>
<div id="Navigation">
<ul>
<li><a href="#">Winterprogramm</a></li>
<li><a href="#">Sterzing</a></li>
<li><a href="#">Skisafari</a></li>
<li><a href="#">Trafoi-Skisafari</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</center>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-position: center top;
background-image: url(../img/Layout-Website.jpg);
background-repeat:repeat-y;
background-color:#d9e3e7;
font-family: open-sans, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#Header{
}
#Navigation{
background-color: #003368;
width: 800px;
font-size: 16px;
margin-top: 0;
padding-top: 0;
font-weight: bold;
}
#Navigation ul{
list-style:none;
margin: 0;
padding:10px;
border-top: 2px solid black;
border-bottom:2px solid black;
border-right:#000 medium;
}
#Navigation li{
display:inline;
margin: 0.4em; padding: 0;
width: 800px;
border-right: #000 medium;
}
#Navigation a{
text-decoration: none;
padding-left: 10px;
padding-rigt: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: #FFF;
border-right:#000 medium;
}
#Navigation a:hover, #Navigation a:focus, #Navigation a:active{
Width:800px;
background-color:#FFF;
color:#003368;
padding: 10px 5px;
border-top:#000 medium;
}
bin relativ neu hier und habe folgendes Problem mit meinem Html code:
Ich möchte bei der Navigation Trennstriche mit border einfügen, leider funktioniert das aber irgendwie nicht :(
Ein weiteres Problem ist auch das die Navigation nicht an das obere bild andockt sondern ein geringer Abstand bleibt.
Aber seht selbst:
Html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ski</title>
<link href="Css/layoutS.css" rel="stylesheet" media="screen"/>
</head>
<body>
<center>
<div id="Header">
<img src="img/Skih.jpg">
</div>
<div id="Navigation">
<ul>
<li><a href="#">Winterprogramm</a></li>
<li><a href="#">Sterzing</a></li>
<li><a href="#">Skisafari</a></li>
<li><a href="#">Trafoi-Skisafari</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</center>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background-position: center top;
background-image: url(../img/Layout-Website.jpg);
background-repeat:repeat-y;
background-color:#d9e3e7;
font-family: open-sans, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#Header{
}
#Navigation{
background-color: #003368;
width: 800px;
font-size: 16px;
margin-top: 0;
padding-top: 0;
font-weight: bold;
}
#Navigation ul{
list-style:none;
margin: 0;
padding:10px;
border-top: 2px solid black;
border-bottom:2px solid black;
border-right:#000 medium;
}
#Navigation li{
display:inline;
margin: 0.4em; padding: 0;
width: 800px;
border-right: #000 medium;
}
#Navigation a{
text-decoration: none;
padding-left: 10px;
padding-rigt: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: #FFF;
border-right:#000 medium;
}
#Navigation a:hover, #Navigation a:focus, #Navigation a:active{
Width:800px;
background-color:#FFF;
color:#003368;
padding: 10px 5px;
border-top:#000 medium;
}
