Schlagwort-Archive: CSS3

Responsive Webseite bonn-realis.de online gegangen

Unter der Adresse www.bonnrealis.de ist meine erste durchweg responsive Internetseite online gegangen. Die im Rahmen meiner Arbeit als Angestellter der Bundesanstalt für Landwirtschaft und Ernährung entstandene Seite ist eine angepasste Version eines ungebrandeten TYPO3-Setups, mit dem sich individualisierbare, aber ähnliche Webseiten in kurzer Zeit mit überschaubarem Aufwand realisieren lassen (ähnlich eines Themes).

Für die Seite habe ich die CSS3- und HTML5-Templates für TYPO3 vorgegeben.

Die Seite ist reagiert responsiv sowohl auf Änderungen des Browserfensters, als auch Anpassung der Schriftgröße. Außerdem sollte die Seite gut oder sehr gut zugänglich nach BITV-Test sein (Ergebnis steht noch aus).

Design: Veronika Chakraverty
TYPO3-Umsetzung: Sacha Vorbeck
Copyright: Bundesanstalt für Landwirtschaft und Ernährung (BLE)

HTML5 und CSS3: Neue Kurse ab September 2012

Logos der Auszeichnungssprache HTML5 und der Formatierungssprache CSS3
Die offiziellen Logos der Sprachen HTML5 und CSS3

Lernen Sie, wie man Webseiten erstellt von einem Praktiker und Fachbuchautor!

Die Sommerferien sind vorbei und die neue Weiterbildungssaison hat begonnen! Los geht es mit den Anfängerkursen. Hier liegt der Schwerpunkt auf HTML5. Sie erfahren, wie man HTML-Dokumente nach dem neusten Stand der Technik erstellt. Unterrichtet wird an modern ausgestatteten PCs (Windows7) in der Volkshochschule Bonn. Damit die Wege für alle Bonner auf jeden Fall kurz bleiben, finden zwei Anfängerkurse statt: einer in Godesberg und einer in Duisdorf.Der Fortgeschrittenenkurs findet im November statt. Dann liegt der Schwerpunkt auf der Formatierungssprache CSS3, mit der Webseiten gestaltet werden können. Im Anfängerkurs bekommen Sie schon eine ganz kurze Einführung in CSS3, im Fortgeschrittenen-Kurs lernen Sie auch anspruchsvollere Aufgaben Layouts umzusetzen.

Bringen Sie Ihre eigenen Ideen ruhig mit. Wenn irgend möglich werde ich Ihre Gestaltungswünsche und Ideen für Ihre persönliche Homepage berücksichtigen und Ihnen die Techniken zeigen, damit Sie Ihre Webseite so aussehen lassen können, wie Sie es sich vorstellen. HTML5 und CSS3: Neue Kurse ab September 2012 weiterlesen

Der Unterschied zwischen width=“auto“ und width=“100%“

Das CSS-Box-Modell beschreibt, die Dimensionen von Block-Level-Elementen. Neu ist die Möglichkeit mit CSS3 zu bestimmen, ob sich die Breitenangabe auf den Inhalt des Elementes (also zum Beispiel den Text eines Absatzes) oder auf das Element inklusive Innenabstände und Rahmen beziehen soll.
Manchmal ist das sinnvoll, zum Beispiel, wenn man möchte, dass ein Element genauso breit ist, wie sein Elternelement. Nach dem CSS-Box-Modell bezieht sich die Breitenangabe nämlich auf den Inhalt. Rahmen und Innenabstände werden hinzugefügt, so dass zum Beispiel ein Formularfeld mit border und padding nicht mehr ins Elternelement passt. Hier hilft die neue Eigenschaft box-sizing. Mit „box-sizing:border-box; width:100%“ kann man erreichen, dass ein Element genauso breit ist, wie sein Elternelement. Aber das ist nicht immer der beste Weg. Wann immer möglich sollte statt dessen width:auto verwendet werden. Dann muss man sich um margin, padding oder border nicht selber kümmern. Die Details erklärt ein Artikel auf Berea Street (engl.):

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/