tutorials.de Buch-Aktion 02/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
1006
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. #1
    Maviee Maviee ist offline Grünschnabel
    Registriert seit
    Apr 2005
    Beiträge
    2
    Hallo,

    ich habe auf Basis des klasse Tutorials Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken
    • Der mittlere Frame bekommt bei der Einstellung overflow: auto KEINEN Scrollbalken. Dieser Abschnitt lässt sich nicht scrollen
    • Die Hintergrundgrafik wird nur bis zum Ende des letzten Elements eingefügt. Bei kleinen Seiten mit wenig Inhalt habe ich plötzlich leer Flächen ohne die Hintergrundgrafik
    • Wenn ich die Pfeiltasten zum Scrollen benutze scrollt die ganze Seite (also inkl. Navi-Leiste und Headerbereich) mit
    • Tabellenelemente werden bei der Einstelung overflow:auto extrem in die breite gezogen. overflow:visible zeigt die Tabellen korrekt an

    Nach langem herumprobieren habe ich leider immer noch keine Möglichkeit gefunden die Seite im FF korrekt darzustellen. Hier ist mein CSS code:

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    
          html, body {
          width: 100%;
          height: 100%;
          margin: 0;
          border: 0;
          padding: 0;
      }
      body {
          overflow: hidden;  /* Scrollbalken im Fenster unterbinden */
      }
      #mitte {
          position: absolute;
          top: 120px;        /* Abstand zum oberen Fensterrand */
          left: 100px;        /* Abstand zum linken Fensterrand */
          overflow: auto;        /* Scrollbalken, falls notwendig */
          background-image: url(../../res/bg_blau.gif);
          background-repeat: repeat;
          background-attachment: fixed;
          z-index: 1;      
      }
      * html #mitte {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-top-width: 120px;    /* = Kopfzeilenhöhe */
          border-left-width: 100px;    /* = Spaltenbreite links */
          border-style: solid;
          background-attachment: fixed;
      }
     
      #mitte .inhaltDiv {
          margin: 5px;        /* Abstand des Inhalts zum Blockrand */
      }
      #oben {
          position: absolute;
          top: 0;            /* Abstand zum oberen Fensterrand */
          left: 0;        /* Abstand zum linken Fensterrand */
          right: 0;        /* Abstand zum rechten Fensterrand */
          height: 120px;        /* Blockhöhe */
          padding: 0;        /* Interpretation Boxmodell! */
          overflow: hidden;    /* Scrollbalken unterbinden */
          background-image: url(../../res/bg_blau.gif);
          background-repeat: repeat;
          z-index: 3;        /* höchste z-Ebene! */
      }
      * html #oben {
          width: 100%;
          height: 120px;
      }
      #oben .inhaltDiv {
      }
      #links {
          position: absolute;
          top: 120px;        /* Abstand zum oberen Fensterrand */
          left: 0;        /* Abstand zum linken Fensterrand */
          bottom: 0;        /* Abstand zum unteren Fensterrand */
          width: 100px;        /* Blockbreite */
          padding: 0;        /* Interpretation Boxmodell! */
          background-image: url(../../res/bg_blau.gif);
          background-repeat: repeat;
          z-index: 2;
      }
      * html #links {
          top: 0;
          width: 100px;
          height: 100%;
          border-top-width: 120px;    /* = Kopfzeilenhöhe */
          border-left-width: 0;
          border-bottom-width: 0;
          border-right-width: 0;
          border-style: solid;
      }
      #links .inhaltDiv {
      }

    Kann mir jemand helfen mein CSS zu anzupassen, dass auch der FF die Seite korrekt darstellt ?

    Veieln Dank im Vorraus

    Gruß
    Mav
     

  2. #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.440
    Hi,

    mir ist aufgefallen, dass du für Non-IE-Browser keine Grössenangaben für den Container mit der ID
    #mitte angegeben hast. Ergänze den entsprechenden Selektor mal um die Eigenschaften
    bottom und right.
    Code :
    1
    2
    3
    4
    
    #mitte{ /* Bisheriger Code*/
            bottom: 0;
            right: 0;
    }
    Vielleicht hilft das ja weiter.

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK

  3. #3
    Maviee Maviee ist offline Grünschnabel
    Registriert seit
    Apr 2005
    Beiträge
    2
    Du bist ein Gott! Das hat wirklich geholfen.

    10000000 fach Danke


    Gruß
    Mav
     

  4. #4
    Maik Tutorials.de Gastzugang
    Zitat Zitat von Maviee
    Du bist ein Gott! Das hat wirklich geholfen.

    10000000 fach Danke

    Gruß
    Mav
    Wenn das Problem gelöst ist und alles funktioniert, dann markiere das Thema bitte auch durch einen Klick auf den 'Status-Button' rechts unterhalb des letzten Beitrags als erledigt.

    Vielen Dank
     

Ähnliche Themen

  1. Basislayout mit variablem Inhalt
    Von jenno im Forum .NET Web und Kommunikation
    Antworten: 2
    Letzter Beitrag: 15.05.06, 15:56
  2. Basislayout will nicht mit IE!
    Von svennson im Forum CSS
    Antworten: 3
    Letzter Beitrag: 08.07.05, 00:33
  3. Tabellenloses Basislayout
    Von Leon Hemke im Forum CSS
    Antworten: 1
    Letzter Beitrag: 30.03.05, 03:00