Eli: tabelle mit 100%

SELF-Forum

tabelle mit 100%

Eli
– Informationen zu den Bewertungsregeln

Hi,

mir gehts um folgendes:

Mein Grunddesign besteht aus 3 zeile die insg 100% höhe einnehmen sollen...

die erste zeile enthält die header grafik die direkt oben am browser 'andocken' soll, die 2. zeile ist der main-conent und die 3 zeile entspricht dem header, also eine footer grafik die direkt unten am browser 'andocken soll'.

wenn ich das mit tabellen versuche gehts wohl nur so, dass ich sie über 100% höhe definiere.

problem ist nun: je nachdem wieviel höhe der content TATSÄCHLICH aufgrund des inhalt einnimmt (manchmal kann runtergescrollt werden manchmal nicht) verändert sich die höhe der ersten zeile von der gewünschten prozent zahl auf die pixel zahl der headergrafik die aber weniger beträgt als % umgerechnet.
das hat dann zur folge dass der gesamte 'maincontent' etwas nach oben spring (das merkt man v.a. zb bei einer navigationszeile die als erste im maincontent steht).

versteht ihr mein problem? was kann man da machen?

gruß
eli

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. tabelle mit 100%

    Gernot Back Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Eli,

    die erste zeile enthält die header grafik die direkt oben am browser 'andocken' soll, die 2. zeile ist der main-conent und die 3 zeile entspricht dem header, also eine footer grafik die direkt unten am browser 'andocken soll'.

    wenn ich das mit tabellen versuche gehts wohl nur so, dass ich sie über 100% höhe definiere.

    Ja, ich hoffe auch, dass du das über CSS machst und dabei nicht vergessen hast, auch die Elternelemente HTML und BODY aud jeweisl 100% Höhe zusetzen, sowie deren Margin und Padding au Null.

    problem ist nun: je nachdem wieviel höhe der content TATSÄCHLICH aufgrund des inhalt einnimmt (manchmal kann runtergescrollt werden manchmal nicht) verändert sich die höhe der ersten zeile von der gewünschten prozent zahl auf die pixel zahl der headergrafik die aber weniger beträgt als % umgerechnet.

    Das sieht doch dann in jeder Bildschirmaufläösung anders aus!

    das hat dann zur folge dass der gesamte 'maincontent' etwas nach oben spring (das merkt man v.a. zb bei einer navigationszeile die als erste im maincontent steht).

    Gib deiner ersten Zeile die Höhe, die auch die darin enthaltene Grafik hat, entsprechend ebenso der Zeile, die die Footer-Grafik enthält deren Höhe in Pixeln und einer der Zellen in einer der Zeile dazwischen 100% Höhe.

    So etwas kann man aber auch ohne Tabellen machen:

    http://de.selfhtml.org/css/layouts/mehrspaltige.htm

    Gruß Gernot

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. tabelle mit 100%

      eli
      – Informationen zu den Bewertungsregeln

      nein, ich arbeite komplett ohne css nur mit old style html...

      sollte da der trick mit der mittleren zeile 100% geben auch gehen?

      hättest du ein fertiges bsp für mich in css mit den 3 zeilen?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. tabelle mit 100%

        Gernot Back Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo eli,

        nein, ich arbeite komplett ohne css nur mit old style html...
        hättest du ein fertiges bsp für mich in css mit den 3 zeilen?

        Ja bitteschön; übrigens auf den Doctype (Quirks-Mode) kommt es bei deinem Problem in manchen Browsern an!

          
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Tabellenlayout Header-Footer</title>  
<meta name="author" content="Gernot Back">  
<meta name="generator" content="Ulli Meybohms HTML EDITOR">  
<style type="text/css">  
[code lang=css]  
html, body, #meineLayoutTabelle {  
  width:100%;  
  height:100%;  
  margin:0;  
  padding:0;  
}

        </style>
        </head>
        <body>
        <table id="meineLayoutTabelle" border="1">
        <tr>
        <td><img src="header.gif" width="22" height="21" border="" alt=""></td>
        </tr>
        <tr>
        <td style="~~~css

        height:100%;vertical-align:top;background-color:#FFFFEE"

        </tr>  
<tr>  
 <td><img src="footer.gif" width="22" height="21" border="0" alt=""></td>  
</tr>  
</table>  
</body>  
</html>  
[/code]  
Gruß Gernot
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln