iceteea: "max-top" wie maxwidth ?

Hi,

hier schilder ich euch mal knapp mein Anliegen:
Gibt es sowas wie ein "max-top" bzw. "max-left" wie es die Eigenschaften max-width und max-height gibt ?

Hintergrund:
Ich platzieren ein Div am unterem Ende einer Seite.
Die Seite hat ein Hintergrundbild.
Wenn das Hintergrundbild (z.B. herbeigeführt durch hoche unnormale Bildschirmauflösung) endet (repeat kommt nicht in Frage) soll das Div an genau dieser Stelle platziert werden.

ciau - iceteea

  1. Hi,

    Gibt es sowas wie ein "max-top" bzw. "max-left" wie es die Eigenschaften max-width und max-height gibt ?

    Nein.

    Wenn das Hintergrundbild (z.B. herbeigeführt durch hoche unnormale Bildschirmauflösung) endet (repeat kommt nicht in Frage) soll das Div an genau dieser Stelle platziert werden.

    Zu welchem Zweck?

    MfG ChrisB

    --
    “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
    1. "Zu welchem Zweck?"

      du hinterfragst den Zweck eines Zweckes ? ^^
      ...ist aus designtechnischen Gründen.

      Es gibt da keine CSS Eigenschaft mit der ich so was erreichen würde ?
      Hmm, dann muss ich wohl leider doch auf JS zurückgreifen.

      1. "Zu welchem Zweck?"

        du hinterfragst den Zweck eines Zweckes ? ^^

        Nein, den Zweck - nicht deine Wunschvorstellung.

        A: Ich möchte eine Mutter mit metrischem Gewinde auf einen Nagel Schrauben.
        B: Warum?
        A: Um etwas zu befestigen.

        ...ist aus designtechnischen Gründen.

        ChrisB will dir in dieser Form mitteilen, dass ggf. eine Gewindestange oder eine Stockschraube für die Lösung des genannten Problems besser geeignet wäre.

        Es gibt da keine CSS Eigenschaft mit der ich so was erreichen würde ?

        Nein, aber wenn du beschreibst, zu welchem Zweck das gedacht ist, kann man dir sicher helfen.

        Hmm, dann muss ich wohl leider doch auf JS zurückgreifen.

        Wenn du meinst, es hindert dich niemand - ich habe schon eine Ahnung was du mit deiner Aufgabenstellung bewirken willst, aber ich habe keine Lust eine entsprechende Lösung zu liefern um dann festzustellen, dass ich mit meiner Vermutung völlig falsch lag.

        1. Na dann will ich es dir mal aufmalen! :)

          http://img441.imageshack.us/img441/4858/demoaq.jpg

          Rechts oben in der Ecke siehst du wie es normalerweise aussehen würde.
          Das Hintergrundbild reisst einfach ab.

          Die Bank ist jetzt das div dass sich normalerweise am footer der Seite befindet.

          Ist die Seite aber länger als erwartet (Widescreens sind ja heftig im Kommen)
          soll das Bank-div (in dem sich dann auch die Erde befindet) am Ende des Hintergrundbildes stehen bleiben.

          1. soll das Bank-div (in dem sich dann auch die Erde befindet) am Ende des Hintergrundbildes stehen bleiben.

            Wie siehts mit max-height für das Wiesen-Dingens aus?

            1. Wie siehts mit max-height für das Wiesen-Dingens aus?

              Naja, also du meinst dass ich ein Himmel-Wiese-div einbaue und das Bank-div darunterschiebe ?
              Und wenn die Seite dann nicht zu groß ist ?
              Dann ist die Bank ja nicht sichtbar. (Achja: Bank-div hat einen z-index von 2)

              Oder missverstehe ich dich gerade ?

              1. Oder missverstehe ich dich gerade ?

                Ich kann dir grade garnicht folgen.

                1. Dann erkläre mir mal was du meinst :)

                  1. Om nah hoo pez nyeetz, iceteea!

                    Dann erkläre mir mal was du meinst :)

                    Ich glaube, umgekehrt wird ein Schuh draus.

                    Matthias

                    --
                    http://www.billiger-im-urlaub.de/kreis_sw.gif
          2. Om nah hoo pez nyeetz, iceteea!

            Na dann will ich es dir mal aufmalen! :)

            http://img441.imageshack.us/img441/4858/demoaq.jpg

            also:

            body mit Erde als Hintergrundfarbe (evtl. Farbverlauf) ein div mit himmel-wiese als Hintergrundbild ein div stylische bank.

            evtl sind auch mehrere Hintergrundgrafiken für dich interessant.

            Matthias

            --
            http://www.billiger-im-urlaub.de/kreis_sw.gif
            1. wie gesagt das bring mich in diesem Fall nicht weiter, da das Div ja trotzdem dann an's Ende der Seite kommt.
              Es geht um das Div und nicht um das Hintergrundbild.

      2. Om nah hoo pez nyeetz, iceteea!

        gib <html> eine einigermaßen passende Hintergrundfarbe, gib <body> das Hintergrundbild, lass den footer ganz unten und kümmere dich nicht um eventuelle Streifen.

        oder

        pack den Inhalt mit dem Hintergrundbild in ein Div und den Footer drunter, dann sollte es so aussehen wie mit deiner Idee max-top.

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. Darauf wäre ich natürlich auch selbst gekommen, wenn es sich bei dem Hintergrundbild nicht eher um ein foto-like Bild handeln würde ;)

  2. Moin!

    Irgendwie verstehe ich dein Problem nicht. Die Bank (der Footer?) rutscht also vertikal uber das Hintergrundbild je nach Hoehe des Inhalts? Und soll, wenn sie bis zum unteren Rand gerutscht ist, nicht mehr weiter nach unten, sondern dran kleben bleiben?

    Oder klebt Die Bank einfach immer am untern Rand des Viewports?

    Was passiert denn wenn der Inhalt auch dafuer zu lang wird? Ich komm irgendwie nicht drauf, was dein eigentliches Problem ist. Weder was genau Dein Design so macht, noch welche Problem Du damit hast, das zu erreichen, was Du willst.

    Nen Onlinebeispiel waere toll. Oder etwas rudimentaerer Code. Ich habe dauernd ein standard Design vor Augen wo unten schlicht ein Footer dranhaengt.

    --
    Ich bin dafuer verantwortlich was ich sage, nicht dafuer, was Du verstehst.
    1. Om nah hoo pez nyeetz, Steel!

      Ich habe dauernd ein standard Design vor Augen wo unten schlicht ein Footer dranhaengt.

      Ich auch: schlicht, einfach, 3-zeilig

      Matthias

      --
      http://www.billiger-im-urlaub.de/kreis_sw.gif
    2. Oder klebt Die Bank einfach immer am untern Rand des _Viewports_?

      So ist es.

      Wie soll ich das euch noch erläutern ? Onlinebeispiel gibt es nicht.
      Ich versuche es mal mit ne'm Codebeispiel (villeicht hilft das ja...) :


      beispiel.html :

      <html>....  
      <body>  
        
      [somecontent etc]  
        
      <div id=footer">  
      </div>  
        
        
      ...  
      ...</html>
      

      beispiel.css :

      html, body {  
      	background-color: #000000;  
      	background-image: url('bild.jpg');  
      	background-repeat: no-repeat;  
      	background-position: top center;  
      	}  
        
      [someotherelements etc]  
        
      #footer {  
      	position: fixed;  
      	bottom: 0px;  
      	left: 0px;  
      	width: 100%;  
      	height: 200px;  
      	background-image: url('bank.png');  
      	background-position: center bottom;  
      	background-repeat: no-repeat;  
      	z-index: 3;  
      	}  
      
      

      Das Hintergrundbild hat eine größe von sagen wir 1024 x 768 px und ist nicht repetierbar (weil es z.B. ein Foto ist).
      Die Bank kommt an's untere Ende des Viewports.
      Ist die Auflösung jetzt größer als xxx x _768_ reisst das hintergrundbild ab und der schwarze Hintergrund ist zu sehen.

      GENAU DAS IST DAS PROBLEM!
      Also wie würde man das am besten lösen ?

      Natürlich in dem man die Bank nur so weit runterrutschen lässt bis das Hintergrundbild zu ende ist.

      Das Bank-div beinhaltet jetzt aber auch die Erde.
      Die ist normalerweise nicht zu sehen.
      Wenn jetzt die Bank aber hochgezogen wird (also nicht mehr unten ist) wird die Erde sichtbar und füllt den hässlichen schwarzen Hintergrund.

      Werft nochmal einen Blick auf das verlinkte Bild.
      Ich wiederhole mich ja die ganze Zeit nur...

      ciau - iceteea

      1. Noch was:
        Die Bank scrollt mit.

        1. Om nah hoo pez nyeetz, iceteea!

          <body> mit max-heigth, Himmel als Hintergrund oben und Bank als Hintergrund unten.

          Erde ist Hintergrund von <html>

          oder wenn es dir von der Breite nicht zusagt, eine Ebene tiefer. Matthias

          --
          http://www.billiger-im-urlaub.de/kreis_sw.gif
          1. Und was ist wenn man scrollt ?
            Oder die Auflösung garnicht zu groß ist ?
            ...

            ...

            1. Om nah hoo pez nyeetz, iceteea!

              Und was ist wenn man scrollt ? Oder die Auflösung garnicht zu groß ist ?

              schau es dir an

              wenig Inhalt, mittel, viel Inhalt

              Matthias

              --
              http://www.billiger-im-urlaub.de/kreis_sw.gif
              1. Om nah hoo pez nyeetz, iceteea!

                schau es dir an

                und da du meinen Artikel über mehrere Hintergrundbilder für ein Objekt aufmerksam gelesen hast, weißt du auch, dass der IE <= 8 dies nicht beherrscht. (IE-Nutzer sehen in diesem Fall nur Erde, aber die wollen das so [TM].

                Matthias

                --
                http://www.billiger-im-urlaub.de/kreis_sw.gif
                1. Om nah hoo pez nyeetz, apsel!

                  IE-Nutzer sehen in diesem Fall nur Erde, aber die wollen das so [TM].

                  gilt auch für die aktuelle IE9-Platform-Preview

                  Matthias

                  --
                  http://www.billiger-im-urlaub.de/kreis_sw.gif
                  1. Das macht nix da deine Lösung ja wie bereits mehrmals erwähnt nicht in Frage kommt.