Wuppi: Layergröße variable? scrollen auch mit opera?

SELF-Forum

Layergröße variable? scrollen auch mit opera?

Wuppi
– Informationen zu den Bewertungsregeln

Hi

nachdem ich von meinem Tabellendesign dank Opera weg bin, hab ichs mit CSS probiert. Wow, klappte sogar ganz gut ... aber ne kleinigkeit stimmt noch net:

http://www.platzeck.net/TEMP/statequarters/ - und dann "Die Münzen"

Wie man sieht hab ich hier auf der rechten seite nen grauen layer gesetzt. Hab den mit breite und höhe von je etwa 85% gewählt (wollte das möglichst ausfüllend - andere möglichkeit net gefunden; siehe auch unten). Soweit ich mich im Bildschirm aufhalte, klappt das auch, aber wenn der inhalt länger ist (siehe "Die Münze"), bekomm ich es nicht hin das Opera das grau automatisch vergrößert. Der IE macht das; jetzt hab ich in selfhtml;) das overflow attribut gefunden ... habs auf auto gesetzt, im ie jetzt nen rechten scrollbalken - sieht net so schlimm aus (DEN scrollbalken kann man auch via css einfärben? oder nur den ganz rechten?), aber bei Opera wird einfach nach ende des grauen abgeschnitten. Wie kann ich das umgehen?

Eine möglichkeit wäre, wieder teilweise auf Tabellendesign zu schwenken:
Statt des großen grauen Layers mach ich ne Tabelle (1x1, grauer Hintergrund, kein rahmen usw.) die einfach 85% breit ist ... ausrichten x px vom linken rand sollte ja kein problem sein. Aber hab so die befürchtung das manche browser hier wieder ihr eigenes Tabellending abziehen - und bei jedem browser die page anders ausschaut (wie ichs ja schon hatte, deswegen wollte ich davon weg)

Lieber wäre mir halt nen weg bei CSS und dem layer zu bleiben.

Dann noch ne Frage:
Geht das irgendwie das ich nen Layer 20px vom linken rand setze, 20px vom rechten rand ... widht fällt daher also weg ... habs so probiert, mit dem erfolg nen winzigen layer gehabt zu haben ;).
Gleiches auch in der höhe ... immer 20px von oben und 20px von unten ...

Thx schon mal für die Hilfe ;)
Bis dann
Wuppi

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Layergröße variable? scrollen auch mit opera?

    stefan Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi Wuppi,

    "Das ist ja ein ganzer Mund voll fragen"
    (Troy MacLure ~ Schauspieler)
    <img src="http://www.simpsonslibrary.com/troy.jpg" border=0 alt="">

    nachdem ich von meinem Tabellendesign dank Opera weg bin, hab ichs mit CSS probiert. Wow, klappte sogar ganz gut ... aber ne kleinigkeit stimmt noch net:

    http://www.platzeck.net/TEMP/statequarters/ - und dann "Die Münzen"

    also bei mir (netscape 7 - windows 2000) verändert sich garnix.

    Wie man sieht hab ich hier auf der rechten seite nen grauen layer gesetzt. Hab den mit breite und höhe von je etwa 85% gewählt (wollte das möglichst ausfüllend - andere möglichkeit net gefunden; siehe auch unten). Soweit ich mich im Bildschirm aufhalte, klappt das auch, aber wenn der inhalt länger ist (siehe "Die Münze"), bekomm ich es nicht hin das Opera das grau automatisch vergrößert. Der IE macht das; jetzt hab ich in selfhtml;) das overflow attribut gefunden ... habs auf auto gesetzt, im ie jetzt nen rechten scrollbalken - sieht net so schlimm aus (DEN scrollbalken kann man auch via css einfärben? oder nur den ganz rechten?), aber bei Opera wird einfach nach ende des grauen abgeschnitten. Wie kann ich das umgehen?

    opera kann zuzeit noch kein overflow, ärgerlich, aber wahr. was du machen kannst ist folgendes:

    1. das scrollen weglassen

    2. nen iframe benutzen

    3. den layer ohne rahmen und hintergrundfarbe darstellen, dann können Nescape 6, IE 5 und konsorten das overflow:auto darstellen, und beim opera fällts nicht auf, dass die schrift über den rand hinausschiesst. hab ich aber noch nicht ausprobiert.
      du könntest sogar noch weiter gehen:
      ich schreib mal ein bisschen code:

    <div id="layer1" style="...rahmen und hintergrund...,padding:0px;width:200px;height:auto">  
<div id="layer2" style="border:none;background:none;width:200px;height:150px;overflow:auto">  
  
...ganz viel inhalt...  
  
</div>  
</div>

    zur erklärung: layer2 ist dein eigentlicher layer: er wird bei NS und IE mit einer höhe von 150px und (falls nötig) mit rollbalken dargestellt. bei Opera sieht man ihn garnicht, der text schiesst über den rand hinaus (siehe oben).
    layer1 ist dein "Schmuck-layer", er gibt dem ganzen bei bedarf eine hintergrundfarbe (oder ein bild) und einen rahmen. bei NS und IE legt er sich direkt um layer2, so dass es so aussieht als wäre sein rahmen der von layer2. beim Opera "dehnt" sich layer1 aus, da er keine fenste höhenangabe hat. somit hat die konstrution auch in Opera (bei bedarf) hintergrund und rahmen. aber, wie gesagt: ist noch nicht getestet, war nur so ne idee, experimentier mal mit rum (und meld dich falls es klappt :)

    1. hier http://forum.de.selfhtml.org/archiv/2002/5/12990/#m72401 gibts 'ne möglichkeit Opera völlig vom CSS auszuschliessen. ich hab damit in verbindung mit mehreren Stylesheets rumexperimentiert und resigniert aufgegeben. fazit: nicht sehr empfehlenswert (find ich :).

    2. auf den neuen Opera warten ;)

    Dann noch ne Frage:
    Geht das irgendwie das ich nen Layer 20px vom linken rand setze, 20px vom rechten rand ... widht fällt daher also weg ... habs so probiert, mit dem erfolg nen winzigen layer gehabt zu haben ;).
    Gleiches auch in der höhe ... immer 20px von oben und 20px von unten ...

    die breite geht einfach mit <body style="margin:20px;padding:0px">, wobei das padding dafür da ist, dass auch der IE es rafft. für die höhe wüsst ich jetzt nix, ich glaub' du willst doch eher nen iframe, oder ;)

    erzähl was (nicht) geklappt hat,
    tschÖ
    *stefan

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Layergröße variable? scrollen auch mit opera?

      Wuppi
      – Informationen zu den Bewertungsregeln

      also bei mir (netscape 7 - windows 2000) verändert sich garnix.

      Gut ;)

      opera kann zuzeit noch kein overflow, ärgerlich, aber wahr. was du machen kannst ist folgendes:

      1. das scrollen weglassen

      aufs scrollen im layer könnt ich ja verzichten, dann halt ganze fenster scrollen ... aber selbst damit hat opera probleme

      1. nen iframe benutzen

      mhhh derzeit hab ich nen grauen layer, dadrin ne graue 1x1 Tabelle dadrin der inhalt - die tabelle dehnt sich aus - so hab ich immer alles grau ... mit iframe könnte ich das mal probieren ...

      1. den layer ohne rahmen und hintergrundfarbe darstellen, dann können Nescape 6, IE 5 und konsorten das overflow:auto darstellen, und beim opera fällts nicht auf, dass die schrift über den rand hinausschiesst. hab ich aber noch nicht ausprobiert.

      Naja alles was in diesem layer ist soll ja hintergrund grau (ist nur testfarbe! also net wundern über dne komischen farbgeschmack *G*) und alles was da drin ist ebenfalls grau ... bei deiner variante hätte ich keinen hintergrund mehr - daher hab ich ERSTMAL mit tabelle gearbeitet (damit ich auch mal wieder nen erfolgserlebnis in sachen webdesign hab *g*)

      du könntest sogar noch weiter gehen:
      ich schreib mal ein bisschen code:

      <div id="layer1" style="...rahmen und hintergrund...,padding:0px;width:200px;height:auto">  
<div id="layer2" style="border:none;background:none;width:200px;height:150px;overflow:auto">

      Hier hackts bei mir ... du hast position vergessen festzulegen, der layer wird bei pos 1:1 gesetzt - hab also pos, top, left gesetzt ...
      aber der Text wird bei opera immer noch aus dem layer rausgeschrieben ... und ie macht scrollies

      so siehts aus:
      <div id="con" style="position:absolute; background-color: #159855; top:160px; left: 600px; layer-background-color: #999999;

      border: 1px none #000000;padding:0px;width:200px;height:auto;overflow:auto">
      <div id="content" style="border:none;background:none; width:200px;height:150px;overflow:auto">

      bl21fvgs abla² </div></div>

      ...ganz viel inhalt...

      jo

      zur erklärung: layer2 ist dein eigentlicher layer: er wird bei NS und IE mit einer höhe von 150px und (falls nötig) mit rollbalken dargestellt. bei Opera sieht man ihn garnicht, der text schiesst über den rand hinaus (siehe oben).
      layer1 ist dein "Schmuck-layer", er gibt dem ganzen bei bedarf eine hintergrundfarbe (oder ein bild) und einen rahmen. bei NS und IE legt er sich direkt um layer2, so dass es so aussieht als wäre sein rahmen der von layer2. beim Opera "dehnt" sich layer1 aus, da er keine fenste höhenangabe hat. somit hat die konstrution auch in Opera (bei bedarf) hintergrund und rahmen. aber, wie gesagt: ist noch nicht getestet, war nur so ne idee, experimentier mal mit rum (und meld dich falls es klappt :)

      1. auf den neuen Opera warten ;)

      Damit kann ICH leben ;) aber die 0,5% Opera-User net ;)
      Der großteil der User die so seiten besucht hat IE, dann Mozilla und Netscape - dann Opera (hab nen größeres Forum dazu und noch ne andere Seite aus dem Thema - bei mit stats - daher weiß ich das) ... nur kann ich mozilla und netscape net testen, daher will ich mit opera nen ZUFRIEDENSTELLENDES ergebniss erzielen (muß net perfekt sein wie bei ie, hauptsache anschaubar) mit der hoffnung das die anderen beiden Browser MINDESTENS nachziehen werden ;)

      Ne 100% optimierte Seite für alle Browser wirds wohl nie geben - ohne sehr viel Aufwand - und ob das 1 User/Tag wert ist? ;) ... aber trotzdem versuch ich mal mein bestes zu geben ;)

      Dann noch ne Frage:
      Geht das irgendwie das ich nen Layer 20px vom linken rand setze, 20px vom rechten rand ... widht fällt daher also weg ... habs so probiert, mit dem erfolg nen winzigen layer gehabt zu haben ;).
      Gleiches auch in der höhe ... immer 20px von oben und 20px von unten ...

      die breite geht einfach mit <body style="margin:20px;padding:0px">, wobei das padding dafür da ist, dass auch der IE es rafft. für die höhe wüsst ich jetzt nix, ich glaub' du willst doch eher nen iframe, oder ;)

      Mhhh ... ie rafft das gerade net ;) opera machts 20px versetzt... aber ich meinte net die ganze Seite sondern nur eines der layer. Und zwar das große graue ... möchte das es im STANDARD von linken 140px ist und von rechten 20px. Von unten 20px und von oben 80px ... sorry, meine ersten zahlen waren nen bissel verwirrend und sahen nach "zentrieren" der Seite aus ...

      Ich schau noch mal mit iframe ... mit iframe schonmal gearbeitet, aber bisher nur mit ner src-datei - gehts auch wie ichs bisher gemacht hab? einfach reinschreiben? ...

      Puhh warum hab ich bloß opera installiert - hätte ichs net, hät ich einfach drauf los geschrieben - säh im IE gut aus, HTML wäre valide - alles andere wäre net mein problem ... aber so? ... argh ;)

      Thx erstmal für die Hilfe ... das mit dem height:auto kannt ich noch net ... optimal für die beiden Menus ;) ... aber für den Hauptlayer net so gut ... wenn wenig drin steht, siehts mit aus ... min-height wäre hier besser, aber das wollte bei mir net so - weil ich hier wieder mit schwammigen zahlen arbeiten muß (%) ...

      ÜRGKS!!!! setze ich MIN-HEIGHT:85% dann zieht auch opera den layer länger ... NEIN ... ich hab vorher nur mit min-weidht gearbeitet, aber das  brauchte ich ja net ... macht das unter NN, Moz probleme??! hab die min-height-version gerade hochgeladen - bitte mal schauen ;)

      Axo und was ich gerade sehe ... Opera nimmt das Stylesheet für Schriftart net an ... (die schrift ist ne ms-standardschrift) ... auch wird das h1 net akzeptiert - im css hab ich für body die farbe weiß gesetzt und die schriftart ... falsch? muß ich da explizit h1&Co noch angeben? ich dachte wenns für body angeben ist, gilt das für alles was sich zwischen <body></body> befindet?!

      Bis dann
      Wuppi

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Layergröße variable? scrollen auch mit opera?

        stefan Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        bei deiner variante hätte ich keinen hintergrund mehr - daher hab ich ERSTMAL mit tabelle gearbeitet (damit ich auch mal wieder nen erfolgserlebnis in sachen webdesign hab *g*)

        nö, bei meiner variante ist der innere layer, also hier layer2 nur zum scrollen da und ansonsten durchsichtig (background:none oder background:transparent oder einfach background komplett weglassen, irgend was davon sollte klappen) und rahmenlos (border:none oder einfach auch komplett weglassen), wärend die hintergrundfarbe vom äusseren layer (layer1) kommt. das ist ja grad der *trick*.

        <div id="layer1" style="...rahmen und hintergrund...,padding:0px;width:200px;height:auto">
        <div id="layer2" style="border:none;background:none;width:200px;height:150px;overflow:auto">

        Hier hackts bei mir ... du hast position vergessen festzulegen, der layer wird bei pos 1:1 gesetzt - hab also pos, top, left gesetzt ...
        aber der Text wird bei opera immer noch aus dem layer rausgeschrieben ... und ie macht scrollies

        ja klar, position und so hab ich nicht hingeschrieben. musst du ja selbst wissen wo der kram hin soll. die positionierung läuft über layer1. layer2 liegt da drin und wird somit mitpositioniert.

        so siehts aus:
        <div id="con" style="position:absolute; background-color: #159855; top:160px; left: 600px; layer-background-color: #999999;
        border: 1px none #000000;padding:0px;width:200px;height:auto;overflow:auto">

        hier fehlt noch width:200px und padding:0px (vielleicht auch sowas komisches wie width:202px oder so, weil der 200px grosse layer ja *reinpassen* muss, im zweifelsfall vielleicht die breite nur im äusseren layer angeben und im inneren dann width:auto nehmen)

        <div id="content" style="border:none;background:none; width:200px;height:150px;overflow:auto">

        bl21fvgs abla² </div></div>

        ...ganz viel inhalt...
        jo

        Ne 100% optimierte Seite für alle Browser wirds wohl nie geben - ohne sehr viel Aufwand - und ob das 1 User/Tag wert ist? ;) ... aber trotzdem versuch ich mal mein bestes zu geben ;)

        nö, aber opera-user legen auch meistens nicht sooo viel wert auch hardcore-css seiten, ist halt eher ein solider informations/alltags-browser (was auch immer das sein mag).

        Mhhh ... ie rafft das gerade net ;) opera machts 20px versetzt... aber ich meinte net die ganze Seite sondern nur eines der layer. Und zwar das große graue ... möchte das es im STANDARD von linken 140px ist und von rechten 20px. Von unten 20px und von oben 80px ... sorry, meine ersten zahlen waren nen bissel verwirrend und sahen nach "zentrieren" der Seite aus ...

        probier mal im body padding:0px;margin:0px und (für den ie) text-align:center und deim zu zentrierenden layer
        margin-left:20px;margin-right:20px;width:auto (oder width einfach weglassen) und (für den ie) text-align:left (oder wie die schrift im layer ausgerichtet werden soll).
        vielleicht gehts sogar komplett ohne die "text-aigns" in body und layer (gefährliches halbwissen).
        das selbe könnte auch mit der höhe gehen (im layer-style margin-top:20px;margin-bottom:20px;height:auto).

        Puhh warum hab ich bloß opera installiert - hätte ichs net, hät ich einfach drauf los geschrieben - säh im IE gut aus, HTML wäre valide - alles andere wäre net mein problem ... aber so? ... argh ;)

        ach, der opera ist nicht verkehrt, bloss bei so css-hardcore-aktionen überhebt er sich manchmal ein bisserl.

        ÜRGKS!!!! setze ich MIN-HEIGHT:85% dann zieht auch opera den layer länger ... NEIN ... ich hab vorher nur mit min-weidht gearbeitet, aber das  brauchte ich ja net ... macht das unter NN, Moz probleme??! hab die min-height-version gerade hochgeladen - bitte mal schauen ;)

        min-height kennt der IE nicht :(

        Axo und was ich gerade sehe ... Opera nimmt das Stylesheet für Schriftart net an ... (die schrift ist ne ms-standardschrift) ... auch wird das h1 net akzeptiert - im css hab ich für body die farbe weiß gesetzt und die schriftart ... falsch? muß ich da explizit h1&Co noch angeben? ich dachte wenns für body angeben ist, gilt das für alles was sich zwischen <body></body> befindet?!

        kommt drauf an. wenn sich der text in ta<bellen befindet, braucht er manchmel noch ne extra-wurst. vielleicht auch sonst manchmal. mit ist auch aufgefallen, das beim opera die reihenfolge der css-angaben eine rolle spielt. vielleicht ist opera ja doch ein bisschen verkehrt :/

        tschÖ
        *stefan

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln