Problem mit Div-positionierung ab bestimmtem top:xx UND Höhe die bis bottom

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem mit Div-positionierung ab bestimmtem top:xx UND Höhe die bis bottom

    Hallo, ich habe mal wieder eine Frage!

    Ich habe ein Div-Block ziemlich mittig im Browserfenster wlecher als 'Haupt-Inhaltsfenster' dienen soll....
    Dieser soll ab einer bestimmten Position von oben gesehen anfangen (also als Beispiel top 115px; ). Soweit so gut....

    Nun möchte ich aber das dieser Block/Container bis an den unteren Rand des Browserfensters geht.
    Ich habe body auf 100% höhe gesetzt und bräuchte nun sowas ähnliches für den Div-Bereich, nur eben das dies nicht 100% sind sondern 100% - 115px........so geht das ja leider nicht, aber wie soll ich es sonst bewerkstelligen ?

    Ich habe bereits mit div in div experimentiert, klappt aber nicht wie es soll. also das äussere div hat 100% und fängt bei top:0px an und besitzt overflow:auto;. Das innere div fängt an bei top:115px; und ohne Höhenangabe und ohne overflow (also dehnt es sich nach bedarf). Nur wenn der innere Bereich nun größer wird und ein Scrollbalken erscheint geht dieser natürlich am äusseren div-Container entlang und geht unter dem Kopfbereich (auch ein Div-Container) bis an den oberen Rand (sieht man also Teilweise nicht).

    Jetzt habe ich die Idee gehabt mit Tabellen zu experimeniteren:
    ->tabelle auf 100% höhe.
    ->erste Zeile 115px
    ->zweite Zeile ohne Höhenangabe was VIELLEICHT als Hauptfenster nun verwendet werden könnte wenn das so klappt wie ich es mir vorstelle....-> geht immer bis an den untersten Rand des Browserfensters, beginnt aber bei top:115px, und da kann ich VIELLEICHT ein Div reinbauen das dann bei overflow:auto scrollbalken herzaubert falls nötig....

    Nun habe ich das angefangen und schon ein Problem:
    bei Opera und FF klappt das mit der Tabelle und die erste Zeile mit fester Höhe und die Zweite dann mit dem Rest des Verfügbaren.....
    Aber beim IE sind die Höhen genau umgekehrt!
    also wenn ich da 115px für die Höhe der oberen Zeile angebe wird die untere so hoch (also genau umgekehrt)

    Hier der Code dieses 'Ansatzes':


    Oje, das war jetzt viel geschrieben....hoffentlich liest sich das auch jemand durch der mir helfen kann

    Code:
    <div style="position:absolute; left:201px; top:0px; width:649px; height:100%;">
    <table style="height:100%; width:100%;">
    <tr style="height:115px;">
    	<td>Zeile oben</td>
    </tr>
    <tr>
    	<td>Zeile unten</td>
    </tr>
    </table>
    </div>

  • #2
    wieso machsu nich so?
    PHP-Code:
    <body>
    <
    div id="container">
        <
    div id="zeile1">
            <!-- 
    Inhalt Zeile 1 -->
        </
    div>
        <
    div id="zeile2">
            <!-- 
    Inhalt Zeile 2-->
        </
    div>
    </
    div>
    </
    body
    das css dazu:

    PHP-Code:
    body{
        
    margin 0;
        
    padding:0;
        
    text-align:center;
    }
    #container{
       
    width:649px;
       
    text-align:left;
       
    margin-left:auto;
       
    margin-right:auto;
       
    height:100%;
    }
    #zeile1 {
       
    height:115px;
       
    width:649px;
    }
    #zeile2{
       
    width:649px;

    Geb dem container einen hintergrund und es fällt nicht einmal auf, dass zeile 2 nicht die 100% erfüllt

    DIV und TABLE ? tztztz ... *sfg*

    Code nicht getestet .. prob mal ansonsten nochma posten wos falsch iss ...
    Signatur-Text ...

    Kommentar


    • #3
      @dani_o

      Danke das du versuchst zu helfen.

      Dein Beispiel besitzt kein overflow:auto, also wenn in der 'Zeile 2' deines Beispiels der Inhalt größer wird als bis zum unteren Rand des Browser dann gibts ein Scrollbalken für die gesammte Seite und ich scrolle den gesammten Inhalt der ganzen Seite.....und genau das will ich ja nicht.....

      Ich denke es ist so wie mein zuallererst beschriebene Vorgehensweise ganz oben...
      Ich könnte in deinem Beispiel auch nur ein overflow:auto für den 'container' setzen denn nur der hat auch eine begrenzte Höhe (100%) ! Aber wenn ich es da hinsetze und der Inhalt wird größer, dann kommt zwar ein Scrollbalken, und er ist auch an der gewünschten Stelle. Nur leider geht er von ganz oben bis nach ganz unten. Also auch über 'Zeile 1' in deinem Beispiel (was den 'Kopfbereich' ausmacht)! Ich bräuchte das nur für 'Zeile 2' welche aber immer so hoch sein soll wie die Höhe des gesammten Browserfensters abzüglich der 115px des Kopfbereiches......


      @all

      Alle sagen immer: Finger weg von Frames, iFrames usw....klar, das will ich auch....aber es sollten auch Alternativen zu diesen geben. Genau so eine Alternative brauch ich jetzt bitte
      Jemand ein Vorschlag ?

      Kommentar


      • #4
        Original geschrieben von Master0Blicker
        Alle sagen immer: Finger weg von Frames, iFrames usw....klar, das will ich auch....aber es sollten auch Alternativen zu diesen geben.
        Ich sage immer: Finger weg davon, Frame-/Tabellen-Designs 1:1 mit CSS "nachbasteln" zu wollen ...

        Mit CSS hat man so viel mehr Möglichkeiten, aus dem langweiligen "Tabellen-Raster", dem "Kästchen-Design" und der Frame-Optik auszubrechen - da sollte man auch mal den Mut haben, das zu versuchen, ansatt immer nur den selben alten langweiligen Kram mit neueren Mitteln nachzubauen.
        Genau so eine Alternative brauch ich jetzt bitte
        Jemand ein Vorschlag ?
        position:fixed nutzen - oberen Bereich also über komplett per Scrollbar am Fensterrand scrollbaren Inhalt legen, Inhalt per entsprechendem Abstand vom oberen Rand fernhalten.

        Damit wird die Seite auch gleich viel besser nutzbar (meine Meinung), als mit seiteninternen Scrollbalken - die sind ein weiteres Relikt aus Frame-Zeiten, welches keinesfalls mit aller Macht am Leben erhalten werden muss.
        I don't believe in rebirth. Actually, I never did in my whole lives.

        Kommentar


        • #5
          als mit seiteninternen Scrollbalken - die sind ein weiteres Relikt aus Frame-Zeiten, welches keinesfalls mit aller Macht am Leben erhalten werden muss.
          OffTopic:
          erzähl das mal den kreativen designern, die sind ja in erster linie für diesen mist verantwortlich


          peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            @wahsaga

            Ich habe nun dein Vorschlag umgesetzt und in FF und Opera klappt das wunderbar!

            Nur im IE natürlich mal wieder nicht....

            Ich habe das Workaround von selfHTML für das position:fixed-Problem im IE übernommen und es klappt auch!

            Nur das der scrollbare Inhalt den Kopfteil überdeckt, d.h. über diese drüber scrollt anstatt drunter!
            Ich habe bereits mit z-index herumprobiert und dem Kopfbereich ein höheren z-index-Wert gegeben und alles mögliche...aber der scrollbare Bereich bleibt immer über dem Kopfbereich!

            Nun habe ich für den scrollbaren (Haupt-)Bereich den z-index-Wert -1 gegeben und plötzlich ist der Scrollbare Bereich unter dem Kopfbereich, nur das dieser jetzt nicht mehr scrollbar ist sondern fest! Also Balken und alles ist da, nur diesen kann man nicht bewegen, nicht mit mjausrädchen scrollen usw., einfach gar nichts!!!

            Kennst hier jemand das Problem ? Wie regel ich das ?

            Danke für eure Mühe!

            Kommentar


            • #7
              Kann zu meinem zuletzt beschriebenen Problem wirklich niemand helfen ?
              Glaub ich nicht das niemand diese Probleme hatte.....
              Ein Container der einen Scrollbereich hat kann nicht unter ein anderen Div-Container liegen ?

              Kommentar


              • #8
                meinst du so was wie faux frames

                gruß
                peter
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  @Kropf

                  Also wenn du den Text meinst-> da steht irgendwie nichts drinnen....
                  Wenn du das Layout meinst: genau das nur ohne Fußbereich....

                  Wie mach ich das ?

                  Kommentar


                  • #10
                    Original geschrieben von Master0Blicker
                    Wenn du das Layout meinst: genau das nur ohne Fußbereich....

                    Wie mach ich das ?
                    Anschauen - Verstehen - Nachbasteln ...

                    (Ist übrigens die fixed-Geschichte, die ich auch schon vorgeschlagen hatte ...)
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar


                    • #11
                      Original geschrieben von Master0Blicker
                      @Kropf

                      Also wenn du den Text meinst-> da steht irgendwie nichts drinnen....
                      Wenn du das Layout meinst: genau das nur ohne Fußbereich....

                      Wie mach ich das ?
                      dann nimm den hier: http://barrierefrei.e-workers.de/wor...fix/index.html

                      Kommentar

                      Lädt...
                      X