nicht angemeldet
oder (CSS) ein layoutproblem
0 0 0 0 Nachtrag
0 0
oder (CSS) ein layoutproblem
hallo forum.
ich habe mal folgendes layout ausprobiert.
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+
| |
| Block: 100% - 200px hoch |
| (rest) |
| 100% breit |
| |
| |
| |
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+
will heissen. oben und unten soll es einen fixen rand haben (jeweils 100px). der mittlere bereich sollte sich dynamisch der fenstergrösse anpassen.
also minimal: 100% fensterhöhe - 200px
maximal: egal... je höher desto mehr content. sprich er soll sich dem content anpassen.
ich habe folgendes ausprobiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin : 0px;
padding : 0px;
background-color : #000;
color : #F00;
}
</style>
</head>
<body>
<div style="height:100px;background-color:#FFF;">test</div>
<div style="height:auto;">test</div>
<div style="height:100px;background-color:#FFF;">test</div>
</body>
</html>
leider wird so der gewünschte effekt weder im ie, opero oder mozilla erziehlt.
für hilfe zu diesem beispiel oder workarounds wäre ich sehr froh.
danke und...
grüsse
siramon, ja der aus der schweiz
-
hallo forum.
ich habe mal folgendes layout ausprobiert.
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+
| |
| Block: 100% - 200px hoch |
| (rest) |
| 100% breit |
| |
| |
| |
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+will heissen. oben und unten soll es einen fixen rand haben (jeweils 100px). der mittlere bereich sollte sich dynamisch der fenstergrösse anpassen.
also minimal: 100% fensterhöhe - 200px
maximal: egal... je höher desto mehr content. sprich er soll sich dem content anpassen.ich habe folgendes ausprobiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin : 0px;
padding : 0px;
background-color : #000;
color : #F00;
}
</style>
</head>
<body>
<div style="height:100px;background-color:#FFF;">test</div>
<div style="height:auto;">test</div>
<div style="height:100px;background-color:#FFF;">test</div>
</body>
</html>leider wird so der gewünschte effekt weder im ie, opero oder mozilla erziehlt.
für hilfe zu diesem beispiel oder workarounds wäre ich sehr froh.
danke und...
grüssesiramon, ja der aus der schweiz
würde vorschlagen das mit tables zu machen:
<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td height=100>
.....
</td>
</tr>
<tr>
<td height=100%>
... hauptfenster ...
</td>
</tr>
<tr>
<td height=100>
...
</td>
</tr>
</table>-
Moin!
würde vorschlagen das mit tables zu machen:
Zwei Dinge dazu:
1. Der Witz der Anfrage war ja gerade, es mit CSS und Layern zu machen, und NICHT mit Tabellen
2. Tabellen haben kein gültiges Attribut "height", dein Versuch ist also kein gültiges HTML. Daß es dennoch in einigen Browsern funktioniert, ist Pech. In den neuen Browsern funktioniert es nur noch, wenn sie in den "Quirks"-Modus schalten, um die alten Fehler zu wiederholen. Damit wird aber irgendwann Schluß sein.
- Sven Rautenberg
-
Moin!
würde vorschlagen das mit tables zu machen:
Zwei Dinge dazu:
- Der Witz der Anfrage war ja gerade, es mit CSS und Layern zu machen, und NICHT mit Tabellen
- Tabellen haben kein gültiges Attribut "height", dein Versuch ist also kein gültiges HTML. Daß es dennoch in einigen Browsern funktioniert, ist Pech. In den neuen Browsern funktioniert es nur noch, wenn sie in den "Quirks"-Modus schalten, um die alten Fehler zu wiederholen. Damit wird aber irgendwann Schluß sein.
- Sven Rautenberg
für mich liegt der fehler eben auch darin kein gültiges height attribut zuzulassen.
mal abesehen davon wenn es einen - und eben nur einen standard geben würde, dann würde etwas überall oder nirgends funktionieren.
ich habe wirklich keine lust mich mit den streitereien der ISO, microsoft, netscape etc. zu beschäftigen.wenn ich irgendeine programmiersprache spezifiziere, dann kann es ja auch nicht sein das das beim einen compiler funktioniert und beim anderen nicht.
ich lerne auch immer dazu. in so einem fall halt nur weil sich keiner auf etwas einigen will.
lois
-
hallo lois, hallo swen
Zwei Dinge dazu:
- Der Witz der Anfrage war ja gerade, es mit CSS und Layern zu machen, und NICHT mit Tabellen
mit tabellen wäre ok, aber es muss valid sein.
sprich ich kann die zeilenhöhe auch mit css definieren.
hat aber leider auch ned funktioniert.- Tabellen haben kein gültiges Attribut "height", dein Versuch ist also kein gültiges HTML. Daß es dennoch in einigen Browsern funktioniert, ist Pech. In den neuen Browsern funktioniert es nur noch, wenn sie in den "Quirks"-Modus schalten, um die alten Fehler zu wiederholen. Damit wird aber irgendwann Schluß sein.
s.o.
für mich liegt der fehler eben auch darin kein gültiges height attribut zuzulassen.
mal abesehen davon wenn es einen - und eben nur einen standard geben würde, dann würde etwas überall oder nirgends funktionieren.
ich habe wirklich keine lust mich mit den streitereien der ISO, microsoft, netscape etc. zu beschäftigen.ein standard ist gut er sollte befolgt werden.
was passiert, wenn er nicht befolgt wird, siehst du bei der 4. generation browser stichwort dhtml.ich möchte hier aber keinen neuen standard-thread eröffnen. das wurde hier im forum schon zur genüge diskutiert!
grüsse
siramon, ja der aus der schweiz
-
-
-
hallo forum.
ich habe mal folgendes layout ausprobiert.
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+
| |
| Block: 100% - 200px hoch |
| (rest) |
| 100% breit |
| |
| |
| |
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+will heissen. oben und unten soll es einen fixen rand haben (jeweils 100px). der mittlere bereich sollte sich dynamisch der fenstergrösse anpassen.
also minimal: 100% fensterhöhe - 200px
maximal: egal... je höher desto mehr content. sprich er soll sich dem content anpassen.ich habe folgendes ausprobiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin : 0px;
padding : 0px;
background-color : #000;
color : #F00;
}
</style>
</head>
<body>
<div style="height:100px;background-color:#FFF;">test</div>
<div style="height:auto;">test</div>
<div style="height:100px;background-color:#FFF;">test</div>
</body>
</html>leider wird so der gewünschte effekt weder im ie, opero oder mozilla erziehlt.
für hilfe zu diesem beispiel oder workarounds wäre ich sehr froh.
danke und...
grüssesiramon, ja der aus der schweiz
wenn du willst , das das auch unabhängig von dem inhalt geht, dan brauchts noch table height="100%" width="100%" ( wollt ich nur noch hinzufügen)
<table height="100%" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="100">
.....
</td>
</tr>
<tr>
<td height="100%">
... hauptfenster ...
</td>
</tr>
<tr>
<td height="100">
...
</td>
</tr>
</table>lois
-
Tag auch
ich habe mal folgendes layout ausprobiert.
.
.
.<div style="height:100px;background-color:#FFF;">test</div>
<div style="height:auto;">test</div>
<div style="height:100px;background-color:#FFF;">test</div>Ich würde mich ja auch gern eines besseren belehren lassen, bin mir aber relativ sicher, daß das mit HTML und CSS nicht geht.
Kein Problem ist natürlich folgendes:
<div style="height:10%;background-color:#FFFFFF;">test</div>
<div style="height:80%;">test</div>
<div style="height:10%;background-color:#FFFFFF;">test</div>Aber mit festen Größen oben und unten brauchts wohl Javascript, um die Höhe des Browserfensters auszulesen.
Noch nicht einmal diese (unfaire) Lösung klappt:
<div style="height:100%; border: #FFFFFF solid; border-width: 100px 0px">test</div>Thomas J.
-
Da war ich wohl etwas zu voreilig.
Noch nicht einmal diese (unfaire) Lösung klappt:
<div style="height:100%; border: #FFFFFF solid; border-width: 100px 0px">test</div>Diese schon:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin:0px;
padding:100px 0px;
background-color:#FFFFFF;
color:#FF0000;
}
</style>
</head>
<body>
<div style="width:100%;height:100%;background-color:#000000;">test</div>
</body>
</html>Aber ob das jetzt Sinn und Zweck der Übung war?
Thomas J.
-
hallo thomas
Diese schon:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin:0px;
padding:100px 0px;
background-color:#FFFFFF;
color:#FF0000;
}
</style>
</head>
<body>
<div style="width:100%;height:100%;background-color:#000000;">test</div>
</body>
</html>Aber ob das jetzt Sinn und Zweck der Übung war?
äh, sieht gut aus ;-)
aber ich sollte die 3 element schon mit inhalt ausfüllen könne ;-)aber swen's ansatz gefällt mir sehr gut...
werde da ein bisschen herumprobieren und mich montag nochmals melden.schönes weekend euch allen
grüsse
siramon, ja der aus der schweiz
-
Moin!
äh, sieht gut aus ;-)
aber ich sollte die 3 element schon mit inhalt ausfüllen könne ;-)Wo ist das Problem?
<div style="height:100%; background-color:#000000; width:100%">
<div style="height:100px; background-color:#00ff00;
width:100%; margin-top:-100px;">
Inhalt oben
</div>
Inhalt Mitte
</div>Unten müßte das anlog funktionieren.
Thomas J.
-
Schon wieder zu schnell.
<div style="height:100%; background-color:#000000; width:100%">
<div style="height:100px; background-color:#00ff00;
width:100%; margin-top:-100px;">Opera will hier unbedingt noch ein padding-top:1px
Inhalt oben
</div>
Inhalt Mitte
</div>Thomas J.
-
-
-
-
-
hallo forum.
ich habe mal folgendes layout ausprobiert.
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+
| |
| Block: 100% - 200px hoch |
| (rest) |
| 100% breit |
| |
| |
| |
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+will heissen. oben und unten soll es einen fixen rand haben (jeweils 100px). der mittlere bereich sollte sich dynamisch der fenstergrösse anpassen.
also minimal: 100% fensterhöhe - 200px
maximal: egal... je höher desto mehr content. sprich er soll sich dem content anpassen.Habe ich das jetzt richtig verstanden: Der Content in der Mitte änder sich (wie eigentlich bei jeder Seite) in seiner Menge, du willst aber den unteren Block und den oberen Block jeweils am Bildschirmrand haben? Also annähernd ein Frames-Aussehen?
Oder reicht es dir, wenn das Aussehen nur bei hinreichend kurzem Content erreicht wird, bei längeren Seiten der untere Block aber nach unten auswandert?
Ich würde mal sagen:
<body style="height:100%;">
<div style="position:absolute; top:0px; left:0px; width:100%; height:100%; background:red;">
<div style="position:absolute; top:0px; left:0px; width:100%; height:100px; background:green;"> Block 1 </div>
<div style="position:absolute; top:100px; left:0px; width:100%; background:blue;">Block 2</div>
<div style="position:absolute; bottom:0px; left:0px; width:100%; height:100px; background:yellow;"> Block 3 </div>
</div>Opera macht das. Bleibt nur der kleine Nachteil, daß man einen kurzen Weg scrollen kann, und daß der Content nicht über die untere Box hinauslaufen darf, sonst steht diese im Weg.
Die Farben sind nur, um die Boxgröße zu verdeutlichen.
Ansonsten möchtest du vielleicht mit "position:fixed" experimentieren (und Microsoft und den IE 6 verfluchen, des das immer noch nicht kann).
- Sven Rautenberg
-
re forum.
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+
| |
| Block: 100% - 200px hoch |
| (rest) |
| 100% breit |
| |
| |
| |
+------------------------------+
| |
| Block: 100px hoch |
| 100% breit |
| |
+------------------------------+der obere block funktioniert hervorragend.
der unter bereitet mir schon mehr kopfzerbrechen.bei deiner variante sven, bleibt der untere block am unteren bildschirmrand kleben. eigentlich sollte er unten am mittleren block stehen.
stehen im mittleren block z.b. zwei bildschirmseiten text, bleibt der untere block am unteren bildschirmrand (ungescrollt) anstatt dass er sich unten an den text begeben würde (*schwachsinniges deutsch*)ich habe mal folgendes probiert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
body {
margin:0px;
padding:0px;
background-color:#FFFFFF;
color:#FF0000;
}
</style>
</head>
<body style="height:auto;">
<div style="height:3000px;padding-bottom:100px;background-color:red;">
<div style="position:absolute;bottom:0px;left:0px;height:100px;width:100%;background-color:yellow;"></div>
</div>
</body>
</html>zu erwarten wäre hier meiner meinung nach 2900px rote fläche und danach 100px gelbe fläche.
das kann aber nur opera (getestet 6.0).
ie 5.x und mozilla 0.9.8 pappen den gelben bereich unten an den bildschirmrand.geb ich dem äusseren div eine höhe von 100% wird wohl der gewünschte effekt erzielt, dass sich der content über den ganzen bildschirm zieht, der untere block bleibt aber dann natürlich auch am bildschirmrand auch wenn mehr content im äusseren div steht.
heigt:auto im äusseren div bringt auch nix, dann machts sogar opera falsch wenn der content zu lang wird.
oder interpretier ich position:absolute falsch?
<cite source="selfhtml 8.0">absolute = absolute Positionierung, gemessen am Rand des Elternelements. Scrollt mit.</cite>
das eltern element ist das äussere div... da sollte doch das innere div immer von dessem unteren rand 100px nach oben gehen.
also ich versteh nur noch bahnhof.
für klärende worte wär ich dankbar ;-)
grüsse
siramon, ja der aus der schweiz