Css ABC in Contao - Versionsgeschichte

Manitougs: /* Add On's */ Typos

2011-09-04T13:42:50Z

‎Add On's: Typos

Manitougs: Aufbereitung

2011-09-04T13:41:07Z

Aufbereitung

Ciaobello: /* Formatieren der Navigation */

2011-08-08T02:34:20Z

‎Formatieren der Navigation

Ciaobello: /* Formatieren der Navigation */

2011-08-05T14:20:10Z

‎Formatieren der Navigation

Ciaobello: /* Formatieren der Navigation */

2011-08-05T14:15:33Z

‎Formatieren der Navigation

Ciaobello am 5. August 2011 um 14:01 Uhr

2011-08-05T14:01:44Z

Ciaobello am 16. Juli 2011 um 23:43 Uhr

2011-07-16T23:43:55Z

Ciaobello: /* Hilfreiche Erweiterungen um mit CSS zu arbeiten */

2011-07-16T23:41:16Z

‎Hilfreiche Erweiterungen um mit CSS zu arbeiten

Ciaobello: /* CSS Klassen/Selektoren (aus Music Accademy) */

2011-07-13T03:39:27Z

‎CSS Klassen/Selektoren (aus Music Accademy)

Ciaobello: /* CSS Klassen/Selektoren (aus Music Accademy) */

2011-07-13T01:32:05Z

‎CSS Klassen/Selektoren (aus Music Accademy)

Änderungen zeigen

@@ Zeile 15: / Zeile 15: @@
 Tools zum Anzeigen CSS-spezifischer Daten; nach Browser sortiert (Liste unvollständig)
-*Als Erweiterung in Contao (Browserunabhängig)
+*Als Erweiterung in Contao (browserunabhängig)
 **[http://www.contao.org/erweiterungsliste/view/Firebug.10000003.de.html Firebug Erweiterung für Contao]: Mit diesem Modul kann man den abgespeckten Firebug lite in allen Browsern aktivieren.
 *Chrome:
-**Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Str+Shift+I).
+**Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Strg+Shift+I).
 **[https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm Web-Developer]

@@ Zeile 4: / Zeile 4: @@
 =Einleitung=
-Dieses Tutorial soll Contao Einsteigern helfen, Contao spezifische CSS Eigenheiten kennen zu lernen. Auch Hilfsmittel werden vorgestellt die einem das Leben mit CSS erleichtern. Vieles ist aus dem Forum und verschiedenen Contao Webseiten. Jedermann ist eingeladen mit sinvollem zu ergänzen.
+Dieses Tutorial soll Contao Einsteigern helfen, Contao spezifische CSS Eigenheiten kennen zu lernen. Auch Hilfsmittel werden vorgestellt, die einem das Leben mit Contao und CSS erleichtern. Vieles ist aus dem Forum und verschiedenen Contao Webseiten. Jedermann ist eingeladen, diese Anleitung mit nützlichen Tipps und Tricks zu ergänzen.
 =Voraussetzung=
-*Contao Installation (Lokale Testumgebungen: '''Contao2Go''':[[Contao2Go|USB-Stick oder Festplatte]]  '''XAMPP''': [[Xampp_Multidomain|lokale Entwicklungsumgebung mit XAMPP]] ).
+*Contao Installation. Als z.B. lokale Testumgebungen mit [[Contao2Go]] (auf USB-Stick oder portabler Festplatte) oder [[Xampp_Multidomain|XAMPP]] (lokale Entwicklungsumgebung).
 *HTML und CSS Kenntnisse
 =Hilfsmittel=
 ==Add On's==
-Tools zum anzeigen CSS spezifischer daten. Nach Browser sortiert (liste unvollständig)
+Tools zum Anzeigen CSS-spezifischer Daten; nach Browser sortiert (Liste unvollständig)
 *Chrome:
-**Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Str & Shift & I).
+**Firebug gibt es auch schon für Chrome ... aber ein ähnliches Tool ist schon standardmässig dabei (Str+Shift+I).
 **[https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm Web-Developer]
@@ Zeile 25: / Zeile 27: @@
 =Hilfreiche Erweiterungen um mit CSS zu arbeiten=
