nicht angemeldet
CSS Idee für Statuszeile gesucht
0 0 
Rolf B
0
0 
Der Martin
0 
Gunnar Bittersmann
0 0 Der Martin
0 Gunnar Bittersmann
CSS Idee für Statuszeile gesucht
Matthias Scharwies
TSHallo zusammen,
in einem Terminkalender blende ich bei Eintrag, Änderung, usw. eine Statusmeldung ein.
Klappt auch hervorragend, aber die Statusmeldung selber sieht ein wenig "popselig" aus, finde ich.
Sie wirkt einfach nicht so schön und/oder professionell, meine ich.
Mein CSS hierfür ist:
/* Formatierung für alle Elemente der Statuszeile */
.navcontainer .status {
border: 1px solid #4D4D4D;
border-radius: 6px;
display:none;
FONT-FAMILY: Verdana;
FONT-SIZE: 10px;
float:left;
padding: .5em;
width: 40em;
text-align:center;
margin-right: 10px;
}
/* Formatierung für Erfolgshinweis */
.navcontainer #success {
COLOR: #F7F7F7;
Font-weight: bold;
background-color: #6BBC54;
cursor:pointer;
}
Hat jemand eine Idee, wie ich der (in diesem Fall z.b. Erfolgsmeldung) ein wenig mehr Pep verleihen könnte?
Sie wirkt mir ein bisschen zu "hölzern, profan", sie macht irgendwie nichts her, ich hoffe, Ihr versteht, was ich meine.
Wenn nicht, ist auch nicht schlimm, weil die Funktion selber ja einwandfrei ist.
Einzig, ich kann die Maße (Höhe, Breite, usw.) nicht ändern, weil alle Statusmeldungen nur einen bestimmten Platz zur Verfügung haben.
Ich kann einzig und alleine an Farben, Schriften, Schattierungen, Umrandungen, Radien, usw. drehen.
Alles, was ich selber versucht habe, gefällt mir aber nicht besser als das Ergebnis, was ich hier habe.
Schönes WE,
Jörg
-
Geschmacksfragen sind Geschmacksfragen. Wie wär's denn zu zeigen, was Du hast?(→ „Problematische Seite“)? Oder sollen wir das wirklich nachbauen, damit wir das sehen können?
Aber:
FONT-FAMILY: Verdana;hab ich nicht. Und das ist kein „Alleinstellungsmerkmal“.
.navcontainer #success {Naja. Ein Element mit einer ID darf nur einmal vorkommen. Deshalb mutet es als „hyperliquid“ an, als weitere Voraussetzung der Anwendung die Regel zu erstellen, dass es in einem Element einer bestimmten Klasse (hier:
.navcontainer) sein muss - die vorliegend eher nicht dynamisch zugewiesen wird. Es sei denn natürlich, Deine Klassennamen „sprechen“ zwar, lügen aber.- Übrigens gibt es
<nav>. Das macht ein Element der Klasse „navcontainer“ mehr als nur überflüssig, seine Verwendung ist sogar geboten.
Und:
.navcontainer .status { ... } .navcontainer #success { ... }Beide Regeln werden nur dann zusammen auf ein Element mit der ID 'success' angewendet, wenn dieses in einem Element der Klasse 'status' gekapselt ist, welches sich selbst in einem Element der Klasse 'navcontainer' befindet. Ernsthaft?
-
Hallo Raketenwilli,
Übrigens gibt es <nav>. Das macht ein Element der Klasse „navcontainer“ mehr als nur überflüssig, seine Verwendung ist sogar geboten.
Es geht ja um die Statuszeile. Und wenn das ein Container ist, der Navigation anbietet UND eine Statuszeile enthält, dann gehört <nav> nur um die Navigation und die Statuszeile gehört separat.
Ob es aber korrekt ist, dass man eine Navigation und eine Statuszeile gemeinsam in einen Container packt (außer <body>), das mag diskussionswürdig sein.
.navcontainer .status / .navcontainer #success
Ich lese die Kommentare so, dass .status die Statuszeile ist und #success ein einzelnes Element darin:
/* Formatierung für alle Elemente der Statuszeile */ .navcontainer .status { ... } /* Formatierung für Erfolgshinweis */ .navcontainer #success { ... }Also irgendwie so:
<div class="navcontainer"> <nav><a href="foo">foo</a> <a href="bar">bar</a></nav> <div class="status"> <span>...</span> <span id="success">...</span> <span>...</span> </div> </div>Die divitis müsste man noch bekämpfen, mit section und footer beispielsweise, aber dann ist das okay, meine ich. Bis auf die Merkwürdigkeit mit nav und .status.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
Also irgendwie so:
<div class="navcontainer"> <nav><a href="foo">foo</a> <a href="bar">bar</a></nav> <div class="status"> <span>...</span> <span id="success">...</span> <span>...</span> </div> </div>Die divitis müsste man noch bekämpfen, mit section und footer beispielsweise, aber dann ist das okay, meine ich. Bis auf die Merkwürdigkeit mit nav und .status.
So in etwas siehts aus und zumindest footer nutze ich auch noch.
Jörg
-
-
Hallo Willi,
Geschmacksfragen sind Geschmacksfragen. Wie wär's denn zu zeigen, was Du hast?(→ „Problematische Seite“)? Oder sollen wir das wirklich nachbauen, damit wir das sehen können?
Also aussehen tuts ungefähr so, nur eben viel breiter und von der Höher her kleiner. Habe versucht, es genau so nachzubauen, kriegs abe rnicht hin.
Naja. Ein Element mit einer ID darf nur einmal vorkommen. Deshalb mutet es als „hyperliquid“ an, als weitere Voraussetzung der Anwendung die Regel zu erstellen, dass es in einem Element einer bestimmten Klasse (hier:
.navcontainer) sein muss - die vorliegend eher nicht dynamisch zugewiesen wird. Es sei denn natürlich, Deine Klassennamen „sprechen“ zwar, lügen aber.Ja, mag sein. Aber für mich jetzt auch nicht wirklich falsch.
- Übrigens gibt es
<nav>. Das macht ein Element der Klasse „navcontainer“ mehr als nur überflüssig, seine Verwendung ist sogar geboten.
Das nav-Element nutze ich.
Aber eben in der Navigation selber.
Insofern mag meine Bezeichnung irreführend sein, aber das ist eigentlich nebensächlich.
Es ging mir bei meiner Frage nur um den Style. Der ist, wie Du richtig sagtest "Geschmacksache" und nach meinem Geschmack gefällt mir die Statusmeldung nicht.Jörg
- Übrigens gibt es
- Übrigens gibt es
-
Hallo Jörg,
zusätzlich zu dem, was unser Raketenwissenschaftler schon kritisiert hat:
/* Formatierung für alle Elemente der Statuszeile */ .navcontainer .status { border: 1px solid #4D4D4D; border-radius: 6px; display:none; FONT-FAMILY: Verdana; FONT-SIZE: 10px; float:left; padding: .5em; width: 40em; text-align:center; margin-right: 10px; }Wieso blendest du das Element mit display:none aus? Wenn du es nicht anzeigen willst, lass es doch einfach weg. Und falls du die Statuszeile nur bei Bedarf dynamisch einblenden willst: Das halte ich nicht für eine gute Idee. Das bringt Unruhe in die Anzeige. Lass sie einfach leer, anstatt sie ganz auszublenden. Just my 2 cents.
Abmessungen wie font-size oder margin in px anzugeben, ist übrigens auch keine gute Idee.
Und außerdem irritiert mich die Großschreibung. Das ist nicht verboten, aber unüblich. Üblich und empfohlen ist durchgehende Kleinschreibung (auch in HTML für Element- und Attributnamen).
Hat jemand eine Idee, wie ich der (in diesem Fall z.b. Erfolgsmeldung) ein wenig mehr Pep verleihen könnte?
Sie wirkt mir ein bisschen zu "hölzern, profan", sie macht irgendwie nichts her, ich hoffe, Ihr versteht, was ich meine.
Was meinst du? Fehlen dir passende Ideen zur Gestaltung? Oder hapert es an der Umsetzung?
Eine Idee wäre, den Hintergrund der Schrift (bei dir das Element #success) mit einem Gradienten in die Hintergrundfarbe der restlichen Zeile übergehen zu lassen. Eventuell sieht auch ein Schatteneffekt für die Schrift schick aus - das kann aber auch die Lesbarkeit verschlechtern, also Vorsicht.
Einzig, ich kann die Maße (Höhe, Breite, usw.) nicht ändern, weil alle Statusmeldungen nur einen bestimmten Platz zur Verfügung haben.
Dann solltest du diesen Platz aber generell vergrößern. Wenn die Höhe so klein ist, dass du die font-size auf 10px runtersetzen musst, ist am Layout grundsätzlich etwas faul. Das ist zu klein, für einige Nutzer kaum zu lesen. Ich habe beispielsweise in meinen Browsern generell eine Mindest-Schriftgröße von 12px eingestellt.
Ich kann einzig und alleine an Farben, Schriften, Schattierungen, Umrandungen, Radien, usw. drehen.
Alles, was ich selber versucht habe, gefällt mir aber nicht besser als das Ergebnis, was ich hier habe.Tja, ausprobieren und auswählen musst du es schon selbst. Ich habe zwei Anregungen geliefert, vielleicht kommen noch weitere.
Einen schönen Tag noch
Martin--
Motto der DIY-Anhänger: If it ain't broken, fix it until it is.-
Hallo Martin,
Tja, ausprobieren und auswählen musst du es schon selbst. Ich habe zwei Anregungen geliefert, vielleicht kommen noch weitere.
Danke für Deine Anregungen.
Ich habe ein wenig mit den Farben gespielt, box-shadow hineingebracht, den border-radius verkleinert und (was hier aber keiner wissen konnte) ein fehlendes margin-right ergänzt (die Stauszeile hatte ein margin-left und war rechts mit dem Viewport bündig).Jetzt kann sich das Ganze schon sehen lassen, finde ich.
Jörg
-
-
@@Jörg
die Statusmeldung selber sieht ein wenig "popselig" aus, finde ich.
Sie wirkt einfach nicht so schön und/oder professionell, meine ich.Die Statusmeldung soll auch nicht schön sein, sondern ihrer Funktion entsprechend. Design ist nicht Kunst.
Außerdem kann man dir keinerlei ernsthaften Gestaltungshinweise geben, ohne den „Rest“ deiner Seite zu kennen. Die Statusmeldung soll sich da ja irgendwie einfügen.
Was man schon sagen kann: Setze die nötigen ARIA-Attribute:
role="status",aria-live="polite". Siehe ARIA Live Regions.🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix-
Hallo Gunnar,
die Statusmeldung selber sieht ein wenig "popselig" aus, finde ich.
Sie wirkt einfach nicht so schön und/oder professionell, meine ich.Die Statusmeldung soll auch nicht schön sein, sondern ihrer Funktion entsprechend. Design ist nicht Kunst.
Gilt "Augen zum Leuchten bringen" auch als "ihrer Funktion entsprechend"?
Oder wie anders sind z.b. Dessous bei Damen überhaupt zu erklären? 😋😉
Jörg
-
Hallo,
die Statusmeldung selber sieht ein wenig "popselig" aus, finde ich.
Sie wirkt einfach nicht so schön und/oder professionell, meine ich.Die Statusmeldung soll auch nicht schön sein, sondern ihrer Funktion entsprechend. Design ist nicht Kunst.
Gilt "Augen zum Leuchten bringen" auch als "ihrer Funktion entsprechend"?
ja, bei manchen Dingen schon. Bei Kinderspielzeug zum Beispiel. Bei einer Statuszeile, die einfach nur informieren soll, eher nicht.
Oder wie anders sind z.b. Dessous bei Damen überhaupt zu erklären? 😋😉
Da zählt eher die Faszination, was noch alles folgen könnte, wenn sie das unsinnige Zeug mal ausgezogen haben. 🤪
(Darf ich das einfach so schreiben? Ja, ist ja schon nach 22 Uhr.)Einen schönen Tag noch
Martin--
Motto der DIY-Anhänger: If it ain't broken, fix it until it is.-
Hallo Martin,
Da zählt eher die Faszination, was noch alles folgen könnte, wenn sie das unsinnige Zeug mal ausgezogen haben. 🤪
(Darf ich das einfach so schreiben? Ja, ist ja schon nach 22 Uhr.)Du musst "genießen" lernen... 😋😁😇
Jörg
-
Hallo,
Da zählt eher die Faszination, was noch alles folgen könnte, wenn sie das unsinnige Zeug mal ausgezogen haben. 🤪
(Darf ich das einfach so schreiben? Ja, ist ja schon nach 22 Uhr.)Du musst "genießen" lernen... 😋😁😇
meinst du? Wenn es gut läuft, genieße ich doch schon, lange bevor ich die Dessous überhaupt zu sehen bekomme.
Sich in die Augen schauen, an den Händen halten, plaudern, gemeinsam lachen, flirten - all das kann schon eine Menge Genuss sein. Und da ist noch nichts Unanständiges[1] dabei. 😀Einen schönen Tag noch
Martin--
Motto der DIY-Anhänger: If it ain't broken, fix it until it is.
Im Sinne von: "das gehört sich nicht in der Öffentlichkeit" ↩︎
-
-
-
-
@@Gunnar Bittersmann
Design ist nicht Kunst.
“Design is not veneer. Design is not synonymous with aesthetics, although aesthetics are a component of design. In the words of Steve Jobs, ‘Design is not just what it looks like and feels like. Design is how it works.’”
“Do not simply add a grid system, web fonts, textures, icons, ‘fancy CSS3’, a background image, and colour to your site without thinking long and hard about why you’re adding each one of those things and how they will influence the experience of your users.”
— Aral Balkan
🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix-
Servus!
@@Gunnar Bittersmann
Design ist nicht Kunst.
Doch!
Ich würde veneer eben nicht mit Kunst übersetzen, sondern mit Verzierung, Verschnörkelung.
Grad nachgeschaut: Verblendung beim Zahnarzt, Furnier beim Holz oder eben ein Anstrich.
“Design is not veneer. Design is not synonymous with aesthetics, although aesthetics are a component of design. In the words of Steve Jobs, ‘Design is not just what it looks like and feels like. Design is how it works.’”
… is not just … bedeutet für mich Laien aber, dass es eben auch dazu gehört.
“Do not simply add a grid system, web fonts, textures, icons, ‘fancy CSS3’, a background image, and colour to your site without thinking long and hard about why you’re adding each one of those things and how they will influence the experience of your users.”
— Aral Balkan
🖖 Живіть довго і процвітайте
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
@@Matthias Scharwies
Design ist nicht Kunst.
Doch!
Nein! Oh!
“Design is not veneer. Design is not synonymous with aesthetics, although aesthetics are a component of design. In the words of Steve Jobs, ‘Design is not just what it looks like and feels like. Design is how it works.’”
… is not just … bedeutet für mich Laien aber, dass es eben auch dazu gehört.
“…aesthetics are a component of design.”
Aber nicht der Hauptteil.
Design heißt nicht, etwas hübsch zu machen. Genau das war aber die Frage im OP.
🖖 Живіть довго і процвітайте
--
When the power of love overcomes the love of power the world will know peace.
— Jimi Hendrix -
Hallo,
Design ist nicht Kunst.
Doch!
der Begriff Kunst wird im Deutschen sehr unterschiedlich verstanden. Für die einen ist Kunst nur die kreative Tätigkeit, für die anderen ist es auch Geschicklichkeit und Fingerfertigkeit, und wieder andere sehen schon das bloße Beherrschen einer anspruchsvollen Tätigkeit als Kunst. Man spricht ja in dem Sinn auch gelegentlich von Ingenieurskunst.
Ich würde veneer eben nicht mit Kunst übersetzen, sondern mit Verzierung, Verschnörkelung.
Ja, Verzierung trifft es hier wohl am besten.
Grad nachgeschaut: Verblendung beim Zahnarzt, Furnier beim Holz oder eben ein Anstrich.
Mir ist der Begriff auch erst vor kurzer Zeit zum ersten Mal begegnet.
“Design is not veneer. Design is not synonymous with aesthetics, although aesthetics are a component of design. In the words of Steve Jobs, ‘Design is not just what it looks like and feels like. Design is how it works.’”
… is not just … bedeutet für mich Laien aber, dass es eben auch dazu gehört.
Genau, is not just verstehe ich hier als "ist nicht nur".
Einen schönen Tag noch
Martin--
Motto der DIY-Anhänger: If it ain't broken, fix it until it is.-
Hello,
und wie weit ist "Kunst" von "künstlich" entfernt?
Glück Auf
Tom vom Berg-
Servus!
und wie weit ist "Kunst" von "künstlich" entfernt?
Gar nicht: Brücken und Tunnel sind im Straßenbau „Kunstbauten“ - künstlich bedeutet erst einmal nur, dass es eben nicht natürlich gewachsen,sondern vom Menschen erschaffen ist.
Analog im Englischen: „art“ - die Kunst - „artificial flavors“ -z.B. das Erdbeeraroma aus Sägespänen -. Interessant, dass es neben dem „artist“, der nicht nur im Zirkus auftritt, sondern auch malen und bildhauen könnte., noch den „artisan“ - den (Kunst)-Handwerker gibt.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
-
-
-
-
-