table wächst nicht mit beinhaltetem div

[bealine]

Hallo,

ich habe in meinem template einen div-Container in eine td plaziert. Nur mit divs hab ich das Layout leider nicht geschafft und deshalb zur Seitenformatierung eine dreispaltige Tabelle zugrunde gelegt.

Das div enthält meine Inhaltstexte für die einzelnen Homepageseiten.
Da die umgebende Tabelle auch eine Fußzeile hat, sollte diese je nach Textlänge nach unten rutschen. Das div legt sich aber bei längeren Texten einfach über den Tabellenfooter statt dass die td mit dem div-Inhalt mitwächst.

Kann mir bitte jemand helfen, wie ich es schaffe, dass die Zellenhöhe der td je nach Länge des div-Inhalts variiert?

Hier der (gekürzte) Code:

<table>
<tr>
<td>...</td>
<td>...</td>

<td valign="top">
    <div id="inhalt">
        <!-- TemplateBeginEditable name="Inhalt" -->
        <p>Diese Seite befindet sich gerade im Aufbau.</p>
        <!-- TemplateEndEditable -->
    </div>
</td>
</tr>

...

</table>

----------

CSS:
div#inhalt {
padding:15px;
vertical-align: top;
        }

[molily]

Hallo,

eigentlich wächst eine Tabellenzelle automatisch mit seinem Inhalt mit. Auch Floats sollten eingeschlossen werden. Lediglich

In deinem Code sehe ich keinen Fehler bzw. nichts, was dazu führen könnte, dass die Zelle nicht mitwächst. Kannst du vielleicht ein Beispiel online stellen, das das Problem demonstriert? Ich vermute, es liegt an einer anderen Codezeile.

Übrigens hat Selfhtml auch ein Kapitel zu <http://de.selfhtml.org/css/layouts/@title=CSS-basiertem Layout> (http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=Floats).

Grüße,
Mathias

[bealine]

Hallo Mathias,

ich fürchte, da gibt es einige potentielle Problemstellen...  :-(
ich mach schon seit Wochen rum und finde keine Lösung...

hier der Link zur Seite: http://www.osteopathie-tbb.de

Liebe Grüße,
Bea

[Gunther]

Hallo!

Übrigens hat Selfhtml auch ein Kapitel zu <http://de.selfhtml.org/css/layouts/@title=CSS-basiertem Layout> (http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=Floats).

Wobei man imho auch gleich darauf hinweisen sollte, dass das Kapitel eigentlich veraltet ist.
Für "moderne/ aktuelle" Browser sollte man eher auf Flexbox, als auf Float Layouts setzen, und als Fallback Variante dann ggf. auf 'display:tbale-...'. Wobei das eigentlich nur noch für die IE 8+9 von Nöten ist/ wäre.

Gruß Gunther

[molily]

Hallo,

Wobei man imho auch gleich darauf hinweisen sollte, dass das Kapitel eigentlich veraltet ist.

Das sehe ich nicht so.

Float und position: absolute sind nicht veraltet. Bis auf weiteres sind es robuste Layouttechniken, und es werden auch in Zukunft noch wichtig sein.

Für "moderne/ aktuelle" Browser sollte man eher auf Flexbox, als auf Float Layouts setzen, und als Fallback Variante dann ggf. auf 'display:tbale-...'. Wobei das eigentlich nur noch für die IE 8+9 von Nöten ist/ wäre.

Floats werden seit 10 Jahren erforscht und sind die vorherrschende Layoutmethode. display: table ist erst seit ein paar Jahren robust einsetzbar und hat seine eigenen Tücken.

Flexbox ist seit Jahren ein sich ändernder Working Draft und in den aktuell verwendeten Browsern nicht oder sehr inkonsistent implementiert. Momentan hat man mit Flexbox soviel Ärger wie mit Floats im Internet Explorer 6, man muss mehrere Versionen und Fallbacks einbauen.

Mathias

[Gunther]

Hallo!

Wobei man imho auch gleich darauf hinweisen sollte, dass das Kapitel eigentlich veraltet ist.

Das sehe ich nicht so.

Ich schon ...! :-P

Float und position: absolute sind nicht veraltet. Bis auf weiteres sind es robuste Layouttechniken, und es werden auch in Zukunft noch wichtig sein.

Auch das kann man durchaus anders sehen, nämlich so, dass es "früher" gar kein "geeignetes Mittel" für das Layout in CSS gab. Und stattdessen immer irgendwelche anderen Dinge dafür herhalten mussten - quasi analog zu Tabellen-Layouts in HTML.

Insofern würde ich schon eher behaupten, dass man Floats heutzutage nicht mehr für Layoutzwecke missbrauchen muss.

Für "moderne/ aktuelle" Browser sollte man eher auf Flexbox, als auf Float Layouts setzen, und als Fallback Variante dann ggf. auf 'display:tbale-...'. Wobei das eigentlich nur noch für die IE 8+9 von Nöten ist/ wäre.

Floats werden seit 10 Jahren erforscht und sind die vorherrschende Layoutmethode. display: table ist erst seit ein paar Jahren robust einsetzbar und hat seine eigenen Tücken.

Die auch nicht größer sind, als die von Floats ... ;-)

