Border abschneiden
gomsoo
- css
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
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
@@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'
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
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
@@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'
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
@@Der Martin:
nuqneH
Vielleicht würde das mit aktiviertem JS anders aussehen; dafür gibt mir die Seite aber keine hinreichende Motivation.
*prust*
Qapla'
@@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'
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... ;)
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
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
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
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
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
@@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'
@@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?
Qapla'