nicht angemeldet
<DIV>s mit css/sytele positionieren
Hallo zusammen,
kann ich folgende Framestruktur:
<frameset rows="80,*,80">
<frame name="oben" src="frame_oben.html">
<frame name="mitte" src="frame_mitte.html">
<frame name="unten" src="frame_unten.html">
</frameset>
adäquat mit <DIV> ersetzen? Ungefähr so:
<div id="oben" name="oben" style="...">
</div>
<div id="mitte" name="mitte" style="...">
</div>
<div id="unten" name="unten" style="...">
</div>
Mir geht es speziell um "80,*,80", also die relative Größe des mittleren Frames. Mit einer Größenangabe in % geht das ja nicht...
Danke für Eure Ideen und Hinweise!
Fraenk
-
Mir geht es speziell um "80,*,80", also die relative Größe des mittleren Frames. Mit einer Größenangabe in % geht das ja nicht...
Für die Positionierung eines Divs benötigst du die CSS Attribute top und left. Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title></head>
<body><div id="Mydiv" style="position:absolute;top:100px;left:100px">
Hallo
</div></body>
</html>-
Hallo,
das ist schon klar, aber wie bekomme ich es hin, daß ich einen div mit der Höhe 80px oben, einen div mit der Höhe 80px unten und dazwischen einen div habe, der den gesamten Raum zwischen diesen beiden divs einnimmt, egal wie großm das Broweserfenster ist? Also sowas wie die relative Höhe bei Frames?
Danke und Grüße
Fraenk-
Hallo Fraenk!
Ich habe auch einmal so etwas versucht, doch das einzige was ich weiß ist, dass eine relative Höhenangabe bei DIVs bei mir nie richtig funktioniert.
Ich würde das an deiner Stelle mir Tabellen machen ich denke da könntest du das erreichen was du im Sinn hast!
Gruß Christoph
-
Hi Christoph,
ich hab mal folfendes Konstrukt gebastelt:
<table width="100" height="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80"> <iframe id="i0" name="i0" src="frame_oben.html" border="0" frameborder="0" height="80px" width="100%"marginwidth="0" marginheight="0" scrolling="No">
</iframe> </td>
</tr>
<tr>
<td > <iframe id="i0" name="i0" src="frame_mitte.html" border="0" frameborder="0" height="100%" width="100%"marginwidth="0" marginheight="0" scrolling="No">
</iframe> </td>
</tr>
<tr>
<td height="80"> <iframe id="i0" name="i0" src="frame_unten.html" border="0" frameborder="0" height="80px" width="100%"marginwidth="0" marginheight="0" scrolling="No">
</iframe> </td>
</tr>
</table>Scheint in IE 5 und NN 7 zu funktionieren... Aber ist das "konform"? Und: Man soll doch auf Layouts mit Tabellen und Frames verzichten und alles mit css machen...
Grüße - Fraenk
-
-
Hi,
Das Problem ist, daß CSS kein Äquivalent zu dem * in Frames hat bzw. zur gegenseitigen Größenabhängigkeit von Tabellenzellen.
Du kannst wohl eine Seitenaufteilung mit CSS sehr leicht realisieren, in der Art: Oben = 80px - Mitte = inhaltsabhängig - Unten = 80px. Ich finde solch eine Aufteilung ohnehin benutzerfreundlicher.freundliche Grüße
Ingo-
Hallo Ingo,
ich denke, das ist genau das was ich will! Aber ich habe die Idee zur Realisierung nicht ganz verstanden...
Viele Grüße
Fraenk-
Hi,
ich denke, das ist genau das was ich will! Aber ich habe die Idee zur Realisierung nicht ganz verstanden...
wieso? wäre doch das Einfachste überhaupt:
#oben,#unten {height:80px; /* und weitere Formatierungen */}
#mitte {/* ggfls. margins nach oben und unten und andere gewünschte Formatierungen setzen */}freundliche Grüße
Ingo-
Hi,
ich hab folgendes probiert:
<div id="oben" name="oben" style="background-color: #e8e8e8; width:90%; position:absolute; height:80px; z-index:10; top: 0px; left: 0px">
</div>
<div id="mitte" name="mitte" style="background-color: #000000; width:90%; position:absolute; height: 100%; z-index:11; top: 80px; margin-top: 5px; margin-bottom: 5px; overflow: visible; left: 0px">
</div>
<div id="unten" name="unten" style="background-color: #e8e8e8; width:90%; position:absolute; height:80px; z-index:12; bottom: 0px; left: 0px">
</div>aber mit dem div "mitte" haut das nicht hin... setze ich height nicht, dann gibt es nur einen schmalen Streifen, setzte ich height, dann wird's zu groß...
Ratlos - Fraenk
-
Hi,
moment mal... eben hast Du noch geschrieben, daß Du eigentlich eine _variable_ Höhe des Inhaltsbereiches wolltest. So jedenfalls würde ich "inhaltsabhängig" definieren. Und jetzt kommst Du mit absoluten Positionierungen?
Lasse diese weg, und alles paßt bzw. paßt sich dem Inhalt des mittleren Bereiches an. Ist dieser klein, wird der untere Bereich zwangsläufig nicht unten im Fenster sondern unter "nur" unter dem Inhalt angezeigt. Ist dieser aber sehr groß, kommt es zu keiner Überlagerung, die Du bei absoluter Positionierung vermutlich bekommen würdest.freundliche Grüße
Ingo -
Hi,
<div id="mitte" name="mitte" style="background-color: #000000; width:90%; position:absolute; height: 100%; z-index:11; top: 80px; margin-top: 5px; margin-bottom: 5px; overflow: visible; left: 0px">
Ich hab Dir doch vorhin schon geschrieben, daß Du keine Höhe setzen sollst, aber dafür bottom:80px.
Wenn Du das natürlich ignorierst, was man Dir schreibt, ist Dir natürlich auch nur schwer zu helfen.Nochwas:
div hat kein name-Attribut.cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
ich hatte erwähnt, daß ich's mit und ohne Höhenangabe probiert habe und keins von beidem führte zum gewünschten Ergebnis. Ich suche sowas, wie Jan gepostet hat, nur eben mit der Vermischung von fixer und variabler Höhe...
Aber das geht wohl nicht!Danke trotzdem!
Fraenk
-
Hi,
Hi,
ich hatte erwähnt, daß ich's mit und ohne Höhenangabe probiert habe und keins von beidem führte zum gewünschten Ergebnis.
Hab ich nur geschrieben, daß Du die Höhenangabe weglassen sollst?
Ich suche sowas, wie Jan gepostet hat, nur eben mit der Vermischung von fixer und variabler Höhe...
Aber das geht wohl nicht!Ich habe Dir schon zweimal geschrieben, wie es geht.
Da Du aber sowieso meine Postings immer nur teilweise liest (und die entscheidenden Teile nicht), gebe ich auf.cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
ich ignoriere Dich doch nicht ;-)
Ich habe es nur nicht verstanden... Meinst Du so:
<div id="oben" style="background-color: #e8e8e8; width:90%; position:absolute; height:80px; z-index:10; top: 0px; left: 0px">
</div>
<div id="mitte" style="background-color: #000000; width:90%; position:absolute; z-index:11; top: 80px; bottom: 80px; overflow: visible; left: 0px">
</div>
<div id="unten" style="background-color: #e8e8e8; width:90%; position:absolute; height:80px; z-index:12; bottom: 0px; left: 0px">
</div>Aber das Ergebnis sieht nur im NN7 so aus, wie ich mir das vorstelle, im IE5.0 ergibt der div "mitte" nur einen schmalen schwarzen Streifen...
Grüße - Frank
-
Hallo,
Aber das Ergebnis sieht nur im NN7 so aus, wie ich mir das vorstelle, im IE5.0 ergibt der div "mitte" nur einen schmalen schwarzen Streifen...
Auch der 6er IE wird dir nur einen schwarzen streifen zeigen und wenn du ihn mit zuviel inhalt füllst wird es noch schlimmer.
Du solltest overflow:auto; statt visible angeben allerdings kommt opere<7 nicht damit klar da braucht es overflow:scroll; mit dem ergebnis, dass immer ein waagerechter rollbalken zu sehen ist aber im IE funktioniert es dann immer noch nicht.
Ich persönlich halte diese methode für eher ungeeignet da sie nur in NN6+ und ab opera7 funktioniert.Gruss, Jan aus Dresden
-
Hallo,
danke erstmal (an alle)!
Dann werde ich doch auf das gute alte Tablelayout zurückgreifen...
Viele Grüße
Fraenk
-
-
-
-
-
-
-
-
-
-
-
-
Hallo,
Mir geht es speziell um "80,*,80", also die relative Größe des mittleren Frames. Mit einer Größenangabe in % geht das ja nicht...
Ich denke nein, da du dafür position:fixed; bräuchtest was der IE nicht kann, da er aber bis zu 95% benutzt wird wirst du wohl darauf verzichten müssen. Das höchste der Gefühle auf diesem Gebiet was ich bischer gesehen habe ist: http://www.alistapart.com/d/footers/.
Grüße
Jeena Paradies--
Ich bin mir ziemlich sicher dass es im Leben mehr gibt als nur wirklich wirklich gut auszusehen ...
<img src="http://home.arcor.de/vivosomuertos/self/zoolander.jpg" border="0" alt="">
Bambergs Fasching - nur ein großer (Werbe-)Flop?
http://jeenaparadies.de/artikel/fasching/
Jeenas Bannertauschportal; selbstgemacht ;-)
http://jeenasbannerbude.de -
Hi,
<div id="oben" name="oben" style="...">
</div>auf top 0 positionieren, Höhe 80px
<div id="mitte" name="mitte" style="...">
</div>top/bottom auf 80px positionieren, keine Höhenangabe
<div id="unten" name="unten" style="...">
</div>auf bottom 80px positionieren, Höhe 80px
Ggf. noch overflow für die Einzelteile.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.-
Hi,
Korrektur:
<div id="unten" name="unten" style="...">
</div>
auf bottom 80px positionieren, Höhe 80pxNatürlich auf bottom 0
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da. -
Hi,
hast Du ungefähr so gemeint:
<div id="oben" name="oben" style="width:90%; position:absolute; height:80px; z-index:10; top: 0px">
<iframe id="i0" name="i0" src="frame_oben.html" border="0" frameborder="0" height="80px" width="100%" marginwidth="0" marginheight="0" scrolling="No">
</iframe>
</div>
<div id="mitte" name="mitte" style="width:90%; position:absolute; z-index:11; top: 80px; overflow: visible">
<iframe id="i1" name="i1" src="frame_mitte.html" border="0" frameborder="0" height="100%" width="100%" marginwidth="0" marginheight="0" scrolling="No">
</iframe> </div>
<div id="unten" name="unten" style="width:90%; position:absolute; height:80px; z-index:12; bottom: 0px">
<iframe id="i2" name="i2" src="frame_unten.html" border="0" frameborder="0" height="80px" width="100%" marginwidth="0" marginheight="0" scrolling="No">
</iframe>
</div>Funktioniert leider nicht so, wie ich gedacht hab... Oder habe ich was in den Style-Angaben falsch?
Merci - Fraenk
-
-
Hallo,
ein problem ist, dass du px werte mit %ualen werten mischen willst damit kommst du schlecht auf 100% um das fenster aus zu füllen.
Mit komplett %ualen werten geht es schon:
http://css.fractatulum.net/sample/layout14b.htm
mehr oder weniger.
Es ist halt bastelei von der art wie ich sie eher nervig finde.Ansonsten wäre dann noch die position:fixed; sache mit den gängigen würgarounds für den IE.
Oder sowas http://css.fractatulum.net/sample/fixed2.htm
Naja, in der praxis würde ich das alles nicht bedingungslos einsetzen.
Gruss aus Dresden
-
Hi,
Oder sowas http://css.fractatulum.net/sample/fixed2.htm
Genau sowas wollte ich, nur das halt die Höhen der "Kopf-" bzw. "Fußzeile" fix sind...
Scheint wohl was Größeres zu sein ;-)
Viele Grüße
Fraenk
-