Problem bei der Zentrierung von horizonaler Navigation/Menü

[Disk Rhode]

Liebe Profis,

ich möchte eine horizontale Navigation erstellen und bin am verzweifeln bei der Darstellung an verschiedenen Browsern. Als Anfänger, der sich durch Codeschnipsel studieren und Selfhtml Forum lesen weiterbilde, komme ich hier nicht mehr weiter und nutze erstmals das Forum.

<div class="header">
  <div id="logo">
    <a href="./index.php?id=36"><img src="fileadmin/template/logo.jpg" alt="" border="0" width="195" height="71" /></a>
  </div>
  <div class="mainNavi">
    <ul class="top-bar">
      <li class="top-bar-no"><a href="index.php?id=35">TOP1</a></li>
      <li class="top-bar-act"><a href="index.php?id=39">TOP2</a>
        <ul class="sub-bar">
          <li class="sub-bar-no"><a href="index.php?id=42">SUB1</a></li>
          <li class="sub-bar-no"><a href="index.php?id=55">SUB2</a></li>
          <li class="sub-bar-act"><strong><a href="index.php?id=58">SUB3</a></strong>
            <ul class="sub-sub-bar">
              <li class="sub-sub-bar-no"><a href="index.php?id=104">SUBSUB1</a></li>
              <li class="sub-sub-bar-no"><a href="index.php?id=106">SUBSUB2</a></li>
              <li class="sub-sub-bar-no"><a href="index.php?id=108">SUBSUB3</a></li>
            </ul>
          </li>
          <li class="sub-bar-no"><a href="index.php?id=43">SUB3</a></li>
        </ul>
      </li>
      <li class="top-bar-no"><a href="index.php?id=47">TOP3</a></li>
      <li class="top-bar-no"><a href="index.php?id=37">TOP4</a></li>
    </ul>
  </div>
</div>

Der CSS Code dazu:

.header {
    height: 115px;
    background: #fff none repeat scroll 0 0;
    margin-top: 15px;
    width: 800px;
    float: left;
}
div#logo {
float:left;
margin: 4px 0 0 0;
}
.mainNavi {
     position: relative;
     font-size: 13px;
     width: 603px;
     float: left;
     height: 80px;
     display: table;
}
.mainNavi ul {
     margin: 0 auto;
     list-style: none;
     text-align: center;

}
.mainNavi ul ul {
     position: absolute;
     float: left;
     display: table;
}
.mainNavi ul li {
         display: inline-block;
}
.mainNavi a {
     display: block;
     margin-left: 35px;
}
.top-bar {
     text-transform: uppercase;
     display: table;
     background: #fff none repeat scroll 0 0;
     line-height: 25px;
}
.top-bar a {
    background: #fff none repeat scroll 0 0;
    color: #424242;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 3px;
    line-height: 28px;
    text-transform: uppercase;
}
.top-bar-act a {
    background: #fff none repeat scroll 0 0;
    color: #dddd00;
}
.top-bar-act ul {
width: 100%;
/*text-align: right; */
clear:left;
position:relative;
right:0%;
}
.top-bar a:hover {
    text-decoration: underline;
}
.sub-bar a {
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    display: inline;
    margin-left: 23px;
}

.sub-bar-act a {
    color: #dddd00;
}
.sub-bar-act ul {
width: 550px;
text-align: center;
clear:left;
position:relative;
left:0%;
line-height:16px;
}
.sub-bar a:hover {
    text-decoration: underline;
}

.sub-sub-bar a {
    font-size: 12px;
    font-weight: 0;
    text-decoration: none;
    text-transform: none;
    display: inline;
    color: #000;
    margin-left: 20px;
    line-height:16px;
}
.sub-sub-bar-act a {
    color: #dddd00;
}
.sub-sub-bar-act li {
         display: inline-block;
}
.sub-sub-bar a:hover {
    text-decoration: underline;
}
.sub-bar ul li {
 margin: 0 auto;
}

Ich bin mir sicher, es geht einfacher! Aber immer wenn ich mit Firefox / Firebug den Code ändere, zerlegt es alles weitere. Würde mich sehr freuen, wenn ihr ein paar Minuten von Eurem kostbaren Wochenende diesem Projekt widmen könntet. Es befindet sich momentan noch auf meinem localhost. Herzlichen Dank.

[MrMurphy1]

Hallo

Es fehlen leider Informationen wie die Navigation überhaupt aussehen und funktionieren soll. Momentan wissen wir nur das die Navigation entweder nicht so aussieht oder so funktioniert wie du es dir vorstellst. Das ist zur Hilfe zu dünn.

Falls du eine Aufklappnavigation wünscht brauchen wir zusätzlich die Info, wie sich die Navigation bei schmalen Fenstern verhalten soll.

Und wie sich die Navigaion bei Touchscreen-Geräten verhalten soll, die inzwischen ja über 70% aller Geräte im Internet ausmachen.

Sinnvoll ist auch der gesamte HTML- und CSS-Code der Seite, da Anfänger immer wieder das Problem haben, Lösungen, die auf Quellcodeschnipseln beruhen, in den gesamten Quelltext zu übernehmen. Am besten ein Link zu der Online-Version, eventuell bei einem Freeware-Provider wie bplaced.net.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Disk Rhode

  <div class="header">

Das sollte kein div sein, sondern ein header-Element. Eine Klasse "header" ist dafür nicht nötig.

  <div id="logo">
    <a href="./index.php?id=36"><img src="fileadmin/template/logo.jpg" alt="" border="0" width="195" height="71" /></a>
  </div>

Das div um das a-Element gruppiert nichts; es ist wohl überflüssig.

Was hingegen nicht überflüssig ist, sondern unbedingt vorhanden sein muss, ist ein Alternativtext fürs Bild. Sonst hat der Link keinen Linktitel.

border="0" gehört nicht ins HTML, sondern ist mit CSS anzugeben.

  <div class="mainNavi">

Das sollte kein div sein, sondern ein nav-Element. Eine Klasse "mainNavi" ist dafür nicht so sinnvoll; das wäre eher eine ID.

Das Markup sollte demnach so aussehen:

<header>
  <a href="./index.php?id=36"><img src="fileadmin/template/logo.jpg" alt="example dot com" width="195" height="71" /></a>
  <nav id="mainNavi">

Ich bin mir sicher, es geht einfacher!

Ich auch. Einfacher anzusehen geht das mit Online-Beispiel.

LLAP 🖖