Ignorierendes valign="top"
Lars
- html
Hallo, habe folgendes in meiner geteilten Tabelle wird einmal die obere Ausrichtung mit valign="top" komplett ignoriert. Habe schon geschaut, ob vielleicht das schließende </td> habe aber auch nix gefunden, hoffe Ihr könnt mir helfen.
Hier der Quelltext:
---
<body>
<center>
<table width = "990" border = "0" cellpadding = "0" cellspacing = "0">
<tr align = "left" valign = "top">
<td>
<img src = "images/page/logo.jpg" alt = "Header von Online-Notruf" border="0"/>
</td>
</tr>
</table>
<table width = "990" border = "0" cellpadding = "0" cellspacing = "0">
<tr>
<td width = "160" rowspan="2" align="left" valign="top">
<div class = "overmenu">
<img src = "images/page/button_main.gif" width = "160" height = "33" alt = "Button Main"/>
<div class = "menu">
<ul>
<li><a href="index.php">News</a></li>
<li><a href="index.php?section=newsarchiv"> News Archiv</a></li>
<li><a href="#">Forum</a></li>
<li><a href="index.php?section=guestbook">Gästebuch</a></li>
<li><a href="index.php?section=impressum">Impressum</a></li>
</ul>
<br/>
</div>
<img src = "images/page/button_information.gif" width = "160" height = "33" alt = "Button Informationen"/>
<div class = "menu">
<ul>
<li><a href="index.php?section=notruf">Notruf</a></li>
<li><a href="index.php?section=polizei">Polizei</a></li>
<li><a href="index.php?section=feuerwehr">Feuerwehr</a></li>
<li><a href="index.php?section=rettungsdienst">Rettungsdienst</a></li>
<li><a href="index.php?section=unfallabsicherung">Unfallabsicherung</a></li>
</ul>
<br/>
</div>
<img src = "images/page/button_berichte.gif" width = "160" height = "33" alt = "Button Berichte"/>
<div class = "menu">
<ul>
<li><a href="index.php?section=rules">Regeln</a></li>
<li><a href="index.php?section=bericht_schreiben"> Bericht schreiben</a></li>
</ul>
<ul>
<li><a href="javascript: Klappen(1)">
<img src = "images/page/plus.gif" id = "Pic1" border = "0" alt = "aus/ein-klappen"/> Bundesländer</a></li>
</ul>
<div id = "menuklapp1" style = "display: none;">
<hr />
<ul>
<li><a href="index.php?section=bw"> » Baden-Württemberg</a></li>
<li><a href= "index.php?section=by"> » Bayern</a></li>
<li><a href= "index.php?section=be"> » Berlin</a></li>
<li><a href= "index.php?section=bb"> » Brandenburg</a></li>
<li><a href="index.php?section=hb"> » Bremen</a></li>
<li><a href="index.php?section=hh"> » Hamburg</a></li>
<li><a href="index.php?section=he"> » Hessen</a></li>
<li><a href="index.php?section=mv"> » Meckl.-Vorpommern</a></li>
<li><a href="index.php?section=ni"> » Niedersachsen</a></li>
<li><a href="index.php?section=nw"> » Nordrhein-Westfalen</a></li>
<li><a href="index.php?section=rp"> » Rheinland-Pfalz</a></li>
<li><a href="index.php?section=sl"> » Saarland</a></li>
<li><a href="index.php?section=sn"> » Sachsen</a></li>
<li><a href="index.php?section=st"> » Sachsen-Anhalt</a></li>
<li><a href="index.php?section=sh"> » Schleswig-Holstein</a></li>
<li><a href="index.php?section=th"> » Thüringen</a></li>
</ul>
</div>
</div>
<br />
<img src = "images/page/button_media.gif" width = "160" height = "33" alt = "Button Media"/>
<div class = "menu">
<ul>
<li><a href="index.php?section=videos">Videos</a></li>
<li><a href="index.php?section=galerie">Galerie</a></li>
<li><a href="index.php?section=wallpapers">Wallpapers</a></li>
</ul>
</div>
</div> </td>
<td width= "990" align="left" valign="top" class="oben">
<img src="images/page/sektion_news.gif" alt=" " title="news"
height="37" />
</td>
<td width = "160" rowspan="2" align="left" valign="top">
<div class = "overmenu">
<img src = "images/page/button_login.gif" width = "160" height = "33"
alt = "Button Login" />
<div class = "menu">
<form method="post" action="login.php">
Name:
<input type = "text" name = "username"/>
<br />
<label>Passwort:
<input type = "password" name = "password"/>
<br />
<input type="checkbox" name="cook" value="1" /><label>Eingeloggt bleiben</label>
<br />
<br />
<input class = "button" type = "submit" name = "Submit" value = "Login"/>
<br />
<small><a href = "index.php?section=register">Jetzt Registrieren</a></small>
<br />
</form>
<br />
</div>
<img src = "images/page/button_links.gif" width = "160" height = "33"
alt = "Button Links"/>
<br />
<div class = "menu">
<ul>
<li> Kommt noch </li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top">
Inhalt mittig?
</td>
</tr>
</table>
</center>
</body>
----
Bei Inhalt mittig wird's ignoriert.
Danke mfg Lars
Hallo Lars!
Du meinst jetzt nicht im Ernst, dass wir uns durch dieses Gewust von Layouttabelle kämpfen sollen. Soweit ich mir Dein Layout angeschaut habe, ist dieses um vieles einfacher und fehlersicherer auch ohne diese Vergewaltigung von Tabellen lösbar.
Schönen Gruß
Afra
Hallo, danke euch.
Glaube ich werde mich dann doch mal mit den Layern beschäftigen und mich mit den CSS-Hacks anfreunden :\
mfg
Lars
Hi Lars!
Glaube ich werde mich dann doch mal mit den Layern beschäftigen und mich mit den CSS-Hacks anfreunden :\
Lies dir vorher bitte noch diesen Artikel durch.
MfG H☼psel
Mit dem Code scheint es grundsätzliche Probleme zu geben. Zum einen natürlich dass es Tabellen nutzt: Chaos vorprogrammiert.
Außerdem wurde die <table> mit einer Breite von 990 Pixel definiert, eine Spalte jedoch mit der gleichen Breite, obwohl noch zwei Spalten mit jeweils 160 Pixel vorhanden sind. Die tatsächliche Breite wird zwar auf 990 Pixel begrenzt, allerdings ist hier die Angabe der 990 Pixel bei der Spalte dann entbehrlich.
Dein Problem konnte ich mit Firefox übrigens nicht nachvollziehen, im IE scheint es jedoch tatsächlich zu bestehen. Es kann auch sein dass es bei Firefox mangels Grafiken und CSS nicht nachvollziehbar ist.
Einfacher wäre es wenn du nicht rowspan="2" verwendest sondern den Inhalt direkt unter die News-Grafik einfügst, also in der gleichen Zelle.
Das Problem dürfte daher rühren dass ohne spezielle Angabe erst einmal beide Zeilen die gleiche Höhe zugewiesen bekommen bzw. eine Höhe die dynamisch an die Höhe ihres Inhalts angepasst wird.
Wie du das allerdings korrigieren kannst erschließt sich mit zzt. auch nicht - du kannst in den <tr> schließlich auf Grund des rowspan schlecht Höhenangaben machen.