Ausrichtungsproblem Hauptnavi (CSS-Problem?)

wurschtbrot · Beitrag von **wurschtbrot** » Mo 5. Mär 2007, 20:35

Hallo!
Erstelle gerade eine neue Webseite mit folgendem Layout-Aufbau:

<html>
<head>
<title>xxx</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td>&nbsp;</td>
    <td height="250" width="800" background="images/head.jpg"><table width="800" height="250" border="0" cellpadding="0" cellspacing="0">
        <tr> 
          <td height="210" colspan="2"><img src="images/10_spacer.gif" width="800" height="210"></td>
        </tr>
        <tr> 
          <td width="200" height="40"><img src="images/10_spacer.gif" width="200" height="40"></td>
          <td width="600" height="40" valign="middle">CMS_CONTAINER[1]</td>
        </tr>
      </table></td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="top"> 
    <td>&nbsp;</td>
    <td background="images/back_text.jpg"> <table width="800" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td width="200"><table width="200" border="0" cellspacing="0" cellpadding="0">
              <tr valign="top"> 
                <td width="35"><img src="images/10_spacer.gif" width="35" height="10"></td>
                <td width="135" valign="top">CMS_CONTAINER[3]</td>
                <td width="30"><img src="images/10_spacer.gif" width="30" height="10"></td>
              </tr>
            </table></td>
          <td width="540" valign="top">CMS_CONTAINER[2]</td>
          <td width="60"><img src="images/10_spacer.gif" width="60" height="10"></td>
        </tr>
      </table></td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td height="70" background="images/foot.jpg"></td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Das style.css sieht noch so aus:

Code: Alles auswählen

/*body*/
html, body { height:100%; }
body {background-image:url(../images/rot_rand.jpg);min-width:800px;}
h1 {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;color: #000000;}
h5 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;color: #000000;text-align: justify;font-weight: normal;vertical-align: top;}

/* hauptnavigation */
.navi{width:135px;border-bottom:1px dotted #ff6600;background-color:#FFFFFF;}

a.navileft_passive {display:block;background:#ffffff url(../images/pfeil.gif) no-repeat left;
padding-top:3px;padding-bottom:5px;color:#000000;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;text-decoration: none;} 
a.navileft_active {display:block;background:#ffffff url(../images/pfeil.gif) no-repeat left;padding-top:3px;
	padding-bottom:5px;color:#CC3333;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;text-decoration: none;} 
a.navileft_open {display:block;background: #ffcc99 url(../images/pfeil.gif) no-repeat left;padding-top:3px;
	padding-bottom:5px;color:#CC3333;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;text-decoration: none;}

Das Problem:
Sobald der Text (Cont. 2) recht lang wird, also die Zeile mit dem background="images/back_text.jpg" mitwächst, bleibt die Naviagation (Cont. 3) nicht an der angedachten Position (top), sondern sie rutscht in die Mitte. Alle Versuche mit valign="top" (wie man sieht) oder im CSS .navi {position:absolute; top:260px} o.ä. haben gar nix bewirkt.

Bin echt am verzweifeln, zumal der Text (Cont. 2) immer nach oben ausgerichtet erscheint.

Kann mir jemand helfen bzw. braucht jemand mehr Infos?

Vielen Dank,
wurschtbrot

kptkip · Beitrag von **kptkip** » Mo 5. Mär 2007, 22:41

Ich habe zwar seit langer Zeit kein Tabellenlayout mehr gemacht. Aber wenn ich das nun richtig überblicke, hast Du die Zelle, in der Deine Navi liegt zwar nach oben ausgerichtet, aber nicht der Tabellenzelle, in der diese "nested" Tabelle liegt.

Ich glaube, das ist der TD-Tag mit der Angabe width="200". Wenn Du diesem den valign-Parameter gibst, sollte es gehen.

Ich hatte zwar auch einen etwas holprigen Weg in das CSS-gesteuerte tabellenlose Design, aber nach Jahren der Entwicklung kann ich Dir nur raten, unabhängig von dem aktuellen Problem, Dich mit standardkonformem CSS-Layout zu beschäftigen. Im Netz gibt es dazu diverse Hilfestellungen (auch hier im Forum wurden Anlaufstellen öfters erwähnt).

Also hinsichtlich einer zukunftsorientierten und strukturierteren Codegestaltung: Nur Mut!

wurschtbrot · Beitrag von **wurschtbrot** » Di 6. Mär 2007, 15:57

Klappt!!!
Sehr geil!
Vielen Dank!