Michael Schneider: Diverse Probleme bei der Umstellung von Tabellen nach CSS

Guten Tag!

ich habe endlich eingesehen, dass Tabellen nur dazu da sind, tabellarische Daten anzuzeigen, also habe ich jetzt mal versucht, diejenigen Tabellen, bei denen dies nicht zutrifft, durch CSS-formatierte Elemente zu ersetzen.

Dabei sind aber zwei Probleme aufgekommen:

  • Rechts oben auf meiner Seite habe ich ein kleines Textfeld zum Suchen mit einem Button dahinter. Nun sollen beide zusammen 210 Pixel breit sein, und das Textfeld soll einfach so breit sein, wie möglich. Mit Tabellen hatte ich das so gelöst:

<table cellspacing="0" cellpadding="0" width="210">
  <tr>
    <td><input type="text" name="search" style="width:100%;" /></td>
    <td width="1"><input type="submit" value="Suchen" /></td>
  </tr>
</table>

Nun habe ich aber keine Ahnung, wie ich das mit CSS hinbekommen soll.

Das zweite Problem:

Ich habe zwei Bilder (die W3C-Bilder validen HTMLs und CSS') nebeneinander, wieder in einem Bereich, der 210 Pixel breit ist. Die Bilder sind in Links, welche einen Rahmen haben. Bisher sah das so aus:

<table cellspacing="0" cellpadding="0" width="210">
  <tr>
    <td><a href="..." style="border:1px solid black; display:block;"><img src="valid_html.png" alt="Valid HTML" /></a></td>
    <td><a href="..." style="border:1px solid black; display:block;"><img src="valid_css.png" alt="Valid CSS" /></a></td>
  </tr>
</table>

Wenn ich nun die beiden Links einfach als inline-Elemente hintereinander schreibe, habe ich das Problem, dass der Rahmen nur so hoch ist, wie die normale Zeilenhöhe, das Bild aber darüber hinaus geht. Wenn die Links allerdings block-Elemente sind, habe ich sie ja nicht in einer Zeile, was ich aber möchte. Ich habe auch schon versucht, die Links einfach mit line-height höher zu machen, das hat aber nichts geändert.

Ich hoffe, dass mir jemand helfen kann.

Einen schönen Abend noch,
Michael

  1. Hi,

    in beiden Fällen willst Du zwei blocklevel-Elemente nebeneinandersetzen. Hierzu gibt es FLOAT.
    Der Haken dabei: dem floatenden Element mußt Du eine Breite geben. Dies dürfte aber auch im ersten Fall kein Problem sein, da Du zumindest die Breite des Buttons abschätzen kannst.

    freundliche Grüße
    Ingo