Tabellenlayout: Höhe 100%, Footer & Header in Pixel

Dieses Thema im Forum "Web Page Design" wurde erstellt von Jakob, 26.04.2005.

  1. Jakob

    Jakob Thread Starter MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    MacUser seit:
    05.01.2004
    Hallo,

    über den (Un)Sinn eines Tabellenlayouts für eine Homepage weiß ich viel und es hat mir auch echt Leid getan, aber es ging anders nicht. (d.h. in allen Browsern bis auf den IE ging's und nach 10 Stunden rumfimmelei hab ich's dann halt gelassen)

    Mein Problem:

    Habe eine Tabelle

    Code:
    |-----------|
    |-----------|   header: 90px
    |           |   content: 100%
    |-----------|
    |-----------|   footer: 90px
    Funktioniert überall bis auf … ihr könnt's raten: Da wird der Header auch auseinandergezogen, sobald das Fenster größer wird.

    Im 5.5 funktioniert noch alles, im 6er nicht mehr :rolleyes:

    Vielen Dank!
     
    Zuletzt bearbeitet: 26.04.2005
  2. beebop69

    beebop69 MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    MacUser seit:
    23.08.2004
    *grübel* also ich bin mir nicht ganz sicher, aber wenn du dem content schon 100% höhe gibst und dem head und footer dann mit 90px eine feste höhe.... das hört sich etwas schräg an.
    Ich mache schon seit einiger Zeit keine Tabellenlayouts mehr, daher kann es auch sein, dass ich mich irre, aber nimm doch lieber mal 3 einzelne tabellen hintereinander, die du mit den Werten formatierst, die du schon genannt hast. Dann sollte es klappen.
     
  3. Jakob

    Jakob Thread Starter MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    MacUser seit:
    05.01.2004
    Hm.. ich glaub bei 3 Tabellen und der mittleren bei 100% schiebt er mir die anderen bzw. den Footer aus dem Bild... Aber trotzdem schonmal danke!

    Falls Ihr nen Anschauungsexemplar braucht: www.knowthat.de/knowthat

    Das beschriebene Problem taucht natürlich nur auf, wenn Ihr fremd(Win+IE6)surft

    Würde auch viel lieber nen XHTML-Layout machen, aber die linke Navigation bekomm ich da einfach nich hin. Nicht mit negative margins und den ganzen float Tricks...
     
  4. joachim14

    joachim14 MacUser Mitglied

    Beiträge:
    7.295
    Zustimmungen:
    433
    MacUser seit:
    08.02.2005
    Navigation links:
    Und eine Liste links absolut positionieren mit CSS?
     
  5. beebop69

    beebop69 MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    MacUser seit:
    23.08.2004
    Versuch mal das:
    Lege 5 Divs an, in der Reihenfolge:

    Code:
    <div id="wrapper>
    <div id="head"></div>
    <div id="navi"></div>
    <div id="content"></div>
    <div id="footer"></div>
    </div>
    
    Formatiere sie so in der CSS-Datei:

    Code:
    body {
    margin:0;
    padding:0;
    text-align:center;
    }
    #wrapper {
    width:760px;
    height:auto;
    margin:0px auto;
    text-align:left;
    }
    #head {
    width:760px;
    height:90px;
    }
    #navi {
    width: /*Passende Breite der Navi*/;
    height: auto;
    float:left;
    }
    #content {
    width: /*Passende Breite des Content*/;
    height:auto;
    float:left;
    }
    #footer {
    width:760px;
    height:90px;
    clear:both;
    }
    In die jeweiligen DIVs legst du dann deine Tabellen rein, wenn du es nicht mit margin und padding machen willst.
     
    Zuletzt bearbeitet: 26.04.2005
  6. XVCD

    XVCD MacUser Mitglied

    Beiträge:
    1.376
    Zustimmungen:
    51
    MacUser seit:
    21.01.2005
    Entweder blick ichs nicht, oder mein IE6 zieht da nix auseinander???

    Also das Bsp. unten funktioniert, ohne daß etwas verändert wird bei Größenänderung des Fensters.

    Thomas.

    --

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td height="90" bgcolor="#66CC99">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#FFCC99">&nbsp;</td>
    </tr>
    <tr>
    <td height="90" bgcolor="#66CCFF">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>
     
  7. Jakob

    Jakob Thread Starter MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    MacUser seit:
    05.01.2004
    @joachim: Fällt leider weg, da das Design in der Mitte des Bildschirms erscheinen soll.

    @beebop: Probier ich morgen mal aus, aber ich wette, dass einer der witzigen Browser da durchknallt. Problem ist, dass das Design an manchen Stellen recht genau passen muss. Wenn einer mal die Komplexität von nem „ganz einfachen“ 3-Spalten-CSS-Design sehen will, muss er sich nur mal Piefecta angucken. Das ist wirklich cross-browser, aber da find ich ja ein Tabellenlayout fast besser, obwohl ich's nie mehr machen wollte. Manchmal hauen eben Deadlines dazwischen...

    @XVCD: Ich probier das auch noch mal so, wie Du's gemacht hast, wobei ich damit halt voll in die pre-CSS-Ära und damit der Trennung von Design und Inhalt eintauche, aber wenn's der einzige Weg ist. In meinem derzeitigen Design haben die TDs eben IDs und werden über ein CSS-File mit den Größenangaben beglückt. Kann sein, dass das für den IE nen Problem darstellt.
     
  8. michanismus

    michanismus MacUser Mitglied

    Beiträge:
    434
    Zustimmungen:
    0
    MacUser seit:
    23.08.2004
    Hallo,

    das Problem hatte ich auch vor Kurzem. Hier meine Lösung:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <style type="text/css">
    /* Hide from IE-Mac \*/
    body, html {
    	height: 100%;
    }
    /* end hide */
    
    body {
    	margin: 0;
    	padding: 0;
    }
    
    /* be nice to Opera */
    html>body {
    	margin: 0;
    	padding: 0;
    }
    /* end Opera */
    </style>
    </head>
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
    <tr>
    	<td bgcolor="#ff0000" valign="bottom">
    	Sehe da es funktioniert :)<br>
    	Tabelle, 100% hoch und margin und padding gleich null.<br>
    	Funktioniert mit Safari, Firefox Win/Mac, IE 5 Mac/Win, IE 6 Win und Opera ab 6 Win/Mac,<br>
    	sowie allen anderen auf deren Engines basierenden Browsern.
    	</td>
    </tr>
    </table>
    </body>
    </html>
    
    Die Tabelle kannst du nach eigenen Wünschen gestalten. Ich habe innerhalb
    dann mit CSS DIVs etc. gearbeitet.

    Das Ganze funktioniert super, lediglich die Angabe "height: 100%" der
    Tabelle ist nicht für den Doctype erlaubt, aber alle Browser interpretieren
    alles wie gewünscht :)

    Gruß,
    michanismus

    EDIT:
    P.S. Wichtig ist der Doctype.
     
    Zuletzt bearbeitet: 27.04.2005
  9. michanismus

    michanismus MacUser Mitglied

    Beiträge:
    434
    Zustimmungen:
    0
    MacUser seit:
    23.08.2004
    Nachtrag. Wenn du das Ganze mittit haben willst machst du das dann so.

    Meine Lösung:

    Code:
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
    <tr>
    <td width="50%">&nbsp;</td>
    <td bgcolor="#ff0000" valign="bottom">
    
    <div style="width: 800px;">
    
    Sehe da es funktioniert :)<br>
    Tabelle, 100% hoch und margin und padding gleich null.<br>
    Funktioniert mit Safari, Firefox Win/Mac, IE 5 Mac/Win, IE 6 Win und Opera ab 6 Win/Mac,<br>
    sowie allen anderen auf deren Engines basierenden Browsern.
    
    </div>
    </td>
    <td width="50%">&nbsp;</td>
    </tr>
    </table>
    
    Linke und Rechte Zelle auf jeweils 50%. Dann in der Zelle in der Mitte
    einen DIV Container einsetzen und mit CSS 800 Pixel Breite festlegen.

    Hoffe ich hatte dich richtig verstanden... ;)
     
  10. michanismus

    michanismus MacUser Mitglied

    Beiträge:
    434
    Zustimmungen:
    0
    MacUser seit:
    23.08.2004
    Alle guten Dinge sind 3 ;)

    hier deine Lösung mit Header und Footer:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dtd">
    <html><head>
    <style type="text/css">
    
    /* Hide from IE-Mac \*/
    body, html {
    	height: 100%;
    }
    /* end hide */
    
    body {
    	margin: 0;
    	padding: 0;
    }
    
    /* be nice to Opera */
    html>body {
    	margin: 0;
    	padding: 0;
    }
    /* end Opera */
    </style>
    </head>
    <body>
    
    <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
    <tr>
    	<td width="50%" rowspan="3">&nbsp;</td>
    	<td bgcolor="#00ff00" height="90">Header</td>
    	<td width="50%" rowspan="3">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#ff0000" valign="bottom">
    
    <div style="width: 800px;">
    Sehe da es funktioniert :)<br>
    Tabelle, 100% hoch und margin und padding gleich null.<br>
    Funktioniert mit Safari, Firefox Win/Mac, IE 5 Mac/Win, IE 6 Win und Opera ab 6 Win/Mac,<br>
    sowie allen anderen auf deren Engines basierenden Browsern.
    </div>
    
    </td>
    </tr>
    <tr>
    	<td bgcolor="#0000ff" height="90">Footer</td>
    </tr>
    </table>
    </body>
    </html>
    
    Gruß und gute Nacht,
    Michanismus
     
Die Seite wird geladen...

Diese Seite empfehlen