nicht angemeldet
Browserprobleme mit CSS-Layout
Hallo,
habe gestern schon einmal hier gepostet. Meiner Meinung nach ist es fast unmöglich mein CSS-Layout auf alle Browser anzupassen.
Das Grundlayout soll ungefähr so aussehen:
########## Zierbalken h=5 % vom Browserfenster (BF)########
########## ######
########## ######
########## ######
########## Inhalt ######
Menu ## h=100% Banner
#w=160px## w=550px w=50px
#h=100% ## ######
########## ######
########## ######
#################### Zierbalken h=8 % vom BF ##############
Dies wollte ich mit 7 divs lösen:
1. div = Hintergrundgrafik und etwas breiter als oben abgebildet (man soll die Grafik nur am Rand sehen), horizontal und vertikal zentriert im BF
2. div = div-Container (geschachtelt in 1. div)
3. div = top-div, blau (geschachtelt in 2. div)
4. div = menu-div, blau (geschachtelt in 2. div)
5. div = inhalts-div, weiß, muss scrollfähig, da Inhalt oft größer als BF (geschachtelt in 2. div)
6. div = banner-div, blau mit Bannergrafik (geschachtelt in 2. div)
7. div = bottom-div, blau mit noch einem kleinen Link (geschachtelt in 2. div)
Kann ich dieses Layout überhaupt mit CSS umsetzen? Wenn ja, wie? ;-) Meines Wissens scheitert es schon daran, dass Opera 6.x keine scrollbaren divs zulässt.
Bin für alle Tipps dankbar.
MfG,
Bewerber
-
Hallo ,
########## Zierbalken h=5 % vom Browserfenster (BF)########
########## ######
########## ######
########## ######
########## Inhalt ######Menu ## h=100% Banner
#w=160px## w=550px w=50px
#h=100% ## ######
########## ######
########## ######
#################### Zierbalken h=8 % vom BF ##############Warum willst du denn ein div scrollen? lass doch das Fenster einfach scrollen. Wenn der Zierbalken nicht zu sehen ist, macht es doch nichts. Lass einfach dass menü sich über 100% ausbreiten, und den Banner. Also zumindest die hintergrundfarbe.
Jeena Paradies
--
Ihr wisst ja nichts ist besser als Bass.-
Hallo,
Warum willst du denn ein div scrollen? lass doch das Fenster einfach scrollen. Wenn der Zierbalken nicht zu sehen ist, macht es doch nichts. Lass einfach dass menü sich über 100% ausbreiten, und den Banner. Also zumindest die hintergrundfarbe.
Die divs von top, menu, banner und bottom sollen aber beim Scrollen stehen bleiben. Früher hätte man dazu 6 oder 5 Frames verwendet, aber die Site soll schon etwas moderner sein. Es muss doch irgendeinen Weg geben, wie ich das beschriebene Layout ohne Frames realisieren kann? Und zwar so, dass es in möglichst vielen Browsern funktioniert.
MfG,
Bewerber-
Hallo ,
Die divs von top, menu, banner und bottom sollen aber beim Scrollen stehen bleiben. Früher hätte man dazu 6 oder 5 Frames verwendet, aber die Site soll schon etwas moderner sein.
Dafür gibt es ja positoni: fixed; was aber im IE nicht funktioniert. Waru sollen sie eigentlich stehen bleiben? Die modernen Seiten, die ich kenne scrollen alle mit. Findest du es schlimm, wenn die mitscrollen?
Jeena Paradies
--
Ihr wisst ja nichts ist besser als Bass. -
Hallo,
Die divs von top, menu, banner und bottom sollen aber beim Scrollen stehen bleiben. Früher hätte man dazu 6 oder 5 Frames verwendet, aber die Site soll schon etwas moderner sein. Es muss doch irgendeinen Weg geben, wie ich das beschriebene Layout ohne Frames realisieren kann? Und zwar so, dass es in möglichst vielen Browsern funktioniert.
eigentlich positoni:fixed;, wie schon von Jeena geposted, bzw. wegen der IE 5-6 overflow:auto in Verbindung mit Grössenangaben, um für ein Div scrollbars zu erhalten. Für IE4 und wichtiger Netscape 4 gibt es per dhtml die Möglichkeit divs zu scrollen, z.B. http://www.lipfert-malik.de/webdesign/tutorial/bsp/overflowauto.html , da würde ich aber eher (nur) für Netscape 4 dynamisch ein Frameset per JavaScript, wenn du dich da schon etwas auskennst, erstellen oder einfach die ganze Seite (bei vernünftigem Layout) scrollen lassen. Falls du aber jedes Risiko vermeiden willst, doch ein Frameset, oder anderes Layout.
Grüsse
Cyx23
-
-
-
Hallo Mitbewerber,
bastel grade an einem beinah identischem Design (hmpf, scheint ja doch nich so kreativ zu sein).
Wenn ja, wie? ;-) Meines Wissens scheitert es schon daran, dass Opera 6.x keine scrollbaren divs zulässt.
Also, was ich nich verstehe is das mit dem scrollbaren div (der rest sollte doch problemlos umsetzbar sein, oder wo sind deine Probleme?). Ich hab das doch schon richtig verstanden, dass der div, der in einem fixen Container eingeschlossen ist, sich nicht über einen gewöhnlichen Browser-Scrollbalken verschieben lässt, oder? Falls ich doch was übersehen haben sollte klärt mich bitte auf.
Ansonsten könnte ich dir ne Lösung mittels JavaScript anbieten.
Über
document.getElementById("zB_content").style.top;
kannst du ja die Postion des divs in der höhe varieren. Bau dir doch ne Funktion, die dir die aktuelle Position ausließt und um einen bestimmten Betrag einfach nach oben oder unten verrückt. Würde aber auf jeden Fall mit nem Vergleich von
document.getElementById("zB_content").offsetHeight und der aktuellen Position vorher ne Abfrage machen, dass dir der div nicht ins unendliche rutschen kann.Die Funktion baust du dann in setInterval() ein, und rufts das ganze im Fall des scrollens mit einem Event-Handler auf (clearInterval() nicht vergessen).
Vielleicht wars ja was du gesucht hast, ach übrigens, habs ausprobiert und haben alle Browser mitgemacht (zumindest die aktuellen).
Im Übrigen, wenn man schon auf Frames verzichtet (was ja offensichtlich im Trend ist), finde ich es durchaus legitim sowas zumindest für die, die JavaScript zulassen auch anzubieten. Ich findes vom Design her schon schön wenn man die Seite mit unbeweglichen "Rahmeninhalten" betrachten kann. Und wers dennoch ohne Javascript schauen will kann den div mit der Maus trotzdem ziehen. Das sollte den html-Puristen dann auch nicht mehr stören.
grüße i.
-
Hi,
Das Grundlayout soll ungefähr so aussehen:
########## Zierbalken h=5 % vom Browserfenster (BF)########
Menu ## h=100% Banner
#################### Zierbalken h=8 % vom BF ##############
Willst Du wirklich 113% Höhe haben?
cu,
Andreas--
Der Optimist: Das Glas ist halbvoll. - Der Pessimist: Das Glas ist halbleer. - Der Ingenieur: Das Glas ist doppelt so groß wie nötig.
http://mud-guard.de/? http://www.andreas-waechter.de/ http://www.helpers.de/-
Hi,
Das Grundlayout soll ungefähr so aussehen:
########## Zierbalken h=5 % vom Browserfenster (BF)########
Menu ## h=100% Banner
#################### Zierbalken h=8 % vom BF ##############
Willst Du wirklich 113% Höhe haben?
cu,
AndreasSorry, müssten natürlich 87% sein. Die Probleme bleiben trotzdem. :-(
Übrigens möchte ich Javascript eigentlich nicht verwenden.MfG,
Bewerber
-
-
Moin!
habe gestern schon einmal hier gepostet. Meiner Meinung nach ist es fast unmöglich mein CSS-Layout auf alle Browser anzupassen.
Dein Layout ist schon grundsätzlich unmöglich, würde ich sagen.
Es ist nun mal ein Naturgesetz, dass eine HTML-Seite oben links anfängt und je nach Inhalt sich nach rechts und vor allem nach unten beliebig lang ausdehnt (in arabischen Browsern fängt sie oben rechts an und geht nach links).
Dein Layout leugnet diese Eigenschaft und versucht, als unteren Seitenabschluß einen Balken im sichtbaren Bereich festzuzementieren, der dort aufgrund der Natur der HTML-Seite gar nicht hingehören kann.
Innovatives Design mag ja nicht verkehrt sein, aber auf diese Art von Innovation kann man auch gern verzichten - IMO. Insbesondere im Hinblick auf die Browser, die das darstellen sollen.
- Sven Rautenberg
--
ss:) zu:) ls:[ fo:} de:] va:) ch:] sh:) n4:# rl:| br:< js:| ie:( fl:( mo:| -
Hallo,
man kann mit etwas Aufwand und CSS Elemente auf einer Seite fixieren. Sogenannte CSS Frames.
Das funktioniert mit position: fixed und etwas Hirnschmalz.
http://www.fabrice-pascal.de/artikel/posfixedie6/
http://css-technik.de/details/146/9/CSS-Snippets.htm
Mit google findet man sicher auch noch einiges.
Es funktioniert, aber einen abschließenden Balken damit zu realisieren halte nicht für sinnvoll, aber ich kann mich natürlich täuschen.
Sinnvoller wäre vielleicht eine Hintergrundbild, das immer am Ende der Seite angezeigt wird.
z.b.
body {
background: url(datei.gif) no-repeat bottom left;
}HTH
Werner
-
Hallo.
########## Zierbalken h=5 % vom Browserfenster (BF)########
########## ######
########## ######
########## ######
########## Inhalt ######Menu ## h=100% Banner
#w=160px## w=550px w=50px
#h=100% ## ######
########## ######
########## ######
#################### Zierbalken h=8 % vom BF ##############Kann es eine klassischere Anwendung für <iframe> geben?
MfG, at