Wieder mal global

[struggle]

Wie ich "global" entferne, und jeder aktuellen Seite im Menü eine farbliche Hervorhebung verpasse, ist mir bekannt und hier noch mal beschrieben:

Hervorhebung der aktiven Seite im Textmenü durch rote Farbe (#ea2744)

Auf der jeweils aktiven Seite,zunächst den Tag global aus der Kopfzeile entfernt.

HTML vorher:
<a class="nav-link link text-warning" href="page1.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" >PROJEKT</a>

Durch Anweisung ersetzt:
<a class="nav-link link text-warning" href="index.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" style="color: red!important;">PROJEKT</a>

Nun ist mein Problem, daß ich im HTML plötzlich an einigen Stellen was ganz anderes lese:

Das grau hinterlegte ist mir bekannt, das rot umrandete ist mir neu.

Warum werden hier Unterschiede gemacht und wie gehe ich mit dem Einfügen der Anweisung dort um ?

Dankeschön im Voraus

[Werner-Zenk.de]

Durch Anweisung ersetzt:
<a class="nav-link link text-warning" href="index.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" style="color: red!important;">PROJEKT</a>

Auf jeden Fall ist dieses !important direkt am HTML-Tag grober Unfug!
Und dass man trotz der zahlreich gesetzten CSS-Klassen immer noch ein style-Attribut setzen muss, ist zum

[struggle]

Hallo Werner,
kannst Du bitte jemanden, der sich nicht auskennt, ganz kurz erklären, was Du meinst ? Ich bitte um Nachsicht !

[Tommy Herrmann]

Moin,

Werner meint wohl, dass die zusätzliche CSS-Eigenschaft !important (wichtig) im HTML-Code selbst eigentlich nichts zu suchen hat. Warum weiß ich allerdings auch nicht, denn nur mit !important kann man auch an dieser Stelle (inline) eine bereits zuvor mit !impoartant markierte Eigenschaft überschreiben.

Gucke mal hier, bei diesen Beispielen wird das klarer:

https://www.w3schools.com/css/css_important.asp

Hier kann man auch testen (hier am untersten <p> Tag), dass mit einem Inline-Style ohne !important nichts passiert, wenn ich die Hintergrundfarbe auf Gelb umschreibe:

... mit !important wird dagegen die Hintergrundfarbe tatsächlich auch gelb überschrieben:

Insofern verstehe ich die Bemerkung grober Unfug von Werner gerade auch nicht. Das wäre schön, wenn Werner nochmals erklärt, was er damit genau meint.



Man verwendet diese Eigenschaft z.B., wenn es die gleiche Anweisung schon irgendwo zuvor gibt und diese bereits mit !important markiert ist, was in Mobirise recht häufig der Fall ist, weil das per Default so gesetzt wurde. Nur ein weiteres !important überschreibt dann eine so markierte und bereits gesetzte CSS-Anweisung, an die man ja auch bei Mobirise meist nicht ran kommt, weil das vom Programm her so gestaltet und vorgegeben ist. Da bleibt einem dann also nur das Überschreiben übrig.

Beispiel:

In einer CSS-Datei (meinetwegen in den riesen Dateien von "Bootstrap") steht:

Code: Alles auswählen

p {
  color: black !important;
}

... und Du schreibst jetzt, weil Du die Farbe Rot möchtest, in Deinen CSS-Editor:

Code: Alles auswählen

p {
  color: red;
}

... würde die Farbe vom <p> Tag dennoch schwarz bleiben. Du könntest diese daher nur überschreiben, indem Du nochmals das !important setzt:

Code: Alles auswählen

p {
  color: red !important;
}

Wurde allerdings zuvor kein !important gesetzt, so muss man eine CSS-Eigenschaft auch nicht mit !important überschreiben, sondern kann das weglassen.




@Werner, man muss auch nicht das Style-Attribut setzen, man könnte ebenso diese Anweisung in die CSS-Datei schreiben, also bei Mobirise dann in den "CSS Editor" und dann eine Class dort eintragen. Manchmal geht das aber einfacher und schneller als erst eine Class zu gründen und es ist ja auch nicht falsch, zumal ganz viele CSS-Klassen von "Bootstrap" und auch von "Mobirise" eben die zusätzliche Eigenschaft !important per Default tragen und man sich immer wieder wundert und eben immer wieder darauf reinfällt, warum die selbst gesetzte Klasse nicht wirkt.

Nur bei dem Webseiten-Format "AMP" (Accelerated Mobile Pages) ist eine Style-Anweisung zwingend notwendig, denn dort werden keine CSS-Dateien zugelassen weil Style-Anweisungen schneller gelesen werden können. Die Eigenschaft !important ist bei "AMP" allerdings nicht erlaubt. "AMP" wurde aber von Google und auch von Mobirise wieder fallen gelassen.




Das CSS-Attribut:

aria-expanded="false"

dient in diesem Fall dazu, dass die Ausklapp-Navi (Dropdown) nach der Bearbeitung nicht offen stehen bleibt.

So wird sichergestellt, dass die ausgeklappte Menüleiste sich nach dem Bearbeiten in Mobirise auch wieder schließt - was dennoch nicht immer und bei allen Menüleisten klappt, da dieses CSS-Attribut veraltet ist und eigentlich nicht mehr verwendet werden sollte.

https://developer.mozilla.org/en-US/doc ... a-expanded

[Werner-Zenk.de]

Es ist einfach falsch überall !important zu setzen, um seine gewünschten Style zu erreichen, Beispiel:

Code: Alles auswählen

In der externen CSS:
p {
  color: red !important;
}

Innerhalb der Datei:
<style>
p {
  color: blue !important;
}
</style>

Und am HTML-Tag:
<p style="color: green !important">Test</p>

In CSS gibt es die Regel, dass zuerst die Angabe in der externen Datei greift, dann die Angabe innerhalb der Datei und die oberste Angabe beim HTML-Tag.

Und das es einfacher ist, "erst eine Class zu gründen" stimmt nicht,
es sind da bereits genug Klassen definiert, anstatt Bootstrab: .text-warning könnte man auch .text-danger verwenden oder die Klasse innerhalb der Datei überschreiben.

[Tommy Herrmann]

Moin Werner,

danke für die Erklärung

Ja klar, überall - ohne Sinn und Verstand - !important zu setzen ist quatsch.

Hier hat er aber das Problem, dass Mobirise in einer Navi bei fast allen Themen selbst bereits ein !important setzt (warum auch immer - ich finde das auch merkwürdig - und man nur so die Farbe tatsächlich seinen Bedürfnissen anpassen kann.

Auch die vorhandenen Bootstrap-Klassen wie "danger" funktionieren dann ja nicht, da diese die !important Anweisung auch nicht überschreiben. Außerdem sind das dann nicht unbedingt die Farben, die man selbst haben will, weil man ein bestimmtes Farb-Konzept in seiner Seite verfolgt - mal abgesehen davon, dass Mobirise Bootstrap-Klassen wie z.B. "danger", je nach verwendeten Mobirise-Thema, in ganz andere Farben umsetzt.

[Werner-Zenk.de]

Aus den Fehlern von NOF wurde nichts gelernt:

<table id="Tabelle21" border="1" cellspacing="2" cellpadding="2" width="100%" style="height: 90px;">
<tr style="height: 127px;">
<td valign="top" width="91" id="Zelle557">
<p style="margin-bottom: 0px;"><b><span style="font-weight: bold;">NOF 2015<br>
NOF 2013<br>NOF 12<span style="font-size: 10pt;"><br></span>NOF 11<br>NOF 10<br>
<span style="font-size: 10pt;">ab<br>Update 4</span></span></b></p>
</td>

Mit Inline-Style-Angaben wird genauso weitergemacht

[Tommy Herrmann]

... das hat aber das Programm "NOF" so generiert - als "Winning Software of the Century"

... und nicht ein unwissender User

[Volker]

Naja, wenn man bedenkt das es HTML bereits seit 1989 gibt und CSS erst 1996 Einzug in HTML Seiten erhielt, kann man natürlich auf die Idee kommen Style Anweisungen im HTML unterzubringen

[Tommy Herrmann]

Moin,

nun- beides ist ja nun gleichermaßen CSS.

Natürlich ist Werners Bemerkung vollkommen richtig und man sollte Inline-Style nur in Ausnahmefällen anwenden, denn so angebracht ist das ja total unflexibel und dafür gibt es ja CSS-Klassen, damit diese eben immer wieder flexibel angewendet werden können.

Das alte NOF hat das tatsächlich vollkommen falsch und sehr häufig an die HTML-Tags geschrieben, insbesondere bei den alten Tabellen-Layouts - warum - weiß ich auch nicht, das hatte wahrscheinlich noch mit den uralten Programmen von NOF zu tun, die keiner umschreiben wollte oder konnte oder es dem Inhaber Steve schlicht zu teuer war.

So etwas sollte man natürlich nicht als Beispiel nehmen - also grundsätzlich gehören da eigentlich CSS-Klassen hin.


Aber ...

damit Reinhard nun nicht restlos verunsichert wird, möchte ich meine Vorschlag zu der Inline-Anwendung eben für diesen Ausnahmefall verteidigen und auch begründen.

1) Es sollte die von Mobirise globale Menüleiste (Navi) insofern geändert werden, dass diese nicht mehr global ist, sodass die jeweils aktive Seite in der Navi rot unterlegt erscheint:

https://www.meinlangengrassau.de/

Diese Option hat Mobirise nicht vorgesehen und so musste Reinhard, entsprechend meiner Anweisung, in den Mobirise-Code eingreifen und das Attribut "global" händisch entfernen.

2) Daher muss nun auch auf jeder einzelnen seiner vielleicht 20 Seiten, die entsprechende Style-Anweisung an die jeweils aktive Seite geschrieben werden - also meinetwegen 20 Mal.

3) Ich hatte - zunächst nur zum Testen - daher eine Inline-Style-Anweisung vorgeschlagen.

>>> Warum habe ich das getan?

> weil das in erster Linie für Reinhard viel verständlicher erscheint, als wenn ich gleich mit CSS-Klassen angefangen hätte und weil er diese Inline-Anweisung sowieso auf jeder Seite an den jeweils aktiven Link neu ran schreiben muss, was er mit einer Class ebenso hätten machen müssen.

> weil Reinhard einen veralten "Code Editor" hat, bei dem es noch keine Möglichkeit für eine globale CSS gibt. Daher hätte Reinhard dann seine Class ebenfalls 20 Mal auf jeder Seite eintragen (gründen) müssen, was ebenso unsinnig wäre.

Insofern halte ich die jetzige Lösung für vollkommen legitim, begründet und in seinem speziellen Fall auch für angebracht, denn das ist wirklich ein Ausnahmefall.

[struggle]

Und jetzt mal zur praktischen Seite, die Anweisung habe ich einmal kopiert und dann nacheinander eingefügt. Der ganze Vorgang hat nicht länger als 20 Minuten gedauert, ich halte das für vertretbar. Ich möchte mich hier insbesondere bei Tommy bedanken, weil ich auch weiß, daß er selbst nicht unbedingt von meinen Bemühungen dazu überzeugt ist.

