+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: Rund um HTML (https://forum.juergens-workshops.de/forumdisplay.php?fid=83)
+--- Thema: Ein komplexes html (css) Layout Problem (/showthread.php?tid=20206)
Ein komplexes html (css) Layout Problem - Dreamartist - 01.06.2006
Hallo alle,
ich hab hier ein ziemlich schwieriges Problem mit einem Webseitenlayout. (glaub ich zumindest)
Also.... ich möchte ein 3 spaltiges Layout machen. In der linken Spalte gibt es 3 Zeilen wobei die erste und die zweite Zeile feste Größen haben und die 3 (unterste) Zeile sich dynamisch aufziehen soll um so den Rest Freiraum auszufüllen. Die Mittlere Spalte ist die Contentspalte, da gibts nur eine Zelle für den Inhalt. Die rechte Spalte hat auch wieder 3 Zeilen. Hier sind diesmal die obere und die untere Zeile fest und nur die mittlere passt sich dynamisch der Größe der Seite an. Die Spalten links und rechts verlängern sich automatisch wenn der Text im Contentbereich mehr wird.
Damit ihr das auch im Bild sehen könnt, schaut euch mal diesen Link http://aeronautic.321media.de/test2.php im FIREFOX an. der zeigt das Layout korrekt an. Wenn ihr euch das im IE anschaut seht ihr mein Problem.
Also, vielleicht hat ja von euch einer eine Idee wie ich es hinkriege das der IE das Layout auch korrekt anzeigt.
Ich hatte im Vorfeld das schon versucht ohne Tabellen umzusetzen (also mit <div> Tags) Aber das habe ich nach vielen Versuchen aufgegeben, weil ich mitlerweile der Überzeugung bin, dass man dieses Layout nicht mit <div> umsetzen kann.
Leider kann ich an dem Layout nichts ändern, das heißt, man hat in dieser Hinsicht Null Spielraum.
Leider hat mir auch Google noch keine Lösung zu dem Problem geben können. Vielleicht hat ja einer von euch die Zündende Idee wie sich das korrekt umsetzen lässt. Ihr seid sozusagen meine letzte Hoffnung! ;-)
Ach so, eins noch. Was ich nicht möchte sind Lösungen auf Java Script Basis. Also bitte nur html und css Lösungen.
Schonmal Danke im vorraus für eure Hilfe!
So long
Gruß Björn
Ein komplexes html (css) Layout Problem - Helmut - 01.06.2006
Hi,
sollte passen, geht zumindest im IE6, FF und Opera...
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
body, html {
background-color: #f7f7f7;
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
margin: 0px;
padding: 0px;
}
.tbg {
background-color: #990000;
}
.tc {
background-color: #ffffff;
}
</style>
</head>
<body>
<table cellspacing="1" cellpadding="0" border="0" class="tbg" width="600" height="100%">
<tr>
<td valign="top" class="tc" width="150">
<div style="height: 100px; border-bottom: 1px solid #000000;">100px</div>
<div style="height: 200px; border-bottom: 1px solid #000000;">200px</div>
<div>dynamischer rest</div>
</td>
<td valign="top" class="tc" width="300" style="padding: 4px;">
Sed massa dolor, tincidunt eu, condimentum ac, condimentum a, libero. Nulla facilisi. Quisque tincidunt leo eu purus. Morbi vestibulum. Aenean ultricies. Morbi nonummy dui nec eros. Duis rhoncus, nulla vitae pretium posuere, felis arcu euismod leo, at iaculis magna libero cursus velit. Sed massa orci, fringilla eu, hendrerit quis, pretium eget, nulla. Aliquam at dolor in ipsum mattis elementum. Nulla facilisi. Sed ac ipsum vitae sapien tempor vulputate. Aliquam erat volutpat. In massa. Vivamus eros sem, faucibus eget, mollis ac, consectetuer eu, dui. Morbi augue pede, faucibus in, facilisis in, dignissim id, neque. Proin congue neque quis mauris. Nulla congue tellus vel elit. Quisque consequat, metus eget pretium tincidunt, nulla velit hendrerit justo, eu congue risus nisl at felis. Sed nonummy dui eu velit.
<br><br>
Vivamus dolor. Fusce vitae est eget tellus tincidunt viverra. Suspendisse lobortis. Donec rhoncus, nunc quis eleifend congue, ante nulla varius velit, sit amet vehicula erat augue sollicitudin lectus. Ut venenatis pharetra felis. Curabitur sit amet nunc. Suspendisse quis dui eget magna viverra vehicula. Maecenas placerat pellentesque eros. Suspendisse potenti. Proin nibh.
<br><br>
Phasellus libero. In mauris velit, luctus a, dictum posuere, placerat ac, nibh. Suspendisse elit magna, porta sit amet, ullamcorper vitae, venenatis in, turpis. Nulla pulvinar quam ut ante vulputate tincidunt. Nullam faucibus neque a purus. In hac habitasse platea dictumst. Maecenas ac nisi. Phasellus tempus venenatis dolor. Vestibulum nec nisi nec ipsum mollis pretium. Nulla velit. Praesent quam risus, hendrerit ut, euismod ut, feugiat sit amet, lacus. Aliquam lorem ligula, porttitor quis, fringilla vel, porttitor ut, libero. Nullam hendrerit neque eu metus. Nunc vitae tortor sit amet diam dictum accumsan.
<br><br>
Donec in mauris vitae odio placerat pellentesque. Phasellus eget arcu. In dui. Nullam laoreet, elit facilisis ultrices porta, sem ligula consequat nulla, id aliquet sem eros sit amet nisi. Quisque sagittis purus id nisl. Curabitur sit amet ante. Ut auctor, nibh in tristique fermentum, sapien enim ultrices lectus, non convallis pede nibh non nisi. Quisque mollis. Suspendisse potenti. Pellentesque libero lorem, lacinia vel, facilisis iaculis, iaculis in, nisl.
<br><br>
Maecenas sit amet felis. Nam vestibulum tellus eu nibh. Aliquam orci. Sed odio libero, varius in, malesuada sed, fermentum sed, nisi. In dolor orci, hendrerit a, tincidunt sit amet, aliquet in, justo. Quisque vitae dolor nec quam pulvinar tincidunt. Praesent volutpat velit at nulla. Phasellus diam magna, sollicitudin nec, accumsan et, pellentesque a, quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tincidunt purus. Sed ante. Fusce at massa. Suspendisse potenti. Aenean non quam vel turpis pulvinar vestibulum. Aliquam eget erat malesuada neque pulvinar vestibulum. Cras iaculis justo id arcu. Vestibulum turpis.
</td>
<td valign="top" class="tc" width="150" height="100%">
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">
<tr>
<td height="200" valign="top" style="border-bottom: 1px solid #000000;">200px</td>
</tr>
<tr>
<td height="100%" valign="top" style="border-bottom: 1px solid #000000;">dynamisch</td>
</tr>
<tr>
<td height="100" valign="top">100</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>[/HTML]
Viel anders wird das nicht gehen wenn das Layout so "Pflicht" ist.
Cu Helmut
Ein komplexes html (css) Layout Problem - Dreamartist - 01.06.2006
Hi Helmut,
sorry, ich hab durch mein vereinfachtes Modell was ich gepostet hatte (test2) wohl einen etwas falschen Eindruck erweckt wie das Design nachher aussehen soll. Die Idee, das mit der Hintergrundfarbe zu kaschieren ist schon nicht schlecht, aber bei der tatsächlichen Umsetzung der Seite kann ich das so nicht machen.
Ich hab hier http://aeronautic.321media.de/index2.php mal das Layout gepostet wie es am Ende aussehen soll. Nur eben mit den 2 dynamischen Feldern die sich aufziehen sollen. (Wieder wirds im FIREFOX richtig dargestellt)
Das ist jetzt übrigens die Tabellenlose Variante, die ich angesprochen hatte.
Vielleicht fällt dir/euch ja dazu was ein.
Schönen Gruß
Björn
P.S. das einzige was mir dazu noch einfallt, wäre alles statisch zu machen (so wie es jetzt ist) und dann dem content Bereich ein overflow: scroll; zu verpassen. Dann sähe das wie ein i-frame aus. Allerdings Glücklich würde mich das nicht wirklich machen :-/
Ein komplexes html (css) Layout Problem - Helmut - 01.06.2006
Hi,
Zitat:Die Idee, das mit der Hintergrundfarbe zu kaschieren ist schon nicht schlecht, aber bei der tatsächlichen Umsetzung der Seite kann ich das so nicht machen.die hab ich eigentlich nur als "Randfarbe" missbraucht. Das Layout lässt sich damit schon umsetzen.
Cu Helmut
Ein komplexes html (css) Layout Problem - sheik_yerbouti - 02.06.2006
Hi Björn,
ich bin z.Zt. etwas raus aus dem Thema. Trotzdem die Frage:
Dreamartist schrieb:Ich hab hier http://aeronautic.321media.de/index2.php mal das Layout gepostet wie es am Ende aussehen soll. Nur eben mit den 2 dynamischen Feldern die sich aufziehen sollen. (Wieder wirds im FIREFOX richtig dargestellt)
Was soll denn mit den zwei dynamischen Feldern passieren? Bleiben die leer oder werden die mit Inhalt gefüllt? Hast du links und rechts wenig Inhalt und in der Mitte viel Inhalt entsteht doch links und rechts ein grosser Freiraum
Ich könnte dir erst mal noch folgende Seite empfehlen:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
Ich bin mir sicher dass du dort eine Menge Ideen zu dreispaltigen Layouts finden wirst. Du könntest auch mal einen Blick auf meine bescheidene Seite werfen. Dort wachsen die Spalten auch, je nach Menge des Inhalts.
Grüße,
Matthias
Ein komplexes html (css) Layout Problem - Dreamartist - 02.06.2006
@ Helmut: Hmmm, da muß ich mir deinen Vorschlag nochmal in Ruhe sezieren. War gestern schon "auf dem Sprung" und habs nur überflogen.
@sheik:
Zitat:Was soll denn mit den zwei dynamischen Feldern passieren? Bleiben die leer oder werden die mit Inhalt gefüllt? Hast du links und rechts wenig Inhalt und in der Mitte viel Inhalt entsteht doch links und rechts ein grosser Freiraum
Die 2 Felder in denen "dynamisch" steht, bleiben leer. Die sind sozusagen nur ein Designelement. Die sollen sich mit aufziehen wenn im Contentbereich der Inhalt wächst. Da die sich mit dem Inhalt im Content dynamisch aufziehen (sollen), entsteht auch links und rechts kein großer Freiraum. Das ist ja genau das Problem ;-)
Dank dir für den Link. Ich werd mir das mal in Ruhe anschauen.
So long
Gruß Björn
Ein komplexes html (css) Layout Problem - Dreamartist - 02.06.2006
@ Helmut: jetzt hab ich es hinbekommen. *freu*
Zitat:Die Idee, das mit der Hintergrundfarbe zu kaschieren ist schon nicht schlecht, aber bei der tatsächlichen Umsetzung der Seite kann ich das so nicht machen.
die hab ich eigentlich nur als "Randfarbe" missbraucht. Das Layout lässt sich damit schon umsetzen.
Das was sich bei deinem Vorschlag in der Linken Spalte nach unten dynamisch aufzog war wirklich nur der Hintergrund der Tabellenspalte. Das hätte man nicht in einem eigenen Kästchen darstellen können. Die Lösung hattest du aber im Prinzip schon mitgeliefert. Und zwar das <div> in dem "dynamischer Rest" drin stand. Nur hattest du das nicht auf height:100%; gesetzt, so dass das nur ein einfaches undynamisches Kästchen war. Das hatte mich irritiert. ;-)
Allerdings ist mir immer noch ein Rätsel warum bei deinem Vorschlag die Tabellenzellen in der Tabelle rechts im IE korrekt aufgezogen werden (das mittlere dynamisch), aber bei mir (...test2) alle Zellen ihre Größe ändern trotzdem ich auch für oben und unten feste Werte vergeben habe. :?:
Das Leben eines Webworkers wäre so einfach wenn es nicht den IE geben würde!! Der hat mich schon ne Menge Nerven und Studen gekostet! :?
Vielen Dank für deine Hilfe!
Gruß Björn