-*'''CSS Editor''': Damit ein einfaches bearbeiten der oben aufgeführten CSS "Schnipsel/Klassen/Selektoren" in Contao möglich ist, empfiehlt sich die Erweiterung "csseditor" zu installieren.
+*[http://www.contao.org/erweiterungsliste/view/csseditor.de.html CSS Editor]: Mit dieser Erweiterung ist ein einfaches Bearbeiten der CSS-Anweisungen in Contao möglich.
-*'''[[Layout_additional_sources | Layout Additional Sources]]''' ist die Erweiterung mit der man zusätzliche Dateien in ein Layout einfügen kann. Wer gerne seine '''.css und .js''' Dateien mit einem Externen Editor verwendet ist mit dieser Erweiterung auch gut bedient.
+*[[Layout_additional_sources | Layout Additional Sources]]: Mit dieser Erweiterung lassen sich (unter anderem) einfach zusätzliche Dateien in ein Layout einfügen. Wer gerne seine '''.css und .js''' Dateien mit einem externen Editor verwendet, ist mit dieser Erweiterung auch gut bedient.
 ==Wireframes==
-Manchmal hilft es auch, wenn man die einzelnen Bereiche (wrapper, header, header inside etc.) farblich hervorhebt, um zu sehen, bis wo sie eigentlich gehen. Dazu kann mann das aufgeführte Stylesheet ins Seitenlayout einbinden (am besten an letzter Stelle). Wenn mann dann irgendwelche Dummy-Inhalte in den einzelnen Bereichen einbaut, kann mann verfolgen, welche Abmessungen sich wie ändern.
+Manchmal hilft es auch, wenn man die einzelnen Bereiche (wrapper, header, header inside etc.) farblich hervorhebt, um zu sehen, wo sich diese in der Webseite befinden. Dazu kann man das aufgeführte Stylesheet ins Seitenlayout einbinden (am besten an letzter Stelle). Wenn man dann irgendwelche Dummy-Inhalte in den einzelnen Bereichen einbaut, kann man verfolgen, welche Abmessungen sich wie ändern.
 <source lang="css">
 /* Style sheet wireframes */
@@ Zeile 48: / Zeile 50: @@
 ==CSS Klassen/Selektoren (aus Music Accademy)==
-Die Klassen/Selektoren können kopiert und direkt im ''' "csseditor" ''' (Erweiterung) eingefügt werden. Kann als basis für die auf der Accademy basierende Themen verwendet werden.
+Die Klassen/Selektoren können kopiert und direkt im ''' "csseditor" ''' (Erweiterung) eingefügt werden. Kann als Basis für das auf der Beispiel-Webseite ''Music Academy'' basierenden Theme verwendet werden.
 <source lang="css">
@@ Zeile 246: / Zeile 248: @@
 =Beispiele für häufig gestellte Fragen IRC & Forum's=
 ==Formatieren der Navigation==
-'''Unterscheiden des standard Navigationsmenu mit Individueller Navigation:'''
+'''Unterscheiden zwischen dem Standard-Navigationsmenu und einer individuellen Navigation'''
-<source lang="css">'Navigationsmenu' = mod_navigation & 'Individuelle Navigation' = mod_customnav</source>
+<source lang="css">
-'''Formatieren des Hintergrunds bei aktivem Menupunkt'''
+'''Formatieren des aktiven Menupunktes'''
-<source lang="css">#tl_navigation .active {background-color: #ff2424; width: 180px; display: block;}</source>
+<source lang="css">
-{{Anmerkung|<source lang="css">'tl_navigation' = backend;  'mod_navigation' & 'mod_customnav' = frontend</source> im [http://www.contao.org/module.html Contao Online Handbuch] mehr über verschiedene Navigtions Module.}}
+.mod_navigation .active {}
 ==Html in einem Artikel verwenden==

@@ Zeile 251: / Zeile 251: @@
 '''Formatieren des Hintergrunds bei aktivem Menupunkt'''
 <source lang="css">#tl_navigation .active {background-color: #ff2424; width: 180px; display: block;}</source>
-{{Anmerkung|<source lang="css">'tl_navigation' = backend;  'mod_navigation' & 'mod_customnav' = frontend</source>}}
+{{Anmerkung|<source lang="css">'tl_navigation' = backend;  'mod_navigation' & 'mod_customnav' = frontend</source> im [http://www.contao.org/module.html Contao Online Handbuch] mehr über verschiedene Navigtions Module.}}
 ==Html in einem Artikel verwenden==

@@ Zeile 246: / Zeile 246: @@
 =Beispiele für häufig gestellte Fragen IRC & Forum's=
 ==Formatieren der Navigation==
-*'''Unterscheiden des standard Navigationsmenu mit Individueller Navigation:'''
+'''Unterscheiden des standard Navigationsmenu mit Individueller Navigation:'''
-**<source lang="css">'Navigationsmenu' = mod_navigation & 'Individuelle Navigation' = mod_customnav</source>
+<source lang="css">'Navigationsmenu' = mod_navigation & 'Individuelle Navigation' = mod_customnav</source>
-**'''Formatieren des Hintergrunds bei aktivem Menupunkt'''
+'''Formatieren des Hintergrunds bei aktivem Menupunkt'''
-<source>#tl_navigation .active {background-color: #ff2424; width: 180px; display: block;}</source>
+<source lang="css">#tl_navigation .active {background-color: #ff2424; width: 180px; display: block;}</source>
-{{Anmerkung|<source>tl_navigation = backend;  mod_navigation & mod_customnav = frontend</source>}}
+{{Anmerkung|<source lang="css">'tl_navigation' = backend;  'mod_navigation' & 'mod_customnav' = frontend</source>}}
 ==Html in einem Artikel verwenden==

@@ Zeile 247: / Zeile 247: @@
 ==Formatieren der Navigation==
 *'''Unterscheiden des standard Navigationsmenu mit Individueller Navigation:'''
-**Navigationsmenu = <source>mod_navigation</source>
+**'''Formatieren des Hintergrunds bei aktivem Menupunkt'''
-**Individuelle Navigation = <source>mod_customnav</source>
+<source>#tl_navigation .active {background-color: #ff2424; width: 180px; display: block;}</source>
 ==Html in einem Artikel verwenden==
 ==Wie man ein verlinktes Bild im Header einfügt==

@@ Zeile 23: / Zeile 23: @@
 **[http://getfirebug.com/ Firebug]
 **[https://addons.mozilla.org/en-US/firefox/addon/web-developer/ Web-Developer]
 ==Wireframes==
@@ Zeile 237: / Zeile 242: @@
 </source>
 =Beispiele für häufig gestellte Fragen IRC & Forum's=

← Nächstältere Version		Version vom 13. Juli 2011, 03:39 Uhr
Zeile 43:		Zeile 43:

	==CSS Klassen/Selektoren (aus Music Accademy)==		==CSS Klassen/Selektoren (aus Music Accademy)==
		+	Die Klassen/Selektoren können kopiert und direkt im ''' "csseditor" ''' (Erweiterung) eingefügt werden. Kann als basis für die auf der Accademy basierende Themen verwendet werden.

	<source lang="css">		<source lang="css">