Die Redakteuse

Schlagwort: HTML

  • Firefox & seine html.css

    Ich bin gerade dabei meine DITA-HTML-Hilfe zu stylen. Da es lediglich um Aufhübschen ohne große Effekte geht, reaktiviere ich also meine HTML & CSS-Fähigkeiten.

    Eben hat mich aber eine Sache zum Wahnsinn gebracht, von der ich echt überrascht bin, dass ich sie noch nie bemerkt habe. Denn ich habe schon durchaus einige Zeit beim Webseiten-Bauen verbracht und das eigentlich immer nur unter Firefox.

    In meinem Firebug hieß es bei einigen Elementen plötzlich, dass sie ihre CSS-Styles aus einer „html.css“ beziehen würden. Nun hieß meine eingebundene CSS-Datei aber anders! Ich hatte eine solche Datei nie erstellt und auch nie eingebunden! Argh!

    Nun diese Datei repräsentiert anscheinend die Default-Einstellungen des Browsers, d.h. solche Dinge wie Überschriften werden standardmäßig gestylt, was ja auch sehr nützlich sein kann, wenn eine HTML-Seite mal gar nicht „extra“ gestylt ist. Aber irgendwie ist mir in Firebug diese Datei noch nie aufgefallen…

    Extrem hilfreich zu wissen, wenn man mal wieder Webdesign betreibt. Wer mehr wissen möchte, möge bitte hierlang gehen: Undoing html.css

    PS: Ich habe bestimmt noch nicht das tolle Firefox-Addon IETab empfohlen. Damit kann man den Internet Explorer im Firefox verwenden, was absolut genial ist 🙂

  • Firebug – neu entdeckt

    Ich habe ja schon einmal über den Nutzen von Firebug für Screenshots erzählt. Und schon wieder habe ich ein nützliches Feature entdeckt, auf das ich bisher einfach noch nie geklickt hatte, das aber insbesondere für die Webentwicklung extrem praktisch ist. Denn beim Layouten hat man oft das Problem, dass sich die CSS-Definitionen für padding oder margin einzelner Elemente in die Quere kommen und damit das Layout verhunzen.

    Einen schnellen Zugriff auf die Info, welches Element nun welche Werte für padding, margin oder border hat, bekommt man im Layout-Tab rechts unten im Firebug:

    In diesem Tab wird einem auf einen Blick zum aktuell in Firebug angewählten Tag angezeigt, welche Werte ihm für padding, margin oder border zugewiesen sind.

    Beispiel:

    1. Man rufe dieses Blog auf.
    2. Man öffne Firebug.
    3. Man markiere im Firebug folgenden Tag:

    4. Man sieht nun, dass die Navigation den Innenabstand 1 an allen Seiten hat und dass es beispielsweise nach oben hin 210px vom oberen Seitenrand entfernt ist.