Struppi: Relative CSS-Positionierung, Breiten-Abstand

Beitrag lesen

doch, ich beziehe mich auf die rund 770px. Die bestehen zum Teil aus Bildern, zum Teil aus Text und sind in einem div-Bereich zusammengefasst. Abmessungen ergeben, dass die Breite in etwa 770px nicht überschreitet. Insofern ist halt gewährleistet, dass der Header auch bei einer Auflösung von 800 x 600 entsprechend passt.

Der genannte Rest ist der, der je nach Auflösung übrig bleibt. Bei 800x600 rund 30px, also im Zweifelsfall der Scrollbalken, bei 1024x768 sinds ja rund 250 und bei 1280 knapp über 500Pixel die übrig bleiben.... und diese offenen unverbrauchten Pixel sollen nun ensprechend in der Relation als Abstand dienen.

Das ab einer gewissen Größe des Monitors und Auflösung kaum jemand den Browser maxmiert ist dir klar? (ich hab den Browser oft noch  nicht mal bei 800x600 maximiert und wenn ich an eine grossen Monitor sitze ist das Browserfenster oft sogar noch kleiner)

Ein früheres unangebrachtes Tabellenlayout häte ja folgendermaßen ausgesehen:
<table>
  <tr>
    <td width="30%">flexibler Rand</td>
    <td width="770">Inhalt Header</td>
    <td width="70%">flexibler Rand</td>
  </tr>
</table>

Nein, das bewirkt sicher nciht das was du willst, die 30% bezieht sich ja auf die komplette Breite des Browserfensters, du hast also:

|   30%    | 770px  | 70%-770px |

Das ist nicht was du willst, du willst wenn ich dich richtig verstanden habe:

|   (100% - 770px) * 30%    | 770px  | (100% - 770px) * 70%  |

Da aber 100% dir nicht bekannt sind kannst du das nur mit JS lösen. Das ist immer ein Problem, wenn du irgendwo fixe Größenanagaben hast, bei einem fliessenden CSS Layout wäre das kein Problem.

z.b. so:

body
{
padding-left: 3%;
padding-right: 7%;
margin:0;
}

Struppi.