[HTML][JS]{CSS} ›Button‹ (type submit) bei Bedarf völlig ausblenden

[cumulonimbus8]

Hallo!

Mittels style="display:none;" habe ich bei Bedarf einen in einem Musterformular stets mit vorgesehenen »Grafik-Button« (<img …>) über programmgesteuerte Codeveränderung komplett aus dem Spiel genommen. Wichtig: das Objekt selbst bleibt existent für ebenfalls in einem solchen Muster abgelegten JS-Code.

Nun will ich diese Buttons als Fließtextgestütze Objekte verwirklichen. Damit soll der selbe Mustercode per Klartext änderbar sein statt Grafiken die diesen Text beinhalten zu Hauf vorzuhalten.
Eine eigene CSS-Klasse funktioniert so weit (auch hier soll eine Musterdatei übernommen werden, bloß möglichst ohne auch da noch dran rumändern zu müssen; zumindest was eine Programmlogik anginge). Auch mein Frage nach Farbe hat sich so weit erledigt, das funzt schon so bescheiden wie es soll.

Erschlage man mich oder nicht, dies definiert einen der Buttons:

<span class="ZurueckAufStartTaste" id="ZurueckAufStartTaste" value="- das hustet mir leider auch was -" type="submit" onmousedown="ZurueckAufStart()">&nbsp;Zur&uuml;ck auf Start&nbsp;</span>

…in CSS steht vorläufig bescheiden:

.ZurueckAufStartTaste {
  background-color: #888888;
  color: #ffffff;
  text-decoration: none;
}

…undOnMOuseDown macht etwa dies:

 var ZAST=document.getElementById("BackToStartButton");
 ZAST.style.backgroundColor=ZASTColor;

…wobei mittels ZASTColor=ZAST.currentStyle.backgroundColor; zuvor einmal die CSS-Farbe gesichert wurde um sie in dem Schritt der das Zurück erst ermögliche auf die selbe Weise wie darüber ändern zu können.

Ich hätte also gerne CSS und auch JS in ihrer Codestruktur erhalten und nur in der HTML auf möglichst simple Weise einen solchen Button auch in seinem Volumen (optische Zeilenhöhe) unsichtbar gemacht (Google lieferte ›un–sichtbare‹ Texte usf. die aber dennoch existieren und Raum einnehmen). Ein true durch ein false zu ersetzen ist geringster Aufwand als z.B. die Tabellenzellenhöhe auf 0 einzudampfen und den Fließtext rauszunehmen - soviel wie geht soll stehen bleiben; ein manuelles zurück auf true macht auf simple weisen das später wieder scharf wenn mans benötigt.

Wo kann ich da ansetzen?
Und der aus einem Muster vom Kollegen geklaute value="", was ist mit dem - wäre evtl. netter dort Text zu frisieren als zwischen den ><… (rein aus Neugier gefragt).

Oder gibt es konkrete Codiervorschläge, die die selbe Funktion genauso abbilden, aber mehr Optionen bieten?

CN8

 

[Rossie]

Mittels CSS kann man den Button verschwinden lassen:

.ZurueckAufStartTaste {
   ...
   display:none;
}

Will man das partout in den HTML-Code verlagern, kann man das Style-Attribut entsprechend setzen:

<span ... style="display:none;">

 

[norfen]

So richtig blicke ich noch nicht durch was genau du eigentlich machen willst.
Jedoch, span kannst du keine value und type attribute geben.
statt <span.. > würde ich <input type="button" value="blabla"> verwenden. dann hast du zumindest auch einen echten "button" und nicht bloss ein textfeld mit hintergrundfarbe, was du anklicken kannst.
Im JS referenzierst du die ID "BackToStartButton", im HTML hat das Element die ID "ZurueckAufStartTaste".
Wie der Vorredner schon sagte, mit display:none hast du eigentlich alles was du zum unsichtbar machen brauchst.

 

[Daaron]

Wenn du dich an die HTML-Spezifikation halten würdest, dann wäre das auch alles recht simpel, da du dann z.B. solche CSS-Selektoren verwenden könntest: input[type=submit] {}
Jedes Element auf display:none; nimmt übrigens keinerlei Raum ein.

 

[[ChAoZ]]

So richtig blicke ich noch nicht durch was genau du eigentlich machen willst.

Lol das dachte ich mir auch...
Ich wette die Frage lässt sich umschrieben mit 2 Sätzen viel besser ausdrücken...

Fazit: beim erste lesen nicht verstanden, keine Lust aufs zweite Mal.
Schönes WE und sorry fürs OT.

 

[cumulonimbus8]

Das mit dem Durchblicken ist exakt das Problem: es muss wenig übrig sein [bleiben] das nachträglich zu verändern sein kann und der Laie muss es im Bedarfsfall finden (bzw. muss ich in kurzen Sätzen jemanden dahin navigieren können, am Telefon).

Betreff «input».
Ich griffe nicht zu SPAN o.ä. wenn ich nicht nun eben gerade nicht INPUT verwenden könnte. Für echte Inputs und einer weiteren Funktion außerhalb dessen was ich angreifen kann muss dies (in CSS; konkreter einer anderen globalen CSS) reser4t bleiben. Also muss ich mir anders behelfen. Und dieses gewählte Anders muss nicht die beste Wahl sein. Ideen?
(Diese Buttons müssen adaptiv sein, mindestens in der Farbe - und ich ahne Böses wenn Cheffe und Kollegen Blut geleckt haben… -, deshalb muss jeder einzigartig und etwas anderes sein denn INPUT.)

Dass style="dispaly:none;" nicht arbeitet hatte ich eingangs erwähnt. Warum ist das so..?
Das mit dem value="" ist ein wenig schade, aber kein wirkliches Problem.

Auch, dass ich es nicht in der CSS ändern will schrieb ich eingangs. Diese Kröte werde ich nur im äußersten Notfall schlucken.
Wie [ChAoZ] erwähnt - das ist ein großes Durcheinander bei dem nicht einfach eine schöne stabile Site Page für Page gebaut wird, das sind überarbeitete maschinengenerierte HTMLs die (von mir) schon arg umgebaut und teilweise massivst ›frisiert‹ werden müssen. Und da sehe ich als das arme Programmiererwürstchen und Ausprobiererwürstchen zu mir nicht zu viele Baustellen heranzuziehen. Eben deswegen will ich nicht auch noch in CSS-Files rumwursteln. Optimal wäre das eine einzige servergestützte statt je Projekt eine eigene Kopie - bei 2 Versionen am Server (mit und mit ohne display=none) vergisst due die 2. mit zu ändern wenn was zu ändern ist. →

Dieser Aufbau in dem ich rumfrickele stellt 3 Varianten einer JS-gestützen Funktionalität dar. Und ich bin reichlich froh schon mal von einem Rudel an Quellcodedatein (s.o.) auf eine [zwei; HTML & JS] runter zu sein. Modularer Aufbau durch Suchen&Ersetzen von Schlüsselbegriffen, die einzelne Elemente unsichtbar (un–raumgreifend) machen. Nun klemmt als zum Glück eines der letzten Teile diese doofe Taste…

CN8

 

[Foochan]

Betreff «input».
Ich griffe nicht zu SPAN o.ä. wenn ich nicht nun eben gerade nicht INPUT verwenden könnte.

Dass style="dispaly:none;" nicht arbeitet hatte ich eingangs erwähnt. Warum ist das so..?

Was ich bislang nicht verstanden hab: wieso nimmst du nicht den button-Tag, wenn du kein input-Tag verwenden willst? Das kannst du genauso gut stylen.

Und warum display: none bei dir nicht geht, kann ich nicht sagen. Entweder du hast einen Tippfehler oder eine andere CSS-Regel oder JavaScript setzt das zurück.

Falls es hilft: Ich hab einfach mal ein fiddle erstellt mit 3 gestylten buttons, von denen der mittlere unsichtbar ist.

http://jsfiddle.net/Fn4JY/1/

 

[Daaron]

es muss wenig übrig sein [bleiben] das nachträglich zu verändern sein kann und der Laie muss es im Bedarfsfall finden (bzw. muss ich in kurzen Sätzen jemanden dahin navigieren können, am Telefon).

Nennt sich CMS, hast du hier offensichtlich NICHT....

Für echte Inputs und einer weiteren Funktion außerhalb dessen was ich angreifen kann muss dies (in CSS; konkreter einer anderen globalen CSS) reser4t bleiben.

Also das ist schlichtweg BULLSHIT, egal wie der Code aussieht. Wenn man auch nur ne Spur Ahnung von CSS und vor allem dessen Vererbung und Gewichtung hat, erkennt man hier nichts anderes als ne faule Ausrede...
Ich hab dir vor vielen Monaten schon gesagt: Lern, mit den Browser-Werkzeugen umzugehen. Lern CSS Vererbung. Lern die Gewichtung. Lern, welche Funktion IDs & Klassen haben. Lern, wie man komplexe Selektoren aufbaut... Hast du irgendwas davon gemacht? Offensichtlich nicht.

(Diese Buttons müssen adaptiv sein, mindestens in der Farbe

<input type="submit" class="button submit btn-red">
Also: Wieder nur eine Ausrede... Oder wusstest du etwa nicht, dass man einem DOM-Element mehrere Klassen zuweisen kann? Wenn du so etwas tatsächlich nicht wusstest, dann verweise ich auf all meine früheren Antworten, in denen ich dir gesagt hab: Drück verdammt noch eins mal F12 im Browser und guck dir an, wie Andere sowas machen!

Dass style="dispaly:none;" nicht arbeitet hatte ich eingangs erwähnt. Warum ist das so..?

Wäre ich schnippig, würde ich sagen: "Weil du display falsch geschrieben hast..." Aber das wirds ja wohl kaum sein. Also was bleibt dir? GENAAAAAAAU, verwende die verdammten scheiß Browser Tools und guck verdammt noch eins nach, welche CSS-Eigenschaften greifen. Also das ist doch wohl aller-unterste Stufe. Wer nicht von selbst auf diesen Schwengel kommt, der ist in der Branche schlichtweg nicht lebensfähig. Rechtsklick -> Element untersuchen... das kann sogar unser Grafiker.

Das mit dem value="" ist ein wenig schade, aber kein wirkliches Problem.

Wenn du tatsächlich <span> zweckentfremden willst, dann nimm einen HTML5-DOCTYPE und setz auf data-Attribute. Schon kannst du multiple Werte W3C-Konform speichern...

Auch, dass ich es nicht in der CSS ändern will schrieb ich eingangs. Diese Kröte werde ich nur im äußersten Notfall schlucken.

Und das ist eben auch falsch. Du hast ein CSS-Problem, also löse es in CSS. Wenn dein Auto nicht anspringt, doktorst du dann an Benzinpumpe, Krümmer und Gaspedal herum? Oder guckst du direkt mal auf den Anlasser & die Zündkerzen?

...das sind überarbeitete maschinengenerierte HTMLs die (von mir) schon arg umgebaut und teilweise massivst ›frisiert‹ werden müssen.

Und es ist eingetreten,w as ich dir auch vor Ewigkeiten schon prophezeit habe: Dein Kartenhaus stürzt ein. Probleme folgen auf Probleme, die Kosten durch deine Arbeitszeit steigen exorbitant.
Abreißen, neu bauen. Tu es JETZT. Es wird nur noch teurer. Hättet ihr direkt am Anfang diesen Schritt gemacht, dann wären die Kosten für eine standardkonforme, moderne und erweiterbare Neuentwicklung jetzt schon längst wieder drin.

 

[cumulonimbus8]

@Daaron

Du hast ein CSS-Problem, also löse es in CSS. Wenn dein Auto nicht anspringt, doktorst du dann an Benzinpumpe, Krümmer und Gaspedal herum? Oder guckst du direkt mal auf den Anlasser & die Zündkerzen?

Och, da wüsste ich wo und wo nicht ich nachschauen muss[te]. Wenn ich eine Spritpumpe habe die so heißt muss ich die nächste für die Standheizung anders ansprechen. Und das eben habe ich - 2 Buttons, 2 inputs, 2 CSS die ich separieren muss damit sie nicht über Kreuz kommen und keine Abhängigkeiten generieren.

dispaly siehe unten - wenns so einfach gewesen wäre…

Hättet ihr direkt am Anfang diesen Schritt gemacht

Falsch… Wir arbeiten seit DOS mit den Herstellen einer zu Grunde liegenden Software, oder hier mehreren, faktishc zusammen indem wir Praktiker denen sagen und zeigen was Ingenieure, die von diesem Teil der Materie einfach keine Erfahrungswerte haben, an der SW zu verbessern haben.
Ich habe eine SW, oder deren Output, Stück für Stück als fast Einzelkämpfer nutzbar gemacht und Kollegen Mittle gegeben fast mit Knopfdruck den Rohoutput zu was Brauchbarem zu machen. Darin genug Erweiterungen, Detailverbesserungen, Selbsthilfe - und dann will man dies, dann das, und ›könntest du mal‹… Ich kämpfe damit Module dranzuhängen die autark laufen ohne vorhandene Strukturen umzupflügen. Deshalb SPAN statt INPUT weil da was Anderes den Daumen drauf hat. Tricksen statt schön selbst ausbauen.
----------------

@gonfle
<button> hatte ich völlig verdrängt.
Geht aber blöderweise auch wieder mal schief, vielen Dank an den Quellcode aus der Maschine. Ich befinde mich mitten im FORM-Tag das mit onSubmit diese Page ›auslöst‹. Genauer gesagt steckt ein normaler <input type="submit"…> mitten da drin der selbiges anstoßen soll, samt spezieller weiterre Sytem-INPUTS. Das legt mir Fesseln noch und nöcher an (vgl. css .input). BUTTON jednfals tut was auf das die FORM anspringt. Verflixt!
Das maschinenerzeugte Gemörkse ist so genial aufgebaut, dass ich komplett die Page umbauen müsste um allein die FORM unter Kontrolle zu kriegen - das übersteigt es was das Programmierwürstchen verkraftet.

Es wird also SPAN (weil ohne Umbrüche wie DIV) bleiben müssen. Außerdem, da will ich mich fast entschuldigen für, ist mir der als 3D gestylte Button optisch gar nicht mal so lieb, wie ich wortwörtlich sehe. Die geSPANtne Flachmänner sehen besser aus.
Das mit dem .invisible ist eine gute Idee kann man ggf. anderswo brauchen. Der Punkt, dass ich dies zusätzlich einfügen muss (an der Button Class) statt ein vorhandenes yes gegen eine none zu tauschen, behagt mir nicht… Da müsste ich fast ein «visible» als Dumm im CSS einbauen

Und siehe da - style="display:none;" funktioniert plötzlich wieder - das Leben ist schön…
(Und, nein, woher dispaly kommt will ich nicht wissen - das war Copy-Paste aus funktionierendem Code, das muss ich hier verfummelt haben.)

Wie auch immer habe ich mit der Antwort das eine und andere gelernt (width und height könnten noch nützen, aber ich kämpfe mit Fontgrößen und dem was Browser draus machen…), das nehme ich mal für positiv. Auch wenn ich es womöglich nicht einsetzen kann.

CN8

 

[Daaron]

Und das eben habe ich - 2 Buttons, 2 inputs, 2 CSS die ich separieren muss damit sie nicht über Kreuz kommen und keine Abhängigkeiten generieren.

...und genau das ist Schwachsinn. Wenn nicht gerade ein vollkommen Schwachsinniger auf die Idee kam, !important an einen Inline-Style zu packen, kannst du über die Selektoren-Gewichtung IMMER bestehende Styles überlagern wie du sie brauchst.

Falsch… Wir arbeiten seit DOS mit den Herstellen einer zu Grunde liegenden Software, oder hier mehreren, faktishc zusammen indem wir Praktiker denen sagen und zeigen was Ingenieure, die von diesem Teil der Materie einfach keine Erfahrungswerte haben, an der SW zu verbessern haben.

Nennst sich Vendor Lock-In und ist etwas, dem viele Firmen zum Opfer fallen, weil sie keinerlei Weitblick beweisen.
Hier gehört sich eben DOCH eine komplette Neuentwicklung in einem MVC-Pattern hin...

BUTTON jednfals tut was auf das die FORM anspringt. Verflixt!

Tja, auch hier greift wieder mal: Lies die verdammte Spezifikation!
http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-button-type

Ein Button sendet ein Formular nur ab, wenn er vom Typ "submit" ist. So. Jetzt lies die Spezifikation...

Das maschinenerzeugte Gemörkse ist so genial aufgebaut, dass ich komplett die Page umbauen müsste um allein die FORM unter Kontrolle zu kriegen - das übersteigt es was das Programmierwürstchen verkraftet.

Genau das ist aber mal nötig. Abreißen, neu bauen. Wenn du damit überfordert bist, dann holt euch jemanden, der sowas aus dem Handgelenk schüttelt.

Außerdem, da will ich mich fast entschuldigen für, ist mir der als 3D gestylte Button optisch gar nicht mal so lieb, wie ich wortwörtlich sehe. Die geSPANtne Flachmänner sehen besser aus.

Und das ist deine Ausrede WOFÜR genau? Ein <span> kann genauso einen 3D-Effekt haben, wie ein <button> oder <input type="submit"> flach sein kann. Was? Wusstest du nicht?
Rechtsklick -> Element untersuchen -> Sehen, staunen, verstehen!

Das mit dem .invisible ist eine gute Idee kann man ggf. anderswo brauchen. Der Punkt, dass ich dies zusätzlich einfügen muss (an der Button Class) statt ein vorhandenes yes gegen eine none zu tauschen, behagt mir nicht… Da müsste ich fast ein «visible» als Dumm im CSS einbauen

...aber ich kämpfe mit Fontgrößen und dem was Browser draus machen…

Genau das tut man eben nicht. Der gute Designer arbeitet ausschließlich mit "em" und "rem" für Schriftgrößen, Zeilenhöhen, Abstände,... Das so erzeugte Layout ist deutlich flexibler.

 

[Smartass]

#9 cumulonimbus

Das HTML-Element Button ist ohne JavaScript komplett funktionslos -wies Daaron ähnlich in #10 zwei Minuten vor mir erläuterte- und kann daher auch nichts auslösen ... -zu Deinen- Zitat "gespanten Flachmännern" - die Deiner Meinung "nach besser aussehen würden" ... zeigt nur, dass Dir das Universalattribut class nicht geläufig ist, mit dem man verschiedene Varianten von HTML-Elementen erzeugen kann. Dazu vergibt man Namen für die Klassen.

Anzeigebeispiel: Abwechselnde Reihen von Spans und Buttons

Noch eine Anmerkung aus Selfhtml: ... CSS ist mit HTML eng verzahnt. Es lohnt sich daher, beide Sprachen gleichzeitig zu erlernen ... Sie werden bei den Beschreibungen zu einzelnen HTML-Elementen deshalb immer auch auf die Möglichkeiten hingewiesen, wie Sie diese Elemente mit Hilfe von CSS gestalten können ...

 

[cumulonimbus8]

Wie soll <button …> den nicht nichts auslösen wenn die bekloppte SW die dahinter steckt trotzdem drauf reagiert? Kann ich doch nichts für, ist ein weiterer Stolperstein, habe ich auch erst nach Versuch gemerkt. Planmäßig soll sich da nichts tun, habe ich auch schon mal gelesen.

Und mit 3D meine ich ebne nun… 3D. Da kann ich a priori auszeichnen (für Tests habe ich da kräftig in den Rahmen- und Farbtopf gegriffen) wie ich will wenn der Browser mit diese ›Schatten‹ aufs Auge drückt.
Dass ich meine mit der flache Lösung hübscher dazustehen - ist halt meine Meinung. Kann sein, dass ich da noch getrietzt werde der Taste Tiefe zu verleihen.

Und ich will da auch nichts beschönigen - mir fehlt die Zeit an den Optionen die CSS bietet zu spielen um mir Resultate anzuschauen; glaubt mir, dass ich prinzipiell weiß was man da so alles kann. Das Beispiel geht in Ordnung - und doch wäre ich mal froh wenn ich die Hauptmechanik auf die Reihe kriege bevor ich anfange mit Größenangaben usw. noch optische Verbesserungen einzuflechten.
Je weniger Buttons ich in CSS zum hantieren habe desto weniger Unfälle bei Änderungen, desto leichter kann ich sagen: „Da und da musste nur das machen und die Farbe wird geändert“. Das ist ja doch mit die Crux - ich kann mich da in höchstform mit Pfiff programmieren, wenn die Kollegen nix finden ist da alles nutzlos.

Auch speziell an Daaron
SelfHTML kenne ich lange genug… Man will mir da was verkaufen was für normale Sites und Pages 100.000-Male passt. Mein Murks der mir stur vom Maschinchen vorgesetzt wird ist alles Andere als Normal. Da muss ich nhemen was ich kriege und bin weniger mit Stylen und schöne Vorwärtsprogrammieren befasst denn dem Umschiffen von Klippen.

Hier gehört sich eben DOCH eine komplette Neuentwicklung in einem MVC-Pattern hin...

Leider darf ich dir all das womit ich mich plage nicht direkt vorführen. Aber ich kann dir sagen: hätte ich zu viel Zeit könnte ich manches Überholte rauswerfen und einen neu Basis bauen. Und das täte ich gar nicht mal ungern (wenn auch ohne Entwicklertools - PAPL schlägt CSS, wenn du verstehst wo Prioritäten sind).

Nennst sich Vendor Lock-In

Ich kann dir nur sagen, dass du da falsch liegst - die Hörner haben wir uns abgestoßen. De Entwickler hat dankend Anpassungen für uns vorgenommen, im Rahmen dessen.

Genau das ist aber mal nötig. Abreißen, neu bauen. Wenn du damit überfordert bist, dann holt euch jemanden, der sowas aus dem Handgelenk schüttelt.

Wenn du Geld und Zeit hast mach das - wir haben das Eine nicht und das Andere nicht. und bevor wir Geld ausgeben testen wir. Was wir haben ist nicht das Non-Plus-Ultra aber besser geht es nicht, realtiv zu den Kosten.
Was die Maschine auswirft ist gegeben. Punkt, Aus, Ende! Damit müssen wir leben. Damit muss ich leben.
Und wenn du das hören willst: ginge es nach uns könnten die 50% oder mehr ihres Codes komplett umbauen um uns wirklich das Leben bezüglich größerer Ärgernisse zu vereinfachen. Und genau das tute ich, genau dafür erfinde ich Erweiterungen die mit den beschränkten Vorgaben das Beste machen.
Den Kram schüttelt nicht mal der Entwickler aus dem Handgelenk! Eher fragen die uns wie wir denn dies und das bitte hingekommen hätten.

Ein <span> kann genauso einen 3D-Effekt haben, wie ein <button> oder <input type="submit"> flach sein kann. Was? Wusstest du nicht?

Sagen wir: ich hätte nun mal eben gern keinen… Totstylen kann ich mich, wenn ich Zeit und Lust hätte. Aber pures Äußeres ist zweitrangig.

Genau das tut man eben nicht. Der gute Designer arbeitet ausschließlich mit "em" und "rem" für Schriftgrößen, Zeilenhöhen, Abstände,... Das so erzeugte Layout ist deutlich flexibler.

Aber diese Quellsoftware tut's nicht - und den Output komplett umschreiben (Recodieren mit eigenen Routinen), was dann von den Kollegen keiner mehr kapiert? Fällt flach.
Ich sags gerne noch mal… Das ist keine schöne Site unter meine Kontrolle, das ist vorgeworfene Kost die ich verdauen muss. Nicht eine Site mit 15 statischen Pages - ein Projekt mit 80 erzeugten und verketteten einzelnen Pages die frisiert werden wollen und noch mal 10 die besondere Funktionen beinhalten. Wieder und immer wieder. Und daaaan - dann kommt da noch dieser und jener Sonderwunsch. Nach meinem Standard sind die (meine) dann mit heißer Nagel gestrickten Lösungen längst nicht gut und ich staune was man mir mit Kusshand ›abkauft‹ wo's noch weit besser ginge.

CN8

…und jetzt ist erst mal Wochenende.

 

[Daaron]

Wie soll <button …> den nicht nichts auslösen wenn die bekloppte SW die dahinter steckt trotzdem drauf reagiert?

Hier ist wohl "HTML für Dummies" angebracht.
<button> tut normalerweise GAR NICHTS, außer man landet in einem Browser mit Referenz-Implementierung (die meisten aktuellen). Bei denen wird implizit type="submit" gesetzt, wenn kein anderer Type gesetzt ist. Was macht man also? Genau, man liest die von mir verlinkte Spezifikation und erhält einen Typ, der explizit NICHTS tut, wenn der Button geklickt wird.

Wenn der Button, trotz diesem Typs, jetzt trotzdem noch etwas tut, dann ist wohl ein JavaScript - Event an jeden Button gebunden. Ja, es MUSS JavaScript sein, anders kann es nicht sein. Nichts sonst beeinflusst den DOM. Das heißt, hier hat jemand totalen Scheiß geschrieben und sollte dafür seinen Kopf verlieren...
Aber selbst dann... Was macht man? Genau, man schreibt etwas eigene JS-Magie, die evtl. unnötig gebundene Events entfernt. SChon macht der Button nix, außer da sein.

Und mit 3D meine ich ebne nun… 3D. Da kann ich a priori auszeichnen (für Tests habe ich da kräftig in den Rahmen- und Farbtopf gegriffen) wie ich will wenn der Browser mit diese ›Schatten‹ aufs Auge drückt.

Das ist kein 3D, das ist auch kein Schatten. Das ist nichts anderes, als... ach halt, das könntest du ja selbst herausfinden, wenn du einfach mal machen würdest, was ich dir schon seit Monaten sage: Rechtsklick -> Element untersuchen. Einen Tip geb ich dir dafür noch mit auf den Weg... Rahmen können nicht nur aus einer 1px breiten Linie bestehen...

Und ich will da auch nichts beschönigen - mir fehlt die Zeit an den Optionen die CSS bietet zu spielen um mir Resultate anzuschauen;

Bullshit. Totaler Bullshit.
Rechtsklick -> Element untersuchen -> Attribut anklicken -> mögliche Werte in Echtzeit ausprobieren.
Das kostet wenige Minuten, die hast du definitiv noch. Es geht definitiv schneller, als wegen jedem Furz hier einen Thread aufzumachen, außerdem lernst du dabei noch ein paar Dinge über...
- Selbständigkeit
- das DOM
- was CSS alles kann
- was Standard-Settings sind

Je weniger Buttons ich in CSS zum hantieren habe desto weniger Unfälle bei Änderungen, desto leichter kann ich sagen: „Da und da musste nur das machen und die Farbe wird geändert“.

Nochmal für dich zum Mitschreiben...
Jedes DOM-Element kann nicht nur EINE CSS-Klasse haben, sondern MEHRERE!

Das heißt: <button class="button button-red button-3d"> -> die Klasse button styled alles allgemein, button-red färbt ihn rot, button-3d gibt ihm einen plastischen Look.

Also was bitte ist einfacher als deinen Kollegen zu sagen: Hier hast du eine Tabelle von CSS-Klassen und was sie in etwa tun. Such dir 2-3 aus und wende sie auf die Elemente an.

SelfHTML kenne ich lange genug… Man will mir da was verkaufen was für normale Sites und Pages 100.000-Male passt. Mein Murks der mir stur vom Maschinchen vorgesetzt wird ist alles Andere als Normal.

Wieder: Bullshit Deluxe
SelfHTML will dir nichts verkaufen, es will dir erklären, wie das DOM funktioniert und wie du CSS verwendest. Das geht sowohl bei allersimpelsten Hello World - Pages als auch bei hochkomplexen CMS/Shopsystemen.

Meinst du nicht, dass ich nicht auch schon mit sehr komplexen und eingeschränkten Basis-Systemen gearbeitet habe? Schreib mal ein Mobile First Responsive Skin für Magento 1.7, dann weißte was du gemacht hast.

Leider darf ich dir all das womit ich mich plage nicht direkt vorführen.

Du könntest mich schlichtweg BEZAHLEN und dir dann meiner professionellen Verschwiegenheit gewiss sein.

Sagen wir: ich hätte nun mal eben gern keinen… Totstylen kann ich mich, wenn ich Zeit und Lust hätte. Aber pures Äußeres ist zweitrangig.

Blöd nur, dass HTML und CSS eben Hand in Hand gehen, und du ein paar elementare Sachen eben tatsächlich wissen & können musst, dazu gehört auch der Pseudo-3D - Effekt, der bei Buttons (und auch <input type="submit"> normal ist.

Aber diese Quellsoftware tut's nicht - und den Output komplett umschreiben (Recodieren mit eigenen Routinen), was dann von den Kollegen keiner mehr kapiert? Fällt flach.

Optik (CSS), Semantik (HTML) und Logik (JS) sollte man auch strikt trennen. Im Endeffekt hat man korrekt gearbeitet, wenn man die Seite in einem Textbrowser wie Lynx immer noch lesen und bedienen kann. Ist dem nicht so: Ran ans Reißbrett.

Für dich heißt das: Höhen- und Breitenangaben stehen in einer CSS-File, nicht als Inline-Code. Du kannst sie also zentral sehr einfach ändern.


Du kannst also entweder weiter den bockig-besserwisserischen Anfänger spielen und zu nix kommen, oder du kannst endlich mal machen, was die Profis dir sagen und alles über den Haufen werfen, was du als unumstößliche Fakten ansiehst. Siehe z.B. "span ist flach, button ist 3d"...

 

[cumulonimbus8]

Jedes DOM-Element kann nicht nur EINE CSS-Klasse haben, sondern MEHRERE!

Vermutlich bin ich gerade eben auf diese Mine getreten.
Meine Knöpfe habe ich nun mit Klassen differenziert. Das kommt so laaangsam dahin wie ich es haben will - mit der blöden Erkenntnis, dass eine globale Klasse nur so wenig Basis bieten kann, dass die Sonderformen so gut wie eine eigene vollständige Klasse sind - das Konzept rennt sich an meinen Zwängen den Schädel ein…

- Selbständigkeit

Keine Zeit…
…zu verschwenden auf der Jagd nach Syntaxmöglichkeiten nach denen man nie fragt weil man nie auf die Idee käme an genau so was zu denken!
Ein simples Buch mit allem was ich an «Kommandos» geben kann würde reichen. Keine Enzyklopädie, kein Tutorial - wie beim Programmiere: Eingabe, Ausgabe, Schleifen, Verzweigungen, Dateifunktion. Mit so was hab ich durchaus selbstständig was gelernt.
Aber heutzutage ist das alles zu viel; hier die eine Buastelle, da die andere - das kann man nicht nicht merken. Aber merken kann man sich wo's steht. Wie die Formelsammlung zum Rauminhalt der Pyramide…

Das für den Moment, aber die Sache kocht immer noch.

CN8

 

[Daaron]

Du kannst aber nicht davon ausgehen, dass das Forum jedes deiner Defizite ausgleicht. Da könnte dein Chef auch gleich direkt im Forum fragen und dich als Mittelsmann ausschließen.
Also ja, du wirst eben DOCH die Enzyklopädie über HTML, CSS und JS lesen müssen, so wie jeder andere Entwickler auch.

 

[cumulonimbus8]

Foren sollten keine Lehrmeister sein sondern bei konkreten kleinen Fragen dem helfen der eben schlicht nicht alles en Detail wissen kann und auch nicht die Zeit dafür hat.
(Gestern: wie organisiert man Ablagen; H07VV oder H05RN, heute: wie kriegt man Datenfehler aus einer Datenstruktur heraus; wie viele Sorgen macht man sich bei Bradyarrhthmie des Alten Herrn, ohne dass einem das erklärt werden müsste - da ist Optik mit CSS unter JS-Kontrolle harmlos; man braucht nur ein wenig Syntax.)


Ein bisschen Off Topic:
Gibt es eine Lösung (ich habe ja hier Bespiele gesehen die in die Richtung gehen) die mir erlaubt Codefenster (optimal mit Syntaxhervorhebung und -kontrolle) mit HTML, JS, CSS offen zu halten (u.U. mehrere) und die auf Knopfdruck die HTML ohne irgendwelches Speichern in eine richtigen Browser und eben nicht einer kleinen Vorschau (mit Scrollen usf.) auslöst?

CN8

 

[Daaron]

Bestenfalls so n Zeug wie jsfiddle.
Aber du kannst alles was HTML/CSS angeht auch direkt im Browser in Echtzeit ändern. Nur JS-Experimente sind begrenzt, aber über die Konsole trotzdem durchaus möglich.

 

[Sithys]

Daaron hat recht. So kommst Du hier nicht weiter.

Ich habe auch so meine Probleme mit HTML5/CSS/PHP, sogar diverse. Bis man da so fundiertes Wissen vorweisen kann wie z.B. Daaron hier dauert es Jahre. Er meint es sicher auch nicht böse, aber ich kann schon verstehen, dass er sich teilweise massiv aufregt darüber, dass er dir bereits gesagt hat: Lies dich ein in das Thema.

Man kann von keinem Forum erwarten, dass es die entstandenen Probleme für einen Löst. Setz dich hin, probier aus, spiel herum. F12, wie bereits erwähnt, FireBug, keine Ahnung, INFORMIER DICH.

Viel Glück auf jeden Fall weiterhin.

Und Daaron... würde mich freuen, wenn du zumindest nicht immer gleich so ausfallend wirst, in den postings habe ich vermutlich 20x das Wort "Bullshit" entdeckt. Jeder Mensch ist eben anders, der eine kann Lesen und der andere kann eben nur schreiben.