gomsoo: Border abschneiden

Hallo zusammen

Ich will etwas bestimmtes:
Eingabefeld (Input), welches unten, links und rechts einen Border hat.

Soweit so gut, nichts schwieriges, nun will ich aber, dass die Border auf der Seite nur etwa 5 Pixel von unten hoch sind, ist so etwas mit CSS zu realisieren?

Besten Dank für die Antworten

Gruss
gomsoo

  1. Hi,

    Ich will etwas bestimmtes:
    Eingabefeld (Input), welches unten, links und rechts einen Border hat.
    Soweit so gut, nichts schwieriges, nun will ich aber, dass die Border auf der Seite nur etwa 5 Pixel von unten hoch sind, ist so etwas mit CSS zu realisieren?

    nicht dass ich wüsste - ich würde eher eine Kombination aus padding und einem am unteren Rand ausgerichteten Hintergrundbild vorschlagen, und stattdessen auf border verzichten. Geht natürlich nur, wenn die Breite des Elements fest ist ...

    Ciao,
     Martin

    --
    Bitte komme jemand mit einem *g* zum Wochenende, damit nicht über mich gelacht wird.
      (Gunnar Bittersmann)
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. @@Der Martin:

      nuqneH

      Hintergrundbild vorschlagen, und stattdessen auf border verzichten. Geht natürlich nur, wenn die Breite des Elements fest ist ...

      Wieso? Sliding doors sagen dir was?

      Ich würd aber stattdessen auf Hintergrundbilder verzichten. Und auf border auch.

      Qapla'

      --
      Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
      1. Hallo,

        Hintergrundbild vorschlagen, und stattdessen auf border verzichten. Geht natürlich nur, wenn die Breite des Elements fest ist ...
        Wieso? Sliding doors sagen dir was?

        äh, ja. Aber da bräuchte ich ein zusätzliches Element im Markup. Oder mehrere (hier: zwei) Hintergrundbilder für das input-Element, wobei ich nicht weiß, ob und wie deren Z-Order bei Überlappung spezifiziert ist.

        Ich würd aber stattdessen auf Hintergrundbilder verzichten. Und auf border auch.

        Nämlich wie? - Mein Opera 14 zeigt nämlich bei deinem verlinkten Beispiel nur eine leere Seite (von der schwarzen dabblet-Leiste am oberen Rand abgesehen). Im Quellcode finde ich reichlich HTML 5 und SVG. Empfiehlst du etwa SVG? Wie sieht's da mit der Browserunterstützung aus?

        Ciao,
         Martin

        --
        Zwei Kumpels sitzen vor dem Computer. "Welche Suchmaschine benutzt du eigentlich meistens?" - "Prima Vera." - "Hmm, kenn' ich gar nicht." Dann geht die Tür auf: "Schatz ich habe deine Sonnenbrille wiedergefunden!" - "Prima, Vera!"
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Hi,

          Mein Opera 14 zeigt nämlich ...

          ... dass ich mich von der Versionsnumerierung von Firefox habe verwirren lassen.
          Nein, mein Opera heißt natürlich noch 12.01 - eine Zeitmaschine habe ich auch nicht.

          So long,
           Martin

          --
          Er:  Mit wem warst du gestern abend aus?
          Sie: Du bist mal wieder eifersüchtig wie immer!
          Er:  Wer ist Immer?
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. @@Der Martin:

            nuqneH

            Nein, mein Opera heißt natürlich noch 12.01 - eine Zeitmaschine habe ich auch nicht.

            Vielleicht doch? Nur dass sie dich nicht in die Zukunft, sondern in die Vergangenheit bringt?

            Bist du *sicher*, dass du das Update auf 12.01 nicht nur runtergeladen, sondern auch installiert hast?

            Dabblet läuft mit 12.01. Bei mir auf Windows und Mac.

            Qapla'

            --
            Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
            1. Hallo,

              Bist du *sicher*, dass du das Update auf 12.01 nicht nur runtergeladen, sondern auch installiert hast?

              ja, bin ich. Dafür sorgt schon der Update-Mechanismus meines Betriebssystems. Außerdem war ich mir im Moment selbst nicht sicher und habe deshalb extra unter Help/About nachgesehen.

              Dabblet läuft mit 12.01. Bei mir auf Windows und Mac.

              Bei mir mit 12.01 auf Linux auch (Mint 12 auf einem System, Mint 13 auf einem anderen gestern frisch aufgesetzten) - mit dem schon beschriebenen Ergebnis. Ostfriesische Nationalflagge.
              Vielleicht würde das mit aktiviertem JS anders aussehen; dafür gibt mir die Seite aber keine hinreichende Motivation.

              Ciao,
               Martin

              --
              Ein Patriot ist jemand, der bereit ist, sein Land gegen seine Regierung zu verteidigen.
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. @@Der Martin:

                nuqneH

                Vielleicht würde das mit aktiviertem JS anders aussehen; dafür gibt mir die Seite aber keine hinreichende Motivation.

                *prust*

                Qapla'

                --
                Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
        2. @@Der Martin:

          nuqneH

          äh, ja. Aber da bräuchte ich ein zusätzliches Element im Markup.

          Nö.

          Oder mehrere (hier: zwei) Hintergrundbilder für das input-Element

          Eben.

          wobei ich nicht weiß, ob und wie deren Z-Order bei Überlappung spezifiziert ist.

          Das zuerst genannte ist oben.

          Nämlich wie? - Mein Opera 14 zeigt nämlich bei deinem verlinkten Beispiel nur eine leere Seite

          Opera hat ein Problem mit Dabblet. Oder andersrum.

          Ich könnte das Bespiel woandershin kopieren. In dem Fall halte ich es für einfacher, wenn Interessierte einen anderen Browser verwenden. (Da es sich bei denen um Webentwickler handelt, sollte das machbar sein.)

          Qapla'

          --
          Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
          1. Hi!

            Ich könnte das Bespiel woandershin kopieren. In dem Fall halte ich es für einfacher, wenn Interessierte einen anderen Browser verwenden. (Da es sich bei denen um Webentwickler handelt, sollte das machbar sein.)

            Nein. :( Und wenn ich so gegen 22:00 zuhause bin, denk ich nicht mehr dran.

            Irgendwer hatte mal was ueber Fallbacks gesagt... ;)

            --
            Signaturen sind blöd!
        3. Om nah hoo pez nyeetz, Der Martin!

          Nämlich wie? - Mein Opera 14 zeigt nämlich bei deinem verlinkten Beispiel nur eine leere Seite (von der schwarzen dabblet-Leiste am oberen Rand abgesehen). Im Quellcode finde ich reichlich HTML 5 und SVG. Empfiehlst du etwa SVG? Wie sieht's da mit der Browserunterstützung aus?

          Wie siehst du denn dieses Beispiel? http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/box-shadow

          Matthias

          --
          1/z ist kein Blatt Papier.

          1. Hallo,

            Nämlich wie? - Mein Opera 14 zeigt nämlich bei deinem verlinkten Beispiel nur eine leere Seite (von der schwarzen dabblet-Leiste am oberen Rand abgesehen). Im Quellcode finde ich reichlich HTML 5 und SVG. Empfiehlst du etwa SVG? Wie sieht's da mit der Browserunterstützung aus?
            Wie siehst du denn dieses Beispiel? http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/box-shadow

            unauffällig - so, als müsste es so sein. Navi am linken Rand, daneben Überschrift, Quellcodeauszug, Erläuterungen, Achtung-Box, Hinweis-Box. Auch das verlinkte Beispiel sieht plausibel aus. was Opa rendert, passt zur verbalen Beschreibung. Wobei der Außenschatten der dritten Box keinen Gradienten hat, sondern eine scharfe Kante. Alle anderen haben einen sanften Gradienten. Weiß nicht, ob das so richtig ist, oder ebenfalls ein Darstellungsfehler. Obwohl ... FF14 zeigt's genauso an.
            Das hat jetzt aber nichts mit der Frage nach SVG zu tun, oder?

            Ach übrigens: Im Quellcodeauszug hat #three noch einen Minus-Strich vor "box-shadow", der gehört da nicht hin. Im "echten" Quellcode ist es richtig.

            Ciao,
             Martin

            --
            Die späteren Ehen sind oft glücklicher als die erste, weil das natürliche Ende bereits absehbar ist.
              (George Bernhard Shaw)
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Om nah hoo pez nyeetz, Der Martin!

              ... Auch das verlinkte Beispiel sieht plausibel aus. was Opa rendert, passt zur verbalen Beschreibung.
              Das hat jetzt aber nichts mit der Frage nach SVG zu tun, oder?

              Eher danach, ob der Opera mehrere Schatten "kann".

              Ach übrigens: Im Quellcodeauszug hat #three noch einen Minus-Strich vor "box-shadow", der gehört da nicht hin. Im "echten" Quellcode ist es richtig.

              Ja, ein typischer cnp-Fehler. Ich hab ihn auch im echten Quellcode heute erst entfernt. Aber warum hast du denn das falsche Minus nicht gleich entfernt? Es ist keine Anmeldung zum Bearbeiten notwendig.

              Matthias

              --
              1/z ist kein Blatt Papier.

              1. Hallo,

                Ach übrigens: Im Quellcodeauszug hat #three noch einen Minus-Strich vor "box-shadow", der gehört da nicht hin. Im "echten" Quellcode ist es richtig.
                Ja, ein typischer cnp-Fehler. Ich hab ihn auch im echten Quellcode heute erst entfernt. Aber warum hast du denn das falsche Minus nicht gleich entfernt?

                weil ... ich so weit einfach nicht gedacht habe? :-)

                Es ist keine Anmeldung zum Bearbeiten notwendig.

                Stimmt, jetzt wo du es sagst - ich habe gelesen, dass das für alle freigeschaltet worden ist. Aber das war mir im Moment nicht präsent.

                Ciao,
                 Martin

                --
                Success should be measured not so much by the position that one has reached in life,
                but by the obstacles one has overcome while trying to succeed.
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                1. Om nah hoo pez nyeetz, Der Martin!

                  weil ... ich so weit einfach nicht gedacht habe? :-)

                  Na, dann will ich diese Änderung mal dir überlassen :-p

                  Matthias

                  --
                  1/z ist kein Blatt Papier.

        4. @@Der Martin:

          nuqneH

          Oder mehrere (hier: zwei) Hintergrundbilder für das input-Element, wobei ich nicht weiß, ob und wie deren Z-Order bei Überlappung spezifiziert ist.

          Wäre hier auch egal. Der Teil der Hintergrundbilder*, der nicht zum Rahmen beiträgt, ist transparent.

          * Und es sollte (wenn, dann) doch ein Hintergrundbild sein, das beide Teile enthält (Sprites).

          Aber wie gesagt, hier braucht man kein Hintergrundbild. (Moderne Browser stillschweigend vorausgesetzt.)

          Qapla'

          --
          Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
  2. @@gomsoo:

    nuqneH

    Eingabefeld (Input), welches unten, links und rechts einen Border hat.

    Soweit so gut, nichts schwieriges, nun will ich aber, dass die Border auf der Seite nur etwa 5 Pixel von unten hoch sind, ist so etwas mit CSS zu realisieren?

    Ja, klar.

    Qapla'

    --
    Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
    1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

      Ja, klar.

      geschickt. Es fand den Weg ins Wiki.

      Matthias

      --
      1/z ist kein Blatt Papier.