Druckbare Version
Hallo liebe Contao User,
ich habe folgendes Problem. Ich habe von der Seite https://themes.contao.org/de/ das Template Healt Navigator gekauft. Meine Inhalteselemente/ Texte habe ich angepasst.
Wenn ich nun die seite vom Handy aus betrachte oder mein Browserfenster verkleinre, wird die Schrift bei schmalen ansichten komplett durchgestrichen.
Könnt ihr mir einen Tipp geben wie ich dieses Verhalten ändern kann?
Liebe Grüße
Cristal
Ohne einen Link zu deiner Seite wird das niemand beantworten können bzw. man kann nur raten.
ich mal wieder...
http://kosmetik-schoenmacherei.de/index.php/home.html
In einem deiner Stylesheets, vermutlich einem der Mediaqueries , wird der Text im body bei einer Seitenbreite von kleiner 765px auf durchgestrichen "text-decoration: line-through;" gesetzt. Das musst du entfernen.
Code:body {
background-color: #dda0dd;
color: #574844;
font: 300 18px/2.6rem "Open Sans",Arial,Verdana,sans-serif;
text-decoration: line-through;
}
Sehr kurios. In der layout.css befindet sich folgender Style:Das text-decoration:line-through; gehört natürlich weg. Warum das aber nur unter 768px passiert habe ich partout auch nicht herausgefunden.PHP-Code:body {
background-color:#DDA0DD;
font:18px "Open Sans",Arial,Verdana, sans-serif;
text-decoration:line-through;
color:#574844;
font-weight: 300;
line-height: 2.6rem;
}
@spooky
Wie kannst du die CSS Files unterscheiden? Firebug zeigt mir nur das Zusammengefasste.
Warum benutzt du Firebug? ;) Nimm die Developer Tools.Zitat:
Zitat von Kahmoon
Davon abgesehen habe ich das direkt hier analysiert.
*Facepalm*
Ist mir noch nie aufgefallen dass das jeweile CSS File als Kommentar drin steht :D
Firebug versteckt die vor dir.Zitat:
Zitat von Kahmoon
Mir sind keine Vorteile von Firebug gegenüber den reuglären Developer Tools bekannt, nur Nachteile.
Aber ein Element untersuchen muss ich ja mit Firebug oder andernfalls Chrome Webmaster Tools
Nein, außer du verwendest uralte Browser. In allen aktuellen Browsern geht das mit "Rechtsklick - Element untersuchen" (genauer Name des Kontext-Menüpunktes unterscheidet sich evt. von Browser zu Browser).Zitat:
Zitat von Kahmoon
Nein, das CSS rechts in dem HTML-Tab ist genauso aufbereitet wie der DOM auf der linken Seite. Links siehst du nicht den HTML-Quelltext und rechts nicht die CSS-Datei. Die CSS-Datei siehst du im Tab CSS, einmal aufbereitet und bei Klick auf "Bearbeiten" den echten Quelltext der CSS.Zitat:
Zitat von Kahmoon
Wie oben bereits erwähnt, versteckt Firebug da nichts, es ist nur etwas anders angeordnet als in den Dev-Tools.Zitat:
Zitat von Spooky
Firebug hat ein paar Optionen, welche die Dev-Tools noch nicht haben:
- Die Javascriptumgebung direkt in der Console
- Clearen der Console vor Ausführung des mehrzeiligen JS-Codes mit clear()
- Kommentare im DOM ausblendbar
- Textknoten im DOM kompl. anzeigbar (optional)
- Kompleter Ast im DOM auf- und zuklappbar mit Shortcut STRG+*
- Filterfunktionen (z.B. im Netzwerk) haben eine show-only-Logik und keine show-auch-Logik
- Die Dev-Tools verstecken das CSS von Stylish, obwohl es auf der Seite greift
Die sind mir gerade spontan eingefallen.
Andere Software hat eben auch andere Möglichkeiten. Wenn man zu viele altgewohnte Möglichkeiten in einer neuen Software vermisst, fällt der Umstieg nicht gerade einfach.
Allerdings haben sich die Dev-Tools im FF ganz schön weiterentwickelt und sind auch richtig gut geworden, in einigen Bereichen wahrscheinlich auch besser als Firebug.
Was genau meinst du damit? In der JavaScript Konsole hast du auch ohne Firebug die JavaScript 'Umgebung'.Zitat:
Zitat von Andreas
Das ist eine reguläre JavaScript Funktion, die gibt es daher in jeder JavaScript Konsole.Zitat:
Zitat von Andreas
In den FireFox Developer Tools navigiert man durch den DOM bspw. mit den Pfeiltasten.Zitat:
Zitat von Andreas
Was genau meinst du damit?Zitat:
Zitat von Andreas
1. Die JS-Umgebung öffnet sich in einem neuen Fenster. Man kann sie nicht ins Window integrieren und auch nicht auf immer im Vordergrund stellen.
2. In den Dev-Tools funktioniert das (console.)clear() nur in dieser einzeiligen Commandline unterhalb der Log-Ausgabe der Console. Da kann man zwar auch mehrzeilig coden, aber mit Enter wird der Code ausgeführt und verschwindet. Ist dann nur noch über die History wieder hervorholbar. Wenn ich also mehrzeilig coden möchte, dann muss ich die JS-Umgebung aufrufen. Und dort funktioniert dann das clear() nicht.
Im Firebug hingegen kann ich rechts neben der Logausgabe mehrzeilig coden integriert ins Window mit funktionierendem (console.)clear().
3. Ja, ich weiß das mit den Pfeiltasten, aber wenn ich einen Ast komplett aufklappen möchte, kann ich das nur über Kontext "Alle erweitern". Außerdem bin ich auch noch gewohnt mit Doppelklick auf einen Knoten diesen aufzuklappen, mit den Dev-Tools geht das nicht, da muss ich diesen kleinen Pfeil treffen, wenn ich mit der Maus arbeiten möchte.
4. Z.B. im Tab Netzwerk, hast du die Filter Alles, HTML, CSS, JS.... Wenn das jetzt auf Alles steht und ich möchte nach CSS filtern, klicke ich auf CSS und sehe nur CSS. Wenn ich dann nur JS sehen will, klicke ich auf JS, ich sehe dann auch JS, aber zusammen mit CSS. Ich muss dann nochmal auf CSS klicken um CSS wieder zu verstecken. Mit show-only meinte ich, dass man bei Klick dann only CSS, JS usw. sieht, so wie im Firebug. Mit show-auch meinte ich das wie es in den Dev-Tools ist, wenn ich da z.B. nach JS filtere, sehe ich nicht nur JS, sondern auch noch andere aktivierte Kategorien.
Versteh mich nicht falsch, ich finde die Dev-Tools sind mittlerweile nach all den Jahren wirklich gut gelungen, aber da du hier immer wieder den Leuten erzählst, sie sollen Firebug deinstallieren, muss ich den mal ein wenig in Schutz nehmen. Wer gewohnt ist damit zu arbeiten, kann einige Sachen etwas komfortabler erledigen als mit den Dev-Tools. Und ich finde auch für Einsteiger ist FB besser zu verstehen. Ich selber versuche jetzt nur noch mit den Dev-Tools zu arbeiten, einfach um mir ein Addon zu sparen. Aber hin und wieder aktiviere ich dann doch wieder Firebug.
Ich arbeite seit einiger Zeit auch fast nur noch mit den dev-tools. Es gab aber Situationen, da habe ich den Firebug oder die Webdeveloper Tools genutzt. Einfach weil ich dort genau wusste, wo ich die gerade gesuchte Funktionalität finde. Das heißt aber nicht, dass diese bei den dev-Tools nicht da ist. Ist halt viel Gewöhnung bei der Nutzung von Werkzeug dabei. Den Firebug habe ich jetzt nach einem Rechnertausch erstmalig nicht mehr parallel installiert.
@Andreas: was meinst du mit "JS-Umgebung"?
Mehrzeilig Coden kann man in allen Developer-Tools, ja.
Wo ist da jetzt der Vorteil bei Firebug? ;)Zitat:
Zitat von Andreas
Die Dev-Tools haben einen Button "JavaScript-Umgebung".Zitat:
Zitat von Spooky
Dann bräuchte ich eine Anleitung, wie man in der Konsole mehrzeilig programmiert. Wenn du z.B. das hier
in die Zeile ganz unten in der Konsole einträgst, dann wird der Code, wenn du Enter drückst, ausgeführt und verschwindet dann wieder. Ich kann sie erst wieder sehen, wenn ich die Pfeil-nach-oben-Taste drücke. Wenn ich den Code dann nochmal ausführe, wird die Log-Ausgabe nicht geleert. Wenn ich anstatt console.clear() nur clear() benutze, dann wird das Log-Fenster geleert, aber der 2. Befehl console.log('test') wird nicht ausgeführt bzw. es ist nichts in der Konsole zu sehen.Code:console.clear();
console.log('test');
Von welchem Browser genau und wo genau? Finde den momentan nicht, zumindest im FireFox.Zitat:
Zitat von Andreas
Mit Shift+Enter.Zitat:
Zitat von Andreas
Er "verschwindet" ja nicht - er wird einfach ausgeführt und du kannst dann, wenn du es wieder brauchst, über die History wieder aufrufen, oder aus der Console kopieren. Im IE11/Edge "verschwindet" der Code übrigens nicht.Zitat:
Zitat von Andreas
Falls du das im Firefox machst: dort gibt es console.clear() nicht. Daher passiert auch nichts.Zitat:
Zitat von Andreas
Dürfte wohl eine Eigenheit bzw. Bug von Firefox sein. Im Chrome oder IE11 (letzeres mit console.clear()) ginge das.Zitat:
Zitat von Andreas
Es ging immer nur um die Dev-Tools im Firefox, wegen Vergleich mit Firebug.
JS-Umgebung ist hier der 4. Button von links. Anhang 17670
Shift-Enter in der Kommandozeile weiß ich, aber das Verhalten im Firebug finde ich einfach besser. Du hast dort direkt eine immer sichtbare mehrzeilige Kommandozeile, welche sich auch nicht nach der Ausführung leert. Dass ich den Code mit den Pfleiltasten über die History wieder sichtbar machen kann, hatte ich ja erwähnt.
Übrigens kann ich mit Firebug im Firefox in dieser mehrzeiligen Kommandozeile die Logausgabe sowohl mit clear() als auch mit console.clear() leeren. Scheint es also doch in Firefox zu geben. Deswegen hatte ich mir angewöhnt vor meinen Code in die erste Zeile immer clear(); zu schreiben.
Übrigens will ich nicht sagen, dass der Firebug perfekt ist. Gerade die Kommandozeile im FB könnte noch ein paar Feature gebrauchen, z.b. Scripts zu speichern. Und der Text in dieser Zeile lässt sich auch gerade mit der Maus irgendwie seltsam handhaben.
Welche groben Nachteile siehst du denn im Firebug, dass du immer wieder empfiehlst ihn zu deinstallieren und nur noch die Dev-Tools zu benutzen?
Achso, du meinst das JavaScript Scratchpad. Da kann ich leider nichts dazu sagen, damit habe ich noch nie gearbeitet.Zitat:
Zitat von Andreas
Meiner Erfahrung nach ist er vergleichsweise langsam und er versteckt bei default Kommentare in CSS Dateien, was es manchen Leuten in der Vergangenheit schwierig gemacht hat herauszufinden, welche Styles aus welchen internen Stylesheets kommen (ein Umstand der aber sowieso nicht mehr so wichtig ist). Aber vielleicht hat sich da ja auch etwas bei Firebug getan.Zitat:
Zitat von Andreas
Die Möglichkeiten das originale CSS mit Kommentaren zu sehen gab es schon immer. Hier mal 2 davon.
Anhang 17672
Anhang 17671
Mir ging es um den Fall im ersten Screenshot. Also um folgenden Workflow: Rechtsklick auf ein Element » Inspect Element with Firebug » Im Style Tab auf die Datei und Zeilenangabe eines Selektors klicken. Dort siehst du die Kommentare nicht. Nur wenn du oben dann auf "Source edit" klickst - aber dann bist du nicht mehr in der Zeile wo sich der Selektor befindet. Dort sieht man dann einfach nur den Quellcode der jeweligen CSS Datei.
Ja, das ist ein etwas anderer Ansatz. Ich brauche das eigentlich nie, mir reicht es, dass ich da im HTML-Tab rechts experimentieren kann und dann den Namen der Quelldatei mit Zeilennummer sehe, da ich meine Dateien ja im Editor geöffnet habe.