HP-User: Gestaltungstechnische Frage

Hallo Forumsteilnehmer

Beim Aufbau des Grundgerüstes für ein Gästebuch bin ich auf folgende Schwierigkeit gestoßen:

Alle Seiten dieses Projektes sind meist so aufgebaut, dass der Header obendrüber steht, gefolgt von Text darunter, abgeschlossen von einem passendem Bild/Logo. Das ist hier so:

Beispiel_Eins.

Hier muss man zwar herunter scrollen, aber das ist kein Problem, da der Text nicht sonderlich lang ist, und in der Länge auch nicht variiert.

Bei der betreffenden Seite hier ist der Inhalt für Testzwecke momentan statisch, wird aber später von einem Perlskript dynamisch generiert. Je mehr Gästebucheinträge es geben wird, desto länger wird natürlich der mittlere Content. Und somit rutscht das letzte Bildchen "reading_book.png" immer weiter herunter. Keiner wird bsp. 50 Einträge herunterscrollen, um zu sehen, ob da noch was kommt (die neuen Einträge kommen ja oben drauf).

Also muss das Bildchen fix platziert werden. Dann wäre die Frage, wie ich bei verschiedenen Monitoren, das Bildchen immer am unteren Rand halte.
Der mittlere Inhalt müsste dann hierbei hinter dem Bild durchscrollen.

Oder ich nehm so ein I-Frame Dingens. Würde gerade passen, weil meine Frau zum Geburtstag so ein I-Pad bekommen hat - Alles mit einem "Ei-" ist momentan gard modern :)

Frage: Wie mach ich das am besten, dass das "Buch mit Brille" hier sichtbar bleibt?

Beispiel_Zwei

Gruß HP-User

  1. Servus,

    Also muss das Bildchen fix platziert werden. Dann wäre die Frage, wie ich bei verschiedenen Monitoren, das Bildchen immer am unteren Rand halte.
    Der mittlere Inhalt müsste dann hierbei hinter dem Bild durchscrollen.

      
    #bildchen {  
       display: static;  // Fixieren  
       bottom: 0px;      // Startposition von unten  
    }  
    
    

    Nützliches zu Positionierung mit CSS findest du auch <http://de.selfhtml.org/css/eigenschaften/positionierung.htm@title=hier auf SELFHTML>

    Oder ich nehm so ein I-Frame Dingens. Würde gerade passen, weil meine Frau zum Geburtstag so ein I-Pad bekommen hat - Alles mit einem "Ei-" ist momentan gard modern :)

    Für iframes filt das leider nicht. Frames sind in den meisten Fällen zu vermeiden.

    Grüße
    -1UnitedPower

    1. #bildchen {
         display: static;  // Fixieren
         bottom: 0px;      // Startposition von unten
      }

        
      Humbug!  
        
      ~~~css
        
      #bildchen {  
         position: static;  // position statt display zum fixieren  
         bottom: 0px;       // Startposition von unten  
      }  
      
      

      muss es natürlich heißen.

      1. Hi nochmal

        Humbug!

        #bildchen {
           position: static;  // position statt display zum fixieren
           bottom: 0px;       // Startposition von unten
        }

        
        >   
        > muss es natürlich heißen.  
          
        Ja, hab ich gesehen. Warum static und nicht fixed?  
        Ich sag dir, dass mit dieser Positionierung (position) werd ich in mir hundert jahren nicht merken können ;-)  
          
        Gruß HP-User
        
        1. Ja, hab ich gesehen. Warum static und nicht fixed?
          Ich sag dir, dass mit dieser Positionierung (position) werd ich in mir hundert jahren nicht merken können ;-)

          Nein du hast recht. "fixed" wäre richtig. Ich brauche meinen Kaffee. Entschuldige für die Verwirrung, die ich hier stifte.

    2. Hi 1UnitedPower

      Oder ich nehm so ein I-Frame Dingens. Würde gerade passen, weil meine Frau zum Geburtstag so ein I-Pad bekommen hat - Alles mit einem "Ei-" ist momentan gard modern :)

      Für iframes filt das leider nicht. Frames sind in den meisten Fällen zu vermeiden.

      Sorry, da hab ich weiter gedacht, aber nicht weiter geschrieben:

      Das I-Frame wäre dann für die Gästebuchbeiträge gedacht. Quasi, dass das Fenster mit den Gästebucheinträgen in einem I-Frame sitzt, mit Scrollbalken rechts, unten drunter (unter dem I-Frame) dann das Bildchen.

      Oder ein stinknormales Div mit Scrolbarem Inhalt? Ginge doch auch?

      Gruß

      HP-User

      1. Hi 1UnitedPower

        Oder ein stinknormales Div mit Scrolbarem Inhalt? Ginge doch auch?

        Das ginge auch. Der Unterschied zu meiner vorgeschlagenen Lösung besteht darin, dass der Scrollbalken sich dann nicht über die gesamte Seite erstreckt, sondern nur über die Gästebucheinträge. Wie du es letztendlich umsetzt ist Geschmackssache. Zu meiner Lösung ist noch anzumerken, dass dein Eintrag-Container einen gewissen Abstand nach unten benötigt, damit auch der letzte Eintrag noch komplett sichtbar bleibt. Dazu sei das Stichwort "margin" genannt.

        1. An 1UnitedPower

          Das ginge auch. Der Unterschied zu meiner vorgeschlagenen Lösung besteht darin, dass der Scrollbalken sich dann nicht über die gesamte Seite erstreckt, sondern nur über die Gästebucheinträge.[...]

          Ja, genau das wäre der Idealfall. Alles bleibt wie es ist, nur die Gästebucheinträge Scrollbar. Z. B. mit overflow: hidden. Sowas probier ich gleich mal aus. Da muss ich wahrscheinlich alle:

          -----------------------------------
          <div class="buch_eintrag">
          <p class="textvariante_c">Name: Gast 1
          </p>
          <p class="textvariante_d">Text für Testzwecke,Text für Testzwecke,Text für Testzwecke,Text für Testzwecke,Text für Testzwecke,Text für Testzwecke,Text für Testzwecke,Text für Testzwecke.
          </p>
          </div>
          -----------------------------------

          in ein Wrapper-Div spannen, und das kleiner machen, so dass der Inhalt zum scrollen ist.

          Gruß und Dank

          HP-User

          1. Ja, genau das wäre der Idealfall. Alles bleibt wie es ist, nur die Gästebucheinträge Scrollbar. Z. B. mit overflow: hidden.

            Hab jetzt meinen Kaffee intus. overflow:hidden wird dich nicht sehr weit bringen. overflow: scroll bringt dich da schon weiter. Wenn der Container eine feste Größe hat auch overflow: auto. Letzteres hat den Vorteil, dass auch nur Srollbalken angezeigt werden, wenn sie nötig sind.

            1. Hallo 1UnitedPower

              Hab jetzt meinen Kaffee intus. overflow:hidden wird dich nicht sehr weit bringen. overflow: scroll bringt dich da schon weiter. Wenn der Container eine feste Größe hat auch overflow: auto. Letzteres hat den Vorteil, dass auch nur Srollbalken angezeigt werden, wenn sie nötig sind.

              Deine Aussage ist absolut zutreffend. Während ich mit overflow: scroll; auch unten horizontal einen hässlichen Scrollbalken hatte, ist es mit overflow: auto; wunderbar. Nur einen Scrollbalken am rechten Rand. So wie das sein soll :-)

              Kannst ja den Ist-Stand von heute anschauen:

              Vorläufiges_Ergebnis.

              Das Scroll-Div sollte sich problemlos via Perl füllen lassen. Aber an das PerlSkript gehe ich erst morgen wieder ran. Für heute reichte es *gähn*

              Gruß und nochmals Danke für die Hinweise

              HP-User

              1. Nachtrag...

                Das mit den scrollbaren div's hat mir so gut gefallen, dass ich es auch für die Regeln-Seite verwendet habe.

                Gruss und Gute Nacht

                HP-User

  2. Hallo!

    .... Keiner wird bsp. 50 Einträge herunterscrollen, um zu sehen, ob da noch was kommt (die neuen Einträge kommen ja oben drauf).

    Vlt. noch als weitere Idee: Lass dir doch nur jeweils die letzten 10 Einträge anzeigen mit Blätter-/Seitennavigation, um an weitere Einträge zu kommen.