• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Navigation Zentrieren

P

pfcrime

New member
Hi, ich hab ein Problem, und zwar zeigt es mir meine Navigationsbar nicht in der Mitte an. Findet jemand den Fehler?

HTML: 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Startseite</title>
		<meta name="description" content="">
		<meta name="author" content="Tim Nauheimer">
		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		<link rel="stylesheet" href="../../aufgabe02/css/screen.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../aufgabe02/css/nav_animation.css" type="text/css" media="screen" />
	</head>

	<body>
		<div>
			<header>
				<h1>Portfolio</h1>
			</header>
<!--NAVIGATION-->
			<div class="navileiste">
			<nav>
            <ul>
                <li class = "cat1">
                    <a href="navigation.html">Home</a>
                </li>
                <li class = "cat2">
                    <a href="gis_aufgaben.html">GiS Aufgaben</a>
                </li>
                <li class = "cat3">
                     <a href="#">Links</a>
                     <ul>
                         <li><a href="http://www.html-seminar.de/befehlsuebersicht.htm" target="_blank">HTML Befehle</a></li>
                         <li><a href="https://www.rzuser.uni-heidelberg.de/~x02/html/ti.htm" target="_blank">Liste HTML Befehle</a></li>
                         <li><a href="http://de.selfhtml.org/" target="_blank">self html</a></li>
                     </ul>                    
                </li>
                <li class = "cat5">
                    <a href="#">Kontakt</a>
                    <ul>
                        <li><a href="mailto:tim.nauheimer@hs-furtwangen.de">E-Mail</a></li>
                        <li><a href="https://www.facebook.com/timme.nauheimer" target="_blank">Facebook</a></li>
                        <li><a href="https://www.vimeo.com/tmnhmr" target="_blank">Vimeo</a></li>
                        <li><a href="https://www.instagram.com/pfcrime" target="_blank">Instagram</a></li>
                    </ul>                   
                </li>
                <li class = "cat4">
                    <a href="impressum.html">Impressum</a>
                </li>
            </ul>
        </nav>
      </div>
<!--NAVIGATION-->
<h2>Was geht ab?!</h2>
<!--FOOTER-->
			<div class="footer">
			<footer>
				<p>
					© Copyright  by Tim Nauheimer
				</p>
			</footer>
			</div>
<!--FOOTER-->
		</div>
	</body>
</html>

CSS Screen
Code: 
body {
	
	font-size: 11pt;
	color: #FFFFFF;
	font-family: Helvetica, Lucida, Arial;
	background-image: url(../png/background.png);
	background-position: center center;
    background-repeat: no-repeat;
    background-size:1920px 1200px;
    background-attachment: fixed;
    margin-top: 100px; 
    margin-left: 70px;
 	margin-right: 70px; 
 	margin-bottom: 10px; 
 	
}

h1{
	font-size: 46pt;
	color: #FACC2E;
	font-family:Helvetica, Lucida, Arial;
	text-align: center;
}

h2{
	font-size: 26pt;
	color: #FACC2E;
	font-family: Helvetica, Lucida, Arial;
}

h3{
	font-size: 14pt;
	color: #FACC2E;
	font-family: Helvetica, Lucida, Arial;
}

a.aufgabe:visited{
	color:white;
}

a.aufgabe{
	color:#FACC2E;
}

a.aufgabe:hover{
	color:#333333;
	font-style:italic;
}

div.navileiste{
	text-align:center;
    font-size:14pt;
}

p li{
	font-size: 11pt;
	color: #FFFFFF;
	font-family: Helvetica, Lucida, Arial;
}

div.footer{
	clear:left;
    text-align:center;
    bottom:20px;
}

/* Navigation*/

nav {

    width: 711px;
   
   
}
nav ul {

    padding: 0px;
    margin: 0px;
}
nav ul:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
nav ul,nav ul li{
    background-color: #FAFAFA;

}

nav ul li a {
    display: block;
    color: #333;
    padding: 14px 34px 14px 34px;
}
nav ul li:hover > ul {
    visibility: visible;
}
nav ul li ul{
    display: inline;
    visibility: hidden;
    position: absolute;
    padding:0px;
	  
    
}
nav ul li ul li{
    float: none;
}
nav ul li ul li a:hover{
    color: #333;
}

CSS nav_animation
Code: 
nav ul {
    padding: 0px;
    margin: 0px;
 

}
nav ul li {
	list-style: none;
    float:left;
    border-right: 1px solid #dfdfdf;
}
nav ul li a {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 14px 34px 14px 34px;
 
    -webkit-transition: background 0.3s ease-out 0s;
    -moz-transition: background 0.3s ease-out 0s;
    -o-transition: background 0.3s ease-out 0s;
    transition: background 0.3s ease-out 0s;
}
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a  {
    background-color: #FACC2E;
}
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a  {
    background-color: #FACC2E;
}
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
    background-color: #FACC2E;
}
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
    background-color: #FACC2E;
}
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
    background-color: #FACC2E;
}
nav ul li:hover > a {
    color: #FAFAFA;
}
nav ul li ul li a {
    color: #FAFAFA;
}
nav ul li ul li a:hover{
    color: #333;
    background-color: #FAFAFA !important;
}

nav ul li.cat1:active a, nav ul li.cat1:active > ul li a  {
    background-color: #FACC2E;
}
nav ul li.cat2:active a, nav ul li.cat2:active > ul li a  {
    background-color: #FACC2E;
}
nav ul li.cat3:active a, nav ul li.cat3:active > ul li a {
    background-color: #FACC2E;
}
nav ul li.cat4:active a, nav ul li.cat4:active > ul li a {
    background-color: #FACC2E;
}
nav ul li.cat5:active a, nav ul li.cat5:active > ul li a {
    background-color: #FACC2E;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben