css Problem mit Navigation

[Kermit]

Ich möchte meine ganze Tabellen aus meiner Homepage rauswerfen und dafür auf div Container umsteigen, allerdings habe ich eine Stelle wo ich nicht mehr weiterkomme.

Der ursprüngliche Teil sieht so aus:
http://test.iospirates.com/Test-X/Frame.html

Die horizontale Navigation geht über den ganzen Fenster bereich.
(eingezwängt in eine Tabelle)

Code: Alles auswählen

<div align="center">
<table cellpadding="2" cellspacing="2" border="0" style="text-align: left; width: 95%;">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><a href="index.html" target="_top"><img src="Navigation/Logo-top7.gif" title="" alt="Logo" style="border: 0px solid ; width: 200px; height: 75px;"></a>
      </td>
      <td style="vertical-align: middle; text-align: center;"><img src="Navigation/Schrift2.gif" title="" alt="Schrift" style="width: 500px; height: 60px;">
      </td>
      <td style="vertical-align: top;">
      </td>
    </tr>
  </tbody>
</table>


<table cellpadding="2" cellspacing="2" border="0" style="width: 100%;">
 <tbody>
  <tr>
   <td valign="middle" align="center">
   </td>
   <td style="text-align: center; vertical-align: middle;">
   <div class="n"><a class="menu" href="1.html" target="main">Punkt 1</a></div>
   </td>

   <td style="text-align: center; vertical-align: middle;">
   <div class="n"><a class="menu" href="Frame2.html" target="main">Punkt2</a></div>
    </td>

    <td style="text-align: center; vertical-align: middle;">
    <div class="n"><a class="menu" href="3.html" target="main">ein langer Punkt</a></div>
    </td>

    <td style="text-align: center; vertical-align: middle;">
    <div class="n"><a class="menu" href="4.html" target="main">Kontakt</a></div>
    </td>

    <td style="text-align: center; vertical-align: middle;">
    <div class="n"><a class="menu" href="5.html" target="main">kurz</a></div>
    </td>

    <td style="text-align: center; vertical-align: middle;">
    <div class="n"><a class="menu" href="Frame6.html" target="main">ein ganz langer Punkt</a></div>
    </td>

    <td style="text-align: center; vertical-align: middle;">
    <div class="n"><a class="menu" href="7.html" target="_blank">Punkt</a></div>
    </td>

    </tr>

  </tbody>
</table>
</div>

Das ganze mittles div ist dann hier:

http://test.iospirates.com/Test-X/Frame2.html

Code: Alles auswählen

 <div id="l">
  <a href="index.html" target="_top"><img src="Navigation/Logo-top7.gif" title="" alt="Logo" style="border: 0px solid ; width: 200px; height: 75px;"></a>
   </div>

  <div id="w">
 <img src="Navigation/Schrift2.gif" title="" alt="Schrift" style="width: 500px; height: 60px;">
    </div>


 <div id="navigation">
  <div style="width: 90%; text-align: justify; margin-left: auto; margin-right: auto;">

 <div class="n">
 <a class="menu2" href="1.html" target="main">Punkt 1</a>
 <a class="menu2" href="2.html" target="main">Punkt 2</a>
 <a class="menu2" href="3.html" target="main">ein langer Punkt</a>
 <a class="menu2" href="4.html" target="main">Kontakt</a>
 <a class="menu2" href="5.html" target="main">kurz</a>
 <a class="menu2" href="Frame6.html" target="main">ein ganz langer Punkt</a>
 <a class="menu2" href="7.html" target="_blank">Punkt</a>

 </div>
</div>
</div>

Und hier die css Teile:

Code: Alles auswählen

             /* Navigation für Kopfleiste */

a.menu2 {
font-family:Arial, "Arial Rounted MT Bold", sans-serif;
font-size:100%;
font-weight:bold;
/* display:block; */
margin-top:5px;

/* float:middle;  ??? */
margin-with:visible;

text-align:center;
border-style:outset;
border-width:3px;
padding:2px;
text-decoration:none;}

Kann mir da jemand sagen wo mein Fehler liegt?

[S2B]

Buaah, zuerst einmal solltest du dich genauer mit CSS beschäftigen und überprüfen, ob es die Eigenschaften, die du da in deiner CSS-Datei stehen hast, überhaupt gibt...

Eine automatische Anpassung der Breite der Menüpunkte wirst du mit CSS nicht hinbekommen, du müsstest also für jeden Link explizit eine Breite angeben. Ich würde dir außerdem empfehlen, die ganze Navigation in eine unsortierte Liste zu packen. Dann geht zum einen das Stylen leichter und zum anderen ist es semantisch korrekt:

Code: Alles auswählen

ul#navigation {
  list-style: none
}

ul#navigation li {
  display: inline
}

Code: Alles auswählen

<ul id="navigation">
  <li style="width: 10%">Menüpunkt 1</li>
  <li style="width: 15%">Menüpunkt 1</li>
  [...]
</ul>

[Kermit]

Naja, ich habe mich durch ziemlich viele css Pages durchgearbeitet, und darum denke ich das alles stimmt (höchstens das mir beim kopieren für die Beispiel Seite ein Fehler unterlief).

Aber wenn es für meine Idee keine Möglichkeit mit css gibt, muß ich wohl bei der Tabellenform bleiben.
Ich finde das die Navigation einfach besser aussieht wenn sich das ganze dynamisch an die Festergröße und Auflösung anpaßt.

[S2B]

Ich finde das die Navigation einfach besser aussieht wenn sich das ganze dynamisch an die Festergröße und Auflösung anpaßt.

Es gibt doch eine Möglichkeit, die genau das macht, du musst nur jedem Menüpunkt manuell eine Breite in Prozent geben.

[Kermit]

Allerdings sind die Menu Punkte unterschiedlich breit.
Das wäre dann wieder eine Aufgabe wenn mir langweilig ist ...