Flexbox ist seit Jahren ein sich ändernder Working Draft und in den aktuell verwendeten Browsern nicht oder sehr inkonsistent implementiert.

Wobei es aber so aussieht, als wäre die derzeit aktuellste Fassung die Letzte. Und die ist zumindest in den aktuellen Versionen von FF und Chrome (somit auch Opera) auch entsprechend implementiert.

Momentan hat man mit Flexbox soviel Ärger wie mit Floats im Internet Explorer 6, man muss mehrere Versionen und Fallbacks einbauen.

Mehrere Versionen - Ja, Fallback - Ja, Ärger - Nein! :-P

Und RWD "funktioniert" vernünftig quasi ohne nicht ...!

Gruß Gunther

[molily]

Hallo,

Insofern würde ich schon eher behaupten, dass man Floats heutzutage nicht mehr für Layoutzwecke missbrauchen muss.

Flexbox ist schön und gut. Es sind das Layoutmittel der Zukunft. DER ZUKUNFT.

Wer heute professionell Websites baut, die mehr als eine privates Experiment ist, sollte von Flexbox bloß die Finger lassen.

• Niemand kennt sich damit aus, man kann keinen beliebigen anderen Frontend-Entwickler an den Code setzen.
• Es gibt noch vergleichsweise wenig Quellen dazu. Leute fangen erst an, Showcases zu bauen, wie sie vor 10 Jahren für Float-Layout gebaut wurden.
• Es ist noch auf keiner großen Site im Einsatz, während Float-Layout auf fast jeder Webseite im Einsatz ist.
• Es gibt mehrere Versionen der Spezifikation zu beachten
• … die jeweils nicht vollständig und fehlerfrei implementiert sind.
• Flexbox ist kein Allheilmittel. Es ist komplizierter als man denkt, insbesondere im Zusammenspiel mit Responsive Design.
• Es gibt keinen vernünftigen Polyfill.
• Es ist ein Fallback für ältere Browser nötig (Floats, display: table oder position: absolute). Man muss sich so oder so intensiv mit Legacy-Layouttechniken auseinandersetzen, um das Flexbox-Layout zugänglich zu machen. Man hat also zwei dicke Probleme.

Ich rate allen, sich mit Flexbox auseinanderzusetzen. Aber Anfängern zu sagen, Floats seien veraltet und sie sollten direkt Flexbox einsetzen, halte ich nicht für hilfreich. Derzeit ist noch zu viel zu beachten als dass die Benutzung von Flexbox für Anfänger eine Erleichterung darstellen würde.

Grüße,
Mathias

[Gunther]

Hallo,

Insofern würde ich schon eher behaupten, dass man Floats heutzutage nicht mehr für Layoutzwecke missbrauchen muss.

Flexbox ist schön und gut. Es sind das Layoutmittel der Zukunft. DER ZUKUNFT.

The future starts right now ...! ;-)

Wer heute professionell Websites baut, die mehr als eine privates Experiment ist, sollte von Flexbox bloß die Finger lassen.

Na ja, "Wer heute professionell Websites baut" und "Anfängern zu sagen" passt ja eh irgendwie nicht so ganz zusammen.

Und überhaupt heißt das eine ja nicht, dass man sich deshalb nicht auch mit dem anderen beschäftigen sollte.

Natürlich "muss" man sich auch mit Float(-Layouts) auskennen.
Ich wollte mit meinem ursprünglichen Beitrag ja auch lediglich darauf hinweisen, dass entsprechende Layouttechniken eher davor stehen, von anderen abgelöst zu werden, als jetzt der "neueste Stern" am Layout-Himmel zu sein. ;-)

• Flexbox ist kein Allheilmittel. Es ist komplizierter als man denkt, insbesondere im Zusammenspiel mit Responsive Design.

Das finde ich nicht unbedingt. Für sehr schmale Screens brauchst du es im Prinzip ja gar nicht (abgesehen mal von 'order').

Und im Zusammenspiel mit Media Queries macht Flexbox das Leben eher leichter, als schwerer.

• Es gibt keinen vernünftigen Polyfill.

Ich würde mich was das Layout anbelangt eh nie auf Javascript verlassen.
Insofern sind für mich Polyfills für solche Sachen überflüssig. :-P

• Es ist ein Fallback für ältere Browser nötig (Floats, display: table oder position: absolute). Man muss sich so oder so intensiv mit Legacy-Layouttechniken auseinandersetzen, um das Flexbox-Layout zugänglich zu machen. Man hat also zwei dicke Probleme.

Oder anders betrachtet: Du hast das alte Problem, und eine "neue" Option/ Möglichkeit! ;-)

Ich rate allen, sich mit Flexbox auseinanderzusetzen. Aber Anfängern zu sagen, Floats seien veraltet und sie sollten direkt Flexbox einsetzen, halte ich nicht für hilfreich. Derzeit ist noch zu viel zu beachten als dass die Benutzung von Flexbox für Anfänger eine Erleichterung darstellen würde.

s.o.
Ja, so war das auch nicht gemeint. Nur bin ich mir ziemlich sicher, dass Flexbox für Layouts die Zukunft gehört. Insofern kommt man da über kurz oder lang nicht dran vorbei! ;-)

Und wenn erst mal mehr "Klarheit" in die Spezifikation und die Browser Implementierung gekommen ist, und es auch nur noch eine Frage der Zeit ist, bis man IE 8 + 9 auch nicht mehr (zwingend) unterstützen muss, dann wird Flexbox wohl das "Mittel der Wahl" für Layouts sein.

Gruß Gunther

[Felix Riesterer]

Liebe(r) bealine,

ich habe in meinem template einen div-Container in eine td plaziert.

das schreit geradezu nach Problemen! Mobile devices mal völlig außen vor...

Nur mit divs hab ich das Layout leider nicht geschafft und deshalb zur Seitenformatierung eine dreispaltige Tabelle zugrunde gelegt.

Ein Layout ist nicht unbedingt besser, nur weil Tabellen durch <div> ersetzt werden.

Das div enthält meine Inhaltstexte für die einzelnen Homepageseiten.

Jetzt wird es definitiv Zeit für einen Link zu Deiner Seite, damit man Dir auch _helfen_ kann, ohne ausschließlich über ungeschicktes Vorgehen Deinerseits zu spekulieren. Also: Her mit dem Link!

Liebe Grüße,

Felix Riesterer.

[bealine]

Hi,

hier der Link: http://www.osteopathie-tbb.de

Ich bin wirklich sehr dankbar für jeden Hinweis!
Danke!

Liebe Grüße,
Bea

[Felix Riesterer]

Liebe bealine,

hier der Link: http://www.osteopathie-tbb.de

ich habe aus Interesse einmal probiert, das Layout mit CSS-Mitteln nachzuempfinden. An Deinem Doctype habe ich nichts verändert, es ist also kein HTML5, sondern wie von Dir begonnen HTML4.01 Transitional.

Du kannst eine HTML-Datei mit folgendem Code befüllen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
    <head>  
        <title>Privatpraxis für Osteopathie, ganzheitliche Physiotherapie und Naturheilkunde</title>  
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
        <link rel="shortcut icon" type="image/x-icon" href="./graphics/favicon.ico">  
        <style type="text/css">@import url(./templates/smith-meier-style.css) all;</style>  
    </head>  
  
    <body id="willkommen">  
        <div id="main">  
            <h1>Herzlich Willkommen in unserer Praxis!</h1>  
            <p>Als Therapeuten im Bereich Osteopathie, Naturheilkunde und Physiotherapie wollen wir Ihnen mit unserem Erfahrungsschatz, unserer fundierten Ausbildung und unserem persönlichen Engagement gerne zur Seite stehen.</p>  
            <p>Unser Körper vollbringt jeden Tag Höchstleistungen.<br>Schenken Sie Ihm die Beachtung, die er verdient.</p>  
        </div>  
  
        <div id="navi">  
            <ul>  
                <li>  
                    <a href="index.php" rel="willkommen">begrüßen</a>  
                </li>  
                <li>  
                    <a href="Therapeuten.php" rel="ihre Therapeuten">kennenlernen</a>  
                </li>  
                <li>  
                    <a href="Schwerpunkte.php" rel="informieren">verstehen</a>  
                </li>  
                <li>  
                    <a href="Behandlung.php" rel="Ablauf der Behandlung">erklären</a>  
                </li>  
                <li>  
                    <a href="Kontakt.php" rel="Kontakt">ansprechen</a>  
                </li>  
                <li>  
                    <a href="Anfahrt.php" rel="Anfahrt">hinfahren</a>  
                </li>  
            </ul>  
            <blockquote>"To find health should be the object of the osteopath. Anyone can find disease." <span>A. T. Still</span></blockquote>  
            <ul>  
                <li><a href="Links.php">links</a></li>  
                <li><a href="Impressum.php">impressum</a></li>  
                <li><a href="Downloads.php">downloads</a></li>  
            </ul>  
        </div>  
        <p id="header">Privatpraxis für Osteopathie, ganzheitliche Physiotherapie und Naturheilkunde</p>  
        <p id="footer">Privatpraxen S. Meier und C. Smith I Hauptstrasse 2 I 97941 Tauberbischofsheim I Fon: 0931/ 666 88 22 I Termine nach Vereinbarung</p>  
    </body>  
</html>

Wenn Du das hast, dann kannst Du den Inhalt der Datei "./templates/smith-meier-style.css" durch den folgenden (restlos!) ersetzen:

html {  
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 13px;  
    background-color: #444444;  
    margin: 0;  
    padding: 0;  
}  
  
body {  
    border: 20px solid #666666;  
    background: white url(../graphics/physio-logo.png) 235px 35px no-repeat;  
    color: #666666;  
    margin: 190px auto 0 auto;  
    padding: 0 10px;  
    position: relative;  
    width: 964px;  
}  
  
#header {  
    color: white;  
    display: block;  
    font-size: 16px;  
    font-weight: bold;  
    position: absolute;  
    text-align: center;  
    top: -36px;  
    width: 100%;  
}  
  
#header:after {  
    background: white;  
    content: url(../graphics/physio-logo.png);  
    display: block;  
    height: 120px;  
    left: -30px;  
    padding: 28px 17px;  
    position: absolute;  
    top: -177px;  
    width: 990px;  
}  
  
#footer {  
    clear: both;  
    color: white;  
    font-weight: bold;  
    margin: 0 0 -18px 0;  
    text-align: center;  
    width: 100%;  
}  
  
#navi {  
    background: #B8D27C;  
    float: left;  
    margin: 10px 0;  
    min-height: 510px;  
    width: 225px;  
}  
  
#navi:after {  
    clear: both;  
    content: "";  
    display: block;  
}  
  
#navi ul:first-child {  
    border: 1px solid white;  
    border-bottom: none;  
    border-collapse: collapse;  
    list-style: none;  
    margin: 40px 0 0 0;  
    padding: 0;  
}  
  
#navi ul:first-child li {  
    border-bottom: 1px solid white;  
    border-collapse: collapse;  
    display: table;  
    height: 30px;  
    position: relative;  
    width: 100%;  
}  
  
#navi ul:first-child a {  
    color: #444444;  
    display: table-cell;  
    height: 100%;  
    margin: 0;  
    padding: 0 0 0 50px;  
    text-decoration: none;  
    vertical-align: middle;  
    width: auto;  
}  
  
#navi ul:first-child a:before {  
    border-left: 1px solid white;  
    content: "";  
    height: 29px;  
    left: 36px;  
    position: absolute;  
    top: 0;  
    vertical-align: middle;  
    width: 0px;  
}  
  
#navi ul:first-child a:hover {  
    color: #D9634C;  
}  
  
#navi ul:first-child a:hover:before {  
    background: #B8D27C;  
    color: #D9634C;  
    content: attr(rel);  
    height: 16px;  
    padding: 7px 0 6px 14px;  
    width: 166px;  
}  
  
#navi ul:first-child a:hover:after {  
    background: #D9634C;  
    content: "";  
    height: 29px;  
    left: 0px;  
    position: absolute;  
    top: 0;  
    width: 36px;  
}  
  
#navi blockquote {  
    color: white;  
    font-family: Times, serif;  
    font-size: 16px;  
    font-weight: bold;  
    margin: 40px 0 0 0;  
    padding: 2px;  
    text-align: center;  
}  
  
#navi blockquote span {  
    display: block;  
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 13px;  
    font-style: italic;  
    font-weight: normal;  
    margin: 1em 0 0 0;  
}  
  
#navi ul:last-child {  
    list-style: none;  
    margin: 100px 0 0 0;  
    padding: 0;  
    text-align: center;  
}  
  
#navi ul:last-child li {  
    display: inline;  
    margin: 0;  
    padding: 0;  
}  
  
#navi ul:last-child li:nth-child(2):before,  
#navi ul:last-child li:nth-child(2):after {  
    content: " | ";  
}  
  
#navi ul:last-child a {  
    color: #444444;  
    text-decoration: none;  
}  
  
#navi ul:last-child a:hover {  
    color: #D9634C;  
    text-decoration: underline;  
}  
  
#main {  
    background: #B8D27C;  
    float: right;  
    margin: 10px 0;  
    min-height: 480px;  
    padding: 15px;  
    width: 460px;  
}  
  
h1 {  
    font-size: 18px;  
}  
  
  
/* Hintergrundbilder für die verschiedenen Seiten */  
  
#willkommen {  
    background-image: url(../graphics/willkommen.jpg);  
}

Das Ergebnis sollte dem momentanen Ist-Zustand schon recht nahe kommen. Dabei kommt es aber völlig ohne JavaScript und Tabellen aus, sollte also zugänglicher als Dein bisheriges Konstrukt sein.

Getestet habe ich allerdings nur unter Firefox (Linux), kann also nicht dafür garantieren, dass es in einem älteren Internet Explorer einigermaßen vernünftig aussieht! Aber das darfst Du dann tun.

Liebe Grüße,

Felix Riesterer.

[Matthias Apsel]

Om nah hoo pez nyeetz, bealine!

Das div enthält meine Inhaltstexte für die einzelnen Homepageseiten.
Da die umgebende Tabelle auch eine Fußzeile hat, sollte diese je nach Textlänge nach unten rutschen. Das div legt sich aber bei längeren Texten einfach über den Tabellenfooter statt dass die td mit dem div-Inhalt mitwächst.

Das liegt daran, dass die Tabellenfußzeile keine Tabellenfußzeile ist, sondern ein h2, was mit der Tabelle nichts zu tun hat.

Wenn du in die rechte Spalte viel Text füllst, kannst du an der mittleren Spalte ablesen, wie hoch die Spalten in Wirklichkeit sind: Das Bild rutscht nach unten weil es valign=middle hat.

Da aber dein #content-bg eine feste Höhe hat, bleibt der Tabelle nichts weiter übrig als über das div hinaus zu wachsen. Einfachste Abhilfe (für eine stark verbesserungswürdige Homepage!) wäre #content-bg {min-height: 500px;}

Deine Beobachtung war also falsch:

nicht das div #inhalt, wächst über sein td-Elternelement sondern die Tabelle wächst über ihr div-Elternelement hinaus.

Matthias

[bealine]

Vielen, vielen Dank für Deine Analyse!
Ist mein erster Versuch mit divs... :o/
Werd versuchen, mich zu verbessern! DANKE!

Herzlich,
Bea

[Matthias Apsel]

Om nah hoo pez nyeetz, bealine!

Ist mein erster Versuch mit divs... :o/

Den Entwicklungsschritt vom Tabellenlayout zur DivSuppe solltest du überspringen. selfblog html5-Serie

Matthias

[bealine]

bin leider erst heute zum Ausprobieren gekommen und es hat sofort funktioniert und ich bin echt sooo erleichtert - war ganz schön verzweifelt! - BIN DIR RIESIG DANKBAR!!!
:-x
THANK YOU SO MUCH for your quick help! !!!

Herzlich,
Bea