[Tommy Herrmann]

... wer Lust hat, kann auch das mal lesen. Dort ist das mit den unterschiedlichen Möglichkeiten CSS anzuwenden etwas erklärt:

https://www.mediaevent.de/css/css-einbinden.html

[struggle]

CSS ist schon eine feine Sache.

Meine Homepage habe ich noch mal überarbeitet, global rausgenommen, Textfarbe angepasst und alles verlinkt.

Aktuelle Farbe funktioniert, Hoover funktioniert, jedoch passiert jetzt folgendes (war vorher nicht da):
Wenn ich mit der Maus einen Menüpunkt überfahre, ändert er diese von weiss auf grau. Das passiert nicht überall. Kriegt man das weg ?
Am Pinsel oder in den "Blockeinstellungen" habe ich nichts gefunden.

https://www.meinlangengrassau.de

[Tommy Herrmann]

Moin,

kannst Du mal ganz genau sagen wo - die Navi wird doch in diesem Rot markiert

#db6400;

... wo wird es grau?

Oder meinst Du, wenn man die Maus an einem offenen Dropdown weg bewegt? In dem Moment, wo sich das Dropdown schließt, bzw. man den Hintergrund klickt, wird es wieder weiß. Das ist bei Mobirise immer so. Da ist wahrscheinlich ein a:focus definiert.

Das könnte diese Anweisung sein, also dieses Grau:

color: #b3b3b3;

Code: Alles auswählen

a.text-white:hover,
a.text-white:focus {
  color: #b3b3b3 !important;
}

Schreibe doch mal bei dem Block mit der Navi in den Bereich "CSS Editor" das so unten mit rein, also umsetzen in weiß:

color: #ffffff;

Code: Alles auswählen

a.text-white:hover,
a.text-white:focus {
  color: #ffffff !important;
}

Vergiss nicht den Browser-Cache zu erneuern mit der Tastenkombi:

Strg + Fn + F5

Wenn es das sein sollte und Du es ändern möchtest, dann musst Du das nun wieder auf allen Seiten tun, weil ja die Navi nicht mehr "global" ist.

[Tommy Herrmann]

Tipp:

Bei Deinem Formular (in Werners Script) fehlt unten eine Bootstrap-Class, sodass der Button "Formular absenden" auch wie ein Button und nicht wie ein Text aussieht:

https://www.meinlangengrassau.de/kontakt.html


<input type='submit' name='submit' value='Formular absenden' class='btn' tabindex='7'>

... ändere das und schreibe z.B. noch die class="btn-primary" hinzu:

<input type='submit' name='submit' value='Formular absenden' class='btn btn-primary' tabindex='7'>

Dann würde es so aussehen:

... oder so mit der class="btn-light":

Lies auch zu diesen Bootstrap-Klassen hier:

https://getbootstrap.com/docs/4.0/components/buttons/

[struggle]

Hallo Tommy,

ja, es ist dieses grau, und ja, es sind die Dropdowns. Das passiert aber schon, wenn ich mit der Maus drüber fahre, OHNE daß sie geöffnet sind. Sobald ich dann woanders drüber fahre (ohne klick) werden sie wieder weiss.

Daann werde ich in der CSS aus grau weiss machen !

Und Werners Fomular erhält noch einen Button !

Dankeschön

[Tommy Herrmann]

... na deswegen wird ja auch nicht nur "focus" sondern auch "hover" (Mausüber) in der Class angesprochen.