Mixed-John
Neues Mitglied
Hi Leute,
dank der Hilfe der Community konnte ich die Website von meinem Vater fertigstellen. (www.skiundtennis.de)
Leider hab ich immer noch ein paar Probleme mit der Navigation und zwar möchte ich die einzelnen Navigationselemente zentrieren. Ich weiss leider nicht wie ich das hinbekomme, hab schon versucht durch das setzen von margin:auto und padding:auto die nav elemte zu zentrieren hat aber leider nicht geklappt. Hat einer von euch ne idee?
Schon mal vielen Dank im Vorraus:)
Anmerkung: Im Anhang ist der Quellcode von der Html seite http://skiundtennis.de/Veranstalter.html
Hier ein Teil vom HTML Code:
</head>
<body>
<div id="Content">
<div id="Header">
<img src="img/Veranstalter-Header.jpg">
</div>
<div id="VNavi">
<ul>
<li><a href="HSki.html">Ski</a></li>
<li><a href="HTennis.html">Tennis</a></li>
<li><a href="HGolf.html">Golf</a></li>
<li><a href="index.html">Navigation ⟵ </a></li>
</ul>
</div>
Hier mal mein Css code:
#VNavi{
background-color: #8D8D8D;
width: 800px;
height: 48px;
font-size: 16px;
margin:auto;
padding:auto;
}
#VNavi ul{
margin: 0;
padding: 15px;
}
#VNavi li{
list-style:none;
display:inline-block;
margin-left:50px; padding: 0;
}
#VNavi a{
text-decoration: none;
padding-left: 20px;
padding-rigt: 20px;
padding-bottom: 7px;
padding-top: 7px;
color: #FFF;
border-right: #000 medium;
font-weight: bold;
}
#VNavi a:hover, #VNavi a:focus,#VNavi a:active{
background-color: #FFF;
color: #000000;
padding-right: 10px;
padding-left: 10px;
padding-top: 25px;
padding-bottom: 16px;
border-top: #000 medium;
font-size: 16px;
box-shadow: 0px 2px 5px -2px #000000;
-webkit-box-shadow: 0px 2px 5px -2px #000000;
-moz-box-shadow: 0px 2px 5px -2px #000000;
}
#VNavi a:active{
color: black;
}
dank der Hilfe der Community konnte ich die Website von meinem Vater fertigstellen. (www.skiundtennis.de)
Leider hab ich immer noch ein paar Probleme mit der Navigation und zwar möchte ich die einzelnen Navigationselemente zentrieren. Ich weiss leider nicht wie ich das hinbekomme, hab schon versucht durch das setzen von margin:auto und padding:auto die nav elemte zu zentrieren hat aber leider nicht geklappt. Hat einer von euch ne idee?
Schon mal vielen Dank im Vorraus:)
Anmerkung: Im Anhang ist der Quellcode von der Html seite http://skiundtennis.de/Veranstalter.html
Hier ein Teil vom HTML Code:
</head>
<body>
<div id="Content">
<div id="Header">
<img src="img/Veranstalter-Header.jpg">
</div>
<div id="VNavi">
<ul>
<li><a href="HSki.html">Ski</a></li>
<li><a href="HTennis.html">Tennis</a></li>
<li><a href="HGolf.html">Golf</a></li>
<li><a href="index.html">Navigation ⟵ </a></li>
</ul>
</div>
Hier mal mein Css code:
#VNavi{
background-color: #8D8D8D;
width: 800px;
height: 48px;
font-size: 16px;
margin:auto;
padding:auto;
}
#VNavi ul{
margin: 0;
padding: 15px;
}
#VNavi li{
list-style:none;
display:inline-block;
margin-left:50px; padding: 0;
}
#VNavi a{
text-decoration: none;
padding-left: 20px;
padding-rigt: 20px;
padding-bottom: 7px;
padding-top: 7px;
color: #FFF;
border-right: #000 medium;
font-weight: bold;
}
#VNavi a:hover, #VNavi a:focus,#VNavi a:active{
background-color: #FFF;
color: #000000;
padding-right: 10px;
padding-left: 10px;
padding-top: 25px;
padding-bottom: 16px;
border-top: #000 medium;
font-size: 16px;
box-shadow: 0px 2px 5px -2px #000000;
-webkit-box-shadow: 0px 2px 5px -2px #000000;
-moz-box-shadow: 0px 2px 5px -2px #000000;
}
#VNavi a:active{
color: black;
}
