• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigation zentrieren - Irgendwie klappt das nicht.

H

Hansii

Mitglied
Hallo.

Habe eine Datei (index.php). Da habe ich mit PHP die Datei "navi.php" einfegügt. Hier :#

index.php :

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bundesliga Saison 2012/2013</title>
<link rel="stylesheet" type="text/css" href="navi.css">
<meta name="description" content="Sie können alle Details über Fußball nachlesen oder in unserem Forum mit anderen diskutieren. Wenn Sie möchten, nehmen Sie an unserem kostenlosen Tippspiel mit.">
<meta name="keywords" content="Fussball   Sport   FC   Bundesliga   Bayern   München   Kostenlos   Schalke   Dortmund   DFB   Pokal">
<meta name="author" content="Christian Kraft">
</head>
<body>
<?php
include ("navi.php");
?>
</body>
</html>

navi.php :

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bundesliga Saison 2012/2013</title>
<link rel="stylesheet" type="text/css" href="navi.css">
<meta name="description" content="Sie können alle Details über Fußball nachlesen oder in unserem Forum mit anderen diskutieren. Wenn Sie möchten, nehmen Sie an unserem kostenlosen Tippspiel mit.">
<meta name="keywords" content="Fussball   Sport   FC   Bundesliga   Bayern   München   Kostenlos   Schalke   Dortmund   DFB   Pokal">
<meta name="author" content="Christian Kraft">
</head>
<body>
<div align="center" id='menu'>
<ul>
   <li class='has-sub '><a href='index.php'><span>Home</span></a></li>
   <li class='has-sub '><a href='bundesliga.php'><span>1. Bundesliga</span></a>
      <ul>
         <li><a href='bundesliga/spieltage.php'><span>Spieltage</span></a></li>
         <li><a href='bundesliga/tabelle.php'><span>Tabelle</span></a></li>
         <li><a href='bundesliga/sieger.php'><span>Sieger</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='bundesliga2.php'><span>2. Bundesliga</span></a>
      <ul>
         <li><a href='bundesliga2/spieltage.php'><span>Spieltage</span></a></li>
         <li><a href='bundesliga2/tabelle.php'><span>Tabelle</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='dfb-pokal.php'><span>DFB-Pokal</span></a>
      <ul>
         <li><a href='dfb-pokal/vorrunde1.php'><span>1. Vorrunde</span></a></li>
         <li><a href='dfb-pokal/vorrunde2.php'><span>2. Vorrunde</span></a></li>
         <li><a href='dfb-pokal/achtelfinale.php'><span>Achtelfinale</span></a></li>
         <li><a href='dfb-pokal/viertelfinale.php'><span>Viertelfinale</span></a></li>
         <li><a href='dfb-pokal/halbfinale.php'><span>Halbfinale</span></a></li>
         <li><a href='dfb-pokal/finale.php'><span>Finale</span></a></li>
         <li><a href='dfb-pokal/pokalsieger.php'><span>Pokalsieger</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='europa-league.php'><span>Europa League</span></a>
      <ul>
         <li><a href='europa-league/gruppenphase.php'><span>Gruppenphase</span></a></li>
         <li><a href='europa-league/sechzehntelfinale.php'><span>Sechzehntelfinale</span></a></li>
         <li><a href='europa-league/achtelfinale.php'><span>Achtelfinale</span></a></li>
         <li><a href='europa-league/viertelfinale.php'><span>Viertelfinale</span></a></li>
         <li><a href='europa-league/halbfinale.php'><span>Halbfinale</span></a></li>
         <li><a href='europa-league/finale.php'><span>Finale</span></a></li>
         <li><a href='europa-league/sieger.php'><span>Sieger</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='champions-league.php'><span>Champions League</span></a>
      <ul>
         <li><a href='champions-league/gruppenphase.php'><span>Gruppenphase</span></a></li>
         <li><a href='champions-league/achtelfinale.php'><span>Achtelfinale</span></a></li>
         <li><a href='champions-league/viertelfinale.php'><span>Viertelfinale</span></a></li>
         <li><a href='champions-league/halbfinale.php'><span>Halbfinale</span></a></li>
         <li><a href='champions-league/finale.php'><span>Finale</span></a></li>
         <li><a href='champions-league/sieger.php'><span>Sieger</span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='tippspiel.php'><span>Tippspiel</span></a>
       <ul>
         <li><a href='tippspiel/login.php'><span>Login</span></a></li>
         <li><a href='tippspiel/registrieren.php'><span>Registrieren</span></a></li>
         <li><a href='tippspiel/rangliste.php'><span>Rangliste</span></a></li>
         <li><a href='tippspiel/aktuelles.php'><span>Aktuelles</span></a></li>
       </ul>
   </li>
   <li><a href='gastebuch.php'><span>Gästebuch</span></a></li>
   <li><a href='forum.php'><span>Forum</span></a>
</ul>
</div>
</body>
</html>

navi.css :

Code: 
#menu ul, #menu li, #menu span, #menu a
{
margin: 0px;
padding: 0;
position: relative;
}


#menu: after, #menu ul: after
{
content: ";
display: block;
clear: both;
}


#menu a
{
color: #ffffff;
display: inline-block;
font-family: Arial;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}


#menu ul 
{
list-style: none;
}


#menu > ul > li 
{
float: left;
}


#menu > ul > li.active a 
{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}


#menu > ul > li.active a:hover
{  
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
filter: none;
}


#menu > ul > li a 
{
box-shadow: inset 0 0 0 1px #31B404;
-moz-box-shadow: inset 0 0 0 1px #31B404;
-webkit-box-shadow: inset 0 0 0 1px #31B404;
background: #31B404;
background: -moz-linear-gradient(top, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #31B404), color-stop(50%, #31B404), color-stop(51%, #31B404), color-stop(100%, #31B404));
background: -webkit-linear-gradient(top, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
background: -o-linear-gradient(top, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
background: -ms-linear-gradient(top, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
background: linear-gradient(to bottom, #31B404 0%, #31B404 50%, #31B404 51%, #31B404 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#31B404', endColorstr='#31B404', GradientType=0);
border-bottom: 1px solid #31B404;
border-top: 1px solid #31B404;
border-right: 1px solid #31B404;
line-height: 34px;
padding: 0 33px;
filter: none;
}


#menu > ul > li a:hover 
{
background: #8a8a8a;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ffffff), color-stop(100%, #ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ffffff 51%, #ffffff 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}


#menu > ul > li:first-child a 
{
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #5d5d5d;
}


#menu > ul > li:last-child a 
{
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}


#menu .has-sub:hover ul 
{
display: block;
}


#menu .has-sub ul 
{
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */ *width: 100%;
}


#menu .has-sub ul li
{
text-align: center;
}


#menu .has-sub ul li a 
{
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}


#menu a:hover 
{
color: #000000;
display: inline-block;
font-family: Arial;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #000000;
}

#menu { margin-left:60px; }

Wo muss ich genau was ändern, damit die Navigation immer in der Mitte ist ?

Danke
 
Werbung:
Pass auf. Includes mit PHP funktionieren vollkommen anders als Frames. In der navi.php darf nur der HTML-Code stehen, der tatsächlich in die index.php eingefügt werden soll. Kein DocType, kein <html>, kein <head>, kein <body>, sondern nur das eine <div> und sein Inhalt.

Siehe dir die paar Beispiel-Codes hier an: Tutorial: Simples Template mit PHP und Include » vlmedia

Um das <div> #menu zu zentrieren, musst du ihm eine feste Breite geben und ein
Code: 
margin: 0 auto;
verpassen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben