Artikel abonnierenCSS: DIV-Element mit 100% Höhe
Manchmal ist es gewollt, dass ein HTML-Element (meistens ein DIV) 100% der Höhe des Browser-Fensters einnehmen soll. Mit einem einfachen height:100%; ist es aber nicht getan. Wie man ein DIV-Element erstellt, dass 100% der Höhe des Browser-Fensters hat aber bei längerem Inhalt mitwächst, und was dabei zu beachten ist, erkläre ich in diesem Artikel.
Fortschrittsbalken mit CSS/JavaScript
Fortschrittsbalken werden vor allem bei Webanwendungen gebraucht, die mit dem Benutzer interagieren, beispielsweise beim Hochladen von Dateien oder um den Fortschritt in einem Formular anzuzeigen. Aber auch bei anderen Webanwendungen können Fortschrittsbalken sinnvoll sein, beispielsweise um den aktuellen Stand eines noch nicht fertiggestellten Projektes anzuzeigen oder den noch verfügbaren Speicherplatz, o.Ä.
In dieser Anleitung erkläre ich wie man einfache Fortschrittsbalken mit CSS erstellen kann, und stelle 4 JavaScript-Skripte vor mit denen sich “bewegliche” Fortschrittsbalken erstellen lassen.
Formulare: Datei-Element umgestalten
Das Formularelement zum Auswählen einer Datei lässt sich nicht mittels CSS umgestalten, der Browser verwendet für dieses Element immer das Standardaussehen, so wie es vom Betriebssystem vorgegeben ist. Bei der Gestaltung von Formularen ist das natürlich ärgerlich, da das Element meistens nicht zum Aussehen der anderen Formularelemente passt.
Shaun Inman beschreibt in seinem Artikel Styling File Inputs with CSS and the DOM eine Methode diesem Element mittels Java Script und CSS trotzdem ein anderes Aussehen zu verpassen. Wie seine Methode funktioniert, und wie man sie noch verbessern/erweitern kann, erkläre ich in diesem Artikel.
Elemente ein- und ausblenden
Wie man HTML-Elemente mittels CSS transparent machen kann habe ich ja bereits in diesem Artikel beschrieben. In diesem Artikel erkläre ich wie man mit JavaScript Elemente ein- und ausblenden kann. Solche Effekte eigenen sich sehr gut zum Beispiel für Bildergalerien, Fehlermeldungen oder dynamisch nachgeladene Inhalte.
Weiterlesen»
Unbenutzte CSS-Selektoren finden mit Dust-Me Selectors
Wenn man nicht mehr benötigte HTML-Elemente entfernt oder CSS-Selektoren durch andere ersetzt kann es passieren das man vergisst die alten bzw. nicht mehr benötigten Selektoren aus der CSS-Datei zu entfernen. So sammeln sich über die Zeit immer mehr Selektoren an die gar nicht mehr benötigt werden und nur unnötig die CSS-Datei aufblähen. Mit der Firefox-Erweiterung Dust-Me Selectors lassen sich solche unbenutzten Selektoren sehr einfach aufspüren.
