Uwe Simon: Spaltenbreiten

Hallo,
meine 2 Äusseren Spalten die ich auf 180 Pixel festgesetzt habe,
werden immer durch die mittlere die ich auf 100% Breite festgelegt habe an den Rand gedrückt.
Warum ist das so .Kann mir bitte einer eine Antwort geben

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
 margin: 0px;
}
table {
 width: 100%;
 padding-bottom: 8px;
 border-bottom-width: 10px;
 border-bottom-style: solid;
 border-bottom-color: #999999;
 height: 100%;
}
dt {
 vertical-align: top;
}
td.erste {
 background-color: #F7F7DE;
 width: 180px;
}
td.zweite {
 background-color: #fff7ef;
 width: 100%;
}
td.dritte {
 background-color: beige;
 width: 180px;
}
td.frei {
 width: 18px;
}
a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 text-decoration: none;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #666666;
 display: block;
 padding-top: 6px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 6px;
}
-->
</style>
</head>

<body>
<table  border="0">
  <tr>
    <td class="erste"><a href="#">Pfefferminzbonbons</a> <a href="#">Veilchenpastillen</a> <a href="#">Sahnekaramell</a> <a href="#">Gumibärchen</a> <a href="#">Schokolade</a></td>
    <td class="frei"> </td>
    <td class="zweite"> </td>
    <td class="frei"> </td>
    <td class="dritte"><a href="#">Links</a></td>
  </tr>
</table>
</body>
</html>
 Gruss Uwe

  1. Hallo Uwe!

    Tja, warum ist die Banane krumm? Wenn du in einer Spalte keinen Inhalt hast, dann ist die Breite auch nicht festgelegt, bzw. nur auf die Breite, die der Inhalt benötigt.
    Jedenfalls ist das so, wenn man den Teil dazwischen auf 100% setzt. Das 100% hat quasi mehr Gewichtigkeit, als die Festlegung auf 180px.

    Wenn du die Seiten tatsächlich auf 180px festlegen willst, könntest du z.b. ganz oben oder ganz unten blind-gifs an den Seiten einsetzen, um die 180px Breite zu erzwingen.
    So auch mit Abständen, die sich nicht so biegen lassen, wie man es eigentlich festlegen möchten.

    Nimm einfach ein durchsichtiges gif 1x1 Pixel groß, und zieh es anhand der width- und / oder height-Angaben auf die entsprechende Größe.

    Das ist zwar nicht die feine elegante Art der Lösung, aber immerhin effektiv und auch nicht gerade Speicher- bzw. Ladezeitbelastend.

    Gruß Patrick

    1. Besten Dank für die schnelle Antwort !
      Gruss

  2. Hi,

    meine 2 Äusseren Spalten die ich auf 180 Pixel festgesetzt habe,
    werden immer durch die mittlere die ich auf 100% Breite festgelegt habe an den Rand gedrückt.

    table {
    width: 100%;
    }
    td.erste {
    width: 180px;
    }
    td.zweite {
    width: 100%;
    }
    td.dritte {
    width: 180px;
    }
    td.frei {
    width: 18px;
    }

    <table  border="0">
      <tr>
        <td class="erste"><a href="#">Pfefferminzbonbons</a> <a href="#">Veilchenpastillen</a> <a href="#">Sahnekaramell</a> <a href="#">Gumibärchen</a> <a href="#">Schokolade</a></td>
        <td class="frei"> </td>
        <td class="zweite"> </td>
        <td class="frei"> </td>
        <td class="dritte"><a href="#">Links</a></td>
      </tr>
    </table>

    Die Spaltenbreiten ergeben aufaddiert:

    180px + 180px + 18px + 18px + 100% = 396px + 100%.
    (Platz für border und padding noch nicht mitgerechnet...)

    Die Tabelle soll aber nur 100% Breite haben, nicht 100% + 396px.

    Irgendwie hat jeder Browser jetzt ein Problem.

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.