Ich möchte eine Html-Seite mit einem klassischen Design anzeigen. Kopfzeile, Fußzeile, Inhalt und Leiste auf der rechten Seite.
Aus irgendeinem Grund gefällt mir die feste Breite des Inhalts nicht. Auf einem breiten Bildschirm sollte man die Größe der Seite ändern können, so dass sie den Bildschirm ausfüllt, oder sie sehr klein machen, um zwei Seiten nebeneinander anzuzeigen.
Ich würde auch gerne div-Tags anstelle eines Tabellenlayouts verwenden. Die Verwendung von div-Tags bietet mir die folgenden Vorteile (wie mir gesagt wurde):
- Inhalte können gerendert werden, während man auf die "richtige" Leiste wartet
- Auf einem Mobiltelefon können die Div-Tags untereinander und nicht nebeneinander angezeigt werden.
Mein Test/Debug-HTML sieht wie folgt aus:
<!-- Create content with DIV tags -->
<div id="head" style="background-color:aqua">This is the header</div>
<div id="body" style="float:left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</div>
<div id="right" style="background-color:orange; float:right; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tail" style="background-color:lime;clear:both;">This is the Footer</div>
<p> </p>
<!-- Create content with TABLE tag -->
<div id="t-head" style="background-color:aqua">This is the header</div>
<table cellpadding="0" cellspacing="0">
<tr><td>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales sagittis sem, at bibendum nunc aliquet non. Maecenas condimentum, libero pharetra suscipit sodales, dui diam laoreet velit, at lacinia nisl erat sed turpis. Quisque lobortis consequat elementum. Suspendisse non interdum est. In velit felis, rhoncus tincidunt tincidunt sit amet, laoreet eu ligula. Nulla facilisi. Sed ornare facilisis pulvinar. Integer viverra arcu eu turpis dictum vitae tincidunt magna scelerisque. Nunc laoreet pulvinar odio, quis rutrum libero consectetur non. Donec molestie, felis volutpat condimentum iaculis, orci arcu feugiat sapien, accumsan scelerisque sapien orci sed urna. Curabitur et turpis sit amet diam vulputate egestas. </p>
</td><td valign="top" style="background-color:orange; width:10em;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td></tr>
</table>
<div id="t-tail" style="background-color:lime;clear:both;">This is the Footer</div>Die Ausgabe dieses Codes finden Sie hier:
(Quelle: <a href="http://www.vantslot.be/images/StackOverflow/Example-TableDiv.png" rel="nofollow noreferrer">vantslot.be </a>)
(Der Text spielt keine Rolle, nur das Layout, deshalb habe ich ihn etwas verkleinert).
Das obere Layout verwendet die divs : 不正解
Das untere Layout verwendet die Tabelle : gut
Meine Frage / mein Problem
Wie kann ich die "rechte" Leiste rechts vom Inhalt positionieren, während die dynamische Breite des Inhalts beibehalten und kein Tabellenlayout verwendet wird?
Was ich eigentlich will, ist, dass der rechte Bereich rechts vom Inhalt erscheint, aber wenn der Browser zu klein ist (< 20em), kann er darunter angezeigt werden. Dies ist mit Tabellen nicht möglich, daher bevorzuge ich eine Div-Lösung.
In der endgültigen Website werden die Inhalte der Kopf-/Fußzeile/des Inhalts und der rechten Seite dynamisch generiert, so dass ich die Höhe nicht fest programmieren kann.
bearbeiten
Vielen Dank für alle Antworten, das hilft mir wirklich weiter.
Ich sehe, was hier "falsch" ist. Ich habe die rechts nach dem Fenster Inhalt fenster. Wenn ich den rechten Bereich vor dem Inhaltsbereich einfüge, wird er korrekt wiedergegeben (nachdem ich dem Inhalt einen rechten Rand hinzugefügt habe).
Dies ist etwas unlogisch für den Fluss der html. Da der Inhalt wichtiger ist als der Inhalt im rechten Fenster, möchte ich, dass er vor dem rechten Fenster an den Kunden gesendet wird.
