nicht angemeldet
Box-height
0 0 0 0 0 Nachtrag
0
Box-height
Hallo!
Ich hab 2 CSS Boxen, die sehen so aus:
#box1 { position:static; top:0px; left:809px; height:60px; z-index:1; }
#box2 { position:absolute; top:158px; left:0px; width:159px; z-index:1; }
Bei der ersten Box setze ich die höhe fest und lasse die breite ausfüllen, je nachdem wieviel platz noch da ist. Funktioniert wunderbar.
Bei der zweiten Box möchte ich das ganze umgekehrt haben. Die Breite festsetzen und die Höhe ausfüllen, soviel halt noch verfügbar ist.
Ich möchte nicht über Tabellen gehen!
Weiß jemand, wie ich die 2. Box dazu bewegen kann die Höhe dynamisch je nach Browsergröße auszufüllen?
Ciao
Johannes
-
Hi Johannes!
#box1 { position:static; top:0px; left:809px; height:60px; z-index:1; }
#box2 { position:absolute; top:158px; left:0px; width:159px; z-index:1; }
Ich verstehe nicht ganz. Bei einer Auflösung von schon 800*600 Pixeln ist deine erste Box um Pixel weiter rechts, als ich sehen kann.
Außerdem erscheint es mir sehr sinnlos, dass du beiden Boxen den z-index auf 1 definierst. Du solltest dich mit dem Sinn von z-index auseinander setzen.Weiß jemand, wie ich die 2. Box dazu bewegen kann die Höhe dynamisch je nach Browsergröße auszufüllen?
Benutze doch mal relative Werte, wie z.B. %. Damit kannst du deine Seite dynamischer gestalten, sodass dein Projekt auch für mehreere Auflösungen realisierbar ist.
Tschüss
Wolfgang--
Manchmal klingen dumme Sprüche schlau, wenn sie von populären Menschen oder einfach nur schlau ausgesprochen werden-
Jaaa, des mit der Auflösung...
Die Seite kann man bei 800px noch betrachten, des mit der box is einfach nur eine "dummy"-box, die nach rechts bei größeren auflösungen einfach nen hintergrund weiter darstellt. Davon hab ich mehrere untereinander.Mit %-Angaben komm ich nur beim Mozilla weiter. Der IE6.0 kann des net interpretieren aus irgendwelchen gründen. Weiß jemand wie man dies umgehen kann? Hier wird hauptsächlich der IE eingesetzt, weswegen ich keinen anderen Browser hernehmen kann!
Ciao
Johannes-
Servus!
Sag doch bitte mal deine URI, damit wir ein besseres Gefühl von deinem Problem bekommen.
Tschüss
Wolfgang--
Manchmal klingen dumme Sprüche schlau, wenn sie von populären Menschen oder einfach nur schlau ausgesprochen werden-
Sag doch bitte mal deine URI, damit wir ein besseres Gefühl von deinem Problem bekommen.
Geht net.., is ein interner Server, der nicht zum Internet kann. Ich kann des auch nicht auf irgendnen anderen webserver hochladen wg. datenschutz etc.
-
hi,
Ich kann des auch nicht auf irgendnen anderen webserver hochladen wg. datenschutz etc.
textinhalte kannst du rauslöschen und durch blindtext ersetzen, und <html>-tags unterliegen m.W. nicht dem datenschutz ...
gruss,
wahsaga
-
-
-
-
-
Tach
#box2 { position:absolute; top:158px; left:0px; width:159px; z-index:1; }
Die Breite festsetzen und die Höhe ausfüllen, soviel halt noch verfügbar ist.
Also nur um der Klarheit willen ... die Box soll 158 px Abstand vom oberen Rand haben und unabhängig von der Fenstergröße den Rest des Browserfensters bis zum "Boden" ausfüllen.
Habe ich das richtig verstanden?Thomas J.
-
Also nur um der Klarheit willen ... die Box soll 158 px Abstand vom oberen Rand haben und unabhängig von der Fenstergröße den Rest des Browserfensters bis zum "Boden" ausfüllen.
Habe ich das richtig verstanden?Vollkommen richtig!
-
Na gut, nichts einfach als das[1].
<div style="position:absolute; left:0; top:158px; bottom:0; width: ...; usw.">inhalt</div>.[1] Außer, das soll auch im IE funktionieren.
In den Versionen bis 5.5 klappt das definitiv nicht, weil die die Angaben für bottom ignorieren. Was der IE 6 daraus macht, weiß ich nicht. Ich habe im Moment keinen IE zur Hand.Soll das auch im IE funktionieren, kommst Du um ein paar Klimmzüge wahrscheinlich nicht herum. So z.B.:
html, body {width:100%; height:100%, margin:0; padding:0}
#box2 {position:absolute; left:0; top:0; height:100%}
blinddiv {height:158px; width:100%; margin:0; padding:0}nebst
<div id="box1">
<div id="blinddiv"></div>
Restlicher Inhalt
</div>Das ganze müßte dann so aussehen:
+-------------------+
|+-----------------+|
|| Damit wird der ||
|| Inhalt um 158px ||
|| nach unten ||
|| verschoben ||
|+-----------------+|
| Restlicher Inhalt |
| |
. .
. .
. .
| |
+-------------------+Die Konstruktion ist sicher nicht besonders elegant und außerdem mit der heißen Nadel gestrickt, sollt aber auch im IE ihren Dienst tun.
Thomas J.
-
*grrrrr*
#box2 {position:absolute; left:0; top:0; height:100%}
Sollte "box1" heißen.
blinddiv {height:158px; width:100%; margin:0; padding:0}
Und hier fehlt ein #.
Wieso merkt das eigentlich die Rechtschreibkorrektur nicht? ;-)
Thomas J.
-
Danke!
Der Mozilla schluckt das und stellt alles richtig dar. Der IE mag vermutlich die %-Angaben nicht. Geb ich da feste werte ein macht ers, aber das ist ja nicht sinn der sache, weil ich ja ein browser fenster größer und kleiner machen kann.
IE6.0 kanns net..
IE5.5 kanns!Ich lass das jetzt einfach so. Solange M$ Nix gscheits mit der CSS-implentierung fertig bringt, schauen die seiten halt scheiße aus, mir auch egal jetzt.
Vielen Dank nochmal für die detaillierte Hilfe!
-
-
-