✔ Seite 'verrutscht'

Status
Nicht offen für weitere Antworten.
W

WIK-Lars

Erfahrenes Mitglied
Hallo,

ich habe hier mal eine Website reingestellt, an der ich gerade arbeite.
Es war ursprünglich nur eine einseitige Homepage mit Tabellenlayout. Letzteres habe ich erstmal übernommen und dann erweitert.

Was ich Euch fragen möchte: warum wird bei der Website die Navigation auf der Seite 'Management' schmaler dargestellt als auf den anderen Seiten?
Ich habe da noch ein paar Zellen mehr für die Aufteilung eingebaut. Ich komme, aber einfach nicht dahinter, was genau die Ursache ist.

Sieht von Euch jemand, was ich nicht sehe?

Danke schon mal für alle sachdienlichen Hinweise!

P.S. Noch sind nicht alle Links in der Navigation belegt!
 
Ich versuch's mal anders.
Ich habe diese Tabelle ...

HTML: 
<table>
    <tr>
            <td height="133px" width="280px" style="vertical-align: top;"></td>
                <td height="133px" width="280px" style="vertical-align: top;"></td>
                <td height="133px" width="280px" align="middle"></td>
       </tr>
        <tr>
              <td height="133px" width="280px"></td>
            <td height="133px" width="280px" style="vertical-align: top;"></td>
                <td height="133px" width="280px" align="middle"></td>
      </tr>
        <tr>
              <td height="133px" width="280px" style="vertical-align: top;></td>
            <td height="133px" width="280px" style="vertical-align: top;"></td>
            <td height="133px" width="280px" align="middle"></td>
    </tr>
</table>
... in den folgenden Code-Grundgerüst der Website eingefügt:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title></title>
  <style type="text/css">
ul { list-style-type: none; }
.thema { color: #FFFFFF;
     font-family: New Times Roman;
     font-size: 20;
     letter-spacing: 1;
    }
ul li ul li a { margin-left: -10px; 
                text-decoration: none; 
                color: #FFFFFF; 
                font-family: New Times Roman; 
                font-size: 13;
                }
ul li ul li a:hover { color: #bbbbbb; }    
  </style>

</head>

<body>
<table style="width: 975px; height: 550px; border: 0">
    <tr>
        <td rowspan="4" colspan="1" style="vertical-align: middle; height: 3px; width: 195px; background: #8B233D;">
            <ul>
                            <p>&nbsp;</p>
        <p>&nbsp;</p>
                <li class="thema" style="margin-left: -30px;">Unternehmen
                    <ul>
                        <li><a href="mission_statement.html">Mission Statement</a></li>
                        <li><a href="philosophie.html">Philosophie</a></li>
                        <li><a href="management.html">Management</a></li>
                          <li><a href="unsere_staerken.html">Unsere St&auml;rken</a></li>
                              </p>
                       </ul>
                              <li class="thema" style="margin-left: -30px;">Branchen
                       <ul>
                           <li><a href="metall_chemie.html">Metall & Chemie</a></li>
                        <li><a href="spezifische_loesungen.html">Spezifische Lösungen</a></li>
                    </ul>
                          </p>
                          <li class="thema" style="margin-left: -30px;">Produkte &amp; L&ouml;sungen
                    <ul>
                        <li><a href="it_metal_1.html">it.metal</a></li>
                    </ul>
            <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <ul>
                        <li><a  href="kontakt.html">Kontakt</a></li>
                        <li><a  href="technische_hinweise.html">Technische Hinweise</a></li>
                        <li><a href="impressum.html">Impressum</a></li>
                    </ul>        
            </ul>
        </td>
        <td style="width: 365px; padding-left: 5px; height: 15px;"></td>
          <td style="width: 365px; height: 15px;"></td>
    </tr>
    <tr>
          <td height="121" colspan="2" style="width: 780px;"></td>
    </tr>
    <tr>
        <td height="399px" colspan="2" style="width: 780px; padding-left: 5px;"></td>
      </tr>
    <tr>
        <td style="width: 780px; vertical-align: bottom; text-align: right; height: 15px; " colspan="2">
        <font face="Arial" size="2" color="#8B233D">
        <a  style="text-decoration: none; color: #8B233D;" href="kontakt.html">Kontakt</a>
        | 
        <a  style="text-decoration: none; color: #8B233D;" href="technische_hinweise.html">Technische Hinweise</a>
        | 
        <a  style="text-decoration: none; color: #8B233D;" href="impressum.html">Impressum</a>
        </font>
        </td>
    </tr>
</table>
</body>
</html>

Dadurch kommt es offensichtlich zu einer Verbreiterung des Contents und einer Verschiebung der Navigation, so dass diese schmaler und länger wird.

Wie kann ich das Problem lösen?
 
Hi,

was auf den ersten Blick auffällt, ist der Umstand, dass ein Drittel von 780 nur 260, und nicht 280 beträgt.

Übrigens werden in den HTML-Attributen width und height keine Einheiten angegeben.

Und noch ein allgemeiner Hinweis: das p-Element ist kein Nachfahreelement des ul-Elements und den Sublisten fehlt jeweils das schliessende </li>-Tag.
 
Hallo,

hab' die von Maik genannten Hinweise beherzigt.

Grundsätzlich bestehen da aber immer noch Probleme. Ich habe mal die Borders der Seite kenntlich gemacht. Sie ist hier aufrufbar. Die anderen Seiten 'Mission Statement', 'Philosophie' etc. aus dem Menü wären als Vergleich, so wie es sein soll.

Ich denke, irgendetwas stimmt mit der Tabellenverschachtelung nicht.

Danke für jeden Hinweis! :)
 
Hallo WIK-Lars,

mir ist ausserdem aufgefallen, das Du das Menü mit in die Tabelle oder den Rahmen des Hauptteils eingeschlossen hast. Kann es sein, das es dadurch kleiner wird?
 
Uarrgh, danke für die Info!

Der Link soll natürlich hierhin verweisen!

Hm, ja, ich habe quasi in die Haupttabelle auch die Navigation reingebaut. Aber, wenn man alles richtig macht ( :rolleyes: ), sollte es doch auch so funktionieren.
 
Hm, hab das auch schon alles durchgespielt. Also mit px und ohne. Jetzt habe ich sie wieder bei den style-Attributen eingefügt. Hilft aber alles nichts. Ich denke es klemmt woanders, eher bei der Tabelle an sich oder sowas. Ich suche und suche und suche ... :(
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück