Kategorie: Stylesheets

Was kann mit Stylesheets alles dargestellt werden?

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K12

Joomla Logo flat

Joomla Templates sind Vorlagen oder Designs, die auf der Joomla-Plattform verwendet werden. Dies dient zur Gestaltung des Erscheinungsbildes und der Funktionalität einer Website. Ein Joomla Template besteht aus einer Sammlung von Dateien, die das Aussehen und Verhalten der Website steuern, wie z.B. CSS-Dateien, JavaScript-Dateien, PHP-Dateien, Bilder und HTML-Vorlagen.

Ein Joomla Template ermöglicht es Benutzern, das Layout, die Farben, die Schriftarten, das Menü, die Positionen von Modulen und anderen Inhalten auf einer Joomla-Website anzupassen. Templates können entweder von Grund auf neu erstellt oder aus einer Vielzahl von vorgefertigten Vorlagen ausgewählt werden, die auf Joomla-Template-Marktplätzen verfügbar sind.

Joomla Templates sind ein wichtiger Bestandteil der Gestaltung von Websites auf der Joomla-Plattform, da sie die Benutzerfreundlichkeit und das Erscheinungsbild der Website maßgeblich beeinflussen.

Die Erstellung eines Joomla-Templates erfordert ein gewisses Verständnis von HTML, CSS und PHP, sowie Kenntnisse der Joomla-Architektur und der Funktionsweise von Templates.

Es gibt viele weitere Details und Feinheiten, die berücksichtigt werden müssen, um ein qualitativ hochwertiges Template zu erstellen. Es ist ratsam, sich mit der Joomla-Dokumentation und den Entwickler-Communities zu befassen, um weitere Informationen und Unterstützung zu erhalten.

https://www.w3.org/Style/CSS/Overview.de.htm

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px. Der primaere Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

Template – K12

#container{width: 980px; margin:auto;}

Dieses Template ist getestet mit Firefox 4 und dem IE 8/9. Das Topmenue liegt auf “user4”, der banner auf “banner”, der newsflash auf “top”, latestnews auf “user1” und mostread auf “user2” Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet. Auf Grund des Alters dieses Templates müsst ihr die Installationsprozedur (index.php) anpassen.

245 kB

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K17

Joomla Logo flat

Ein Joomla Template ermöglicht es Benutzern, das Layout, die Farben, die Schriftarten, das Menü, die Positionen von Modulen und anderen Inhalten auf einer Joomla-Website anzupassen. Templates können entweder von Grund auf neu erstellt oder aus einer Vielzahl von vorgefertigten Vorlagen ausgewählt werden, die auf Joomla-Template-Marktplätzen verfügbar sind.

https://www.w3.org/Style/CSS/Overview.de.html

Zusammenfassung

Dieses Template besteht aus vier Containern die absolut positioniert werden. Die Breite ist in Prozentwerten angegeben. Dadurch passt sich das Layout an eine veränderte Breite automatisch an. Es ist nur darauf zu achten das Bilder unter Umständen bei geringen Breiten aus den Boxen herauslaufen können. Das Logo und das Topmenue werden ebenfalls absolute über den Containern positioniert. Hierbei ist der Abstand vom rechten Rand als Prozentwert angegeben und “schwimmt” somit mit der Browserbreite mit.

Bei diesem Beispiel muss man ein wenig Rechnen. Die Summe der Breiten ergibt 98%. Der Abstand vom Body-Rand zur ersten Box, plus ihre Breite plus den Abstand ergibt die left-position der nächsten Box. (alles in %).

Wenn Du nun also unterschiedlich breite Boxen oder mehr Abstand möchtest, brauchst Du diese Werte nur gegeneinander zu verschieben.

Weiterlesen “Joomla Template Reihe K17”
Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K08

Joomla Logo flat

Dieses Joomla Template besteht aus vier Containern die absolut positioniert werden. Die Breite ist in Prozentwerten angegeben. Dadurch passt sich das Layout an eine veränderte Breite automatisch an. Es ist nur darauf zu achten das Bilder unter Umständen bei geringen Breiten aus den Boxen herauslaufen können. Das Logo und das Topmenue werden ebenfalls absolute über den Containern positioniert.

Weiterlesen “Joomla Template Reihe K08”
Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K10

Joomla Logo flat

Joomla Templates sind Vorlagen, die das Erscheinungsbild und Layout einer Joomla-Website bestimmen. Sie bestehen aus einer Sammlung von Dateien. Damit wird das Design, die Struktur und das Verhalten einer Joomla-Website beeinflusst.

Im Grunde genommen sind Joomla Templates wie eine Schablone oder ein Rahmen. Dieser Rahmen legt fest, wie eine Joomla-Website aussehen und funktionieren soll. Sie enthalten das Design, die Farben, das Layout, die Schriftarten und Bilder, die auf der Website angezeigt werden sollen.

Es gibt Tausende von kostenlosen und kostenpflichtigen Joomla Templates. Viele verschiedene Designer und Entwickler haben an der Erstellung mitgewirkt. Die meisten Templates sind anpassbar und können von Benutzern bearbeitet werden. Damit kann das Aussehen und die Funktionalität ihrer Website geändert werden.

Im Allgemeinen sollten Joomla Templates so gestaltet sein, dass sie das Erscheinungsbild der Website verbessern und eine bessere Benutzererfahrung bieten. Sie sollten auch mit den neuesten Webstandards und Technologien kompatibel sein, um sicherzustellen, dass die Website auf verschiedenen Geräten und Browsern gut funktioniert.

Das hier vorliegende Template besteht aus zwei Containern die mittels float positioniert werden. Das funktioniert gut, evtl. ist noch Anpassungsbedarf nötig, der ist aber von Fall zu Fall verschieden.

Die Erstellung eines Joomla-Templates erfordert ein gewisses Verständnis von HTML, CSS und PHP, sowie Kenntnisse der Joomla-Architektur und der Funktionsweise von Templates.

Es gibt viele weitere Details und Feinheiten, die berücksichtigt werden müssen, um ein qualitativ hochwertiges Template zu erstellen. Es ist ratsam, sich mit der Joomla-Dokumentation und den Entwickler-Communities zu befassen, um weitere Informationen und Unterstützung zu erhalten.

https://www.w3.org/Style/CSS/Overview.de.htm

Zusammenfassung

Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen. Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px. Der primäre Font ist Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

#container{width: 980px; margin:auto;}

Dieses Template ist getestet mit Firefox 4 und dem IE 8/9. Das Topmenue liegt auf “user4”, der banner auf “banner”, der newsflash auf “top”, latestnews auf “user1” und mostread auf “user2” Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

146 kB

Kategorien
Stylesheets Webentwicklung

How to use CSS property columns

CSS Programming Image

Die Eigenschaft columns ist eine Zusammenfassung der Einzelangaben column-width und column-count. Die Reihenfolge der Einzelangaben ist dabei egal.

Erlaubte Werte sind:

  • Eine oder zwei Angaben zu Breite und Spaltenzahl, in beliebiger Reihenfolge:
    • Mindestbreite: Eine positive Längenangabe oder auto
    • Spaltenzahl: Eine positive, ganze Zahl oder auto

Die Vererbung steuernde Werte:

  • inherit, initial, unset und revertDefaultwert

Für eine nicht erfolgte Angabe wird auto gesetzt.

Anwendung auf:

Elemente, die einen für Multicolumn-Layout zulässigen Block-Container darstellen.

Kategorien
Stylesheets Webentwicklung

Flexible Layouts in HTML mit CSS

Das CSS Flexible Box Layout zeigt neben CSS Grid eine der beiden wesentlichen Möglichkeiten zur Gestaltung von Layouts mit CSS auf.

Im Gegensatz zu älteren Techniken wie Floats wird Flexbox für die Erzeugung von responsiven Layouts bereitgestellt. Es stehen mit flexiblen Layouts sehr eine Vielzahl an Möglichkeiten der Gestaltung zur Verfügung.

Wie funktioniert CSS Flexbox?

Flexbox arbeitet mit einem Container-Element und den darin enthaltenen Child Elementen in der ersten Ebene (Flex-Items). Der Flexboxcontainer wirkt auf eine Ebene. Weitere Ebenen abwärts werden nicht unterstützt.

Bei den Container Elementen kann es sich um <div> Elemente oder auch um Listen handeln. Hier ein Beispiel mit Listenelementen, in der realen Darstellung ist es nicht in Graustufen gehalten..

Flex Layout
Flex Layout

Eigenschaften der Flex-Box

Elemente können mittels der Eigenschaften justify-content, align-items auf den Achsen (vertikal und horizontal) positioniert werden. Die Ausrichtung auf der horizontalen kann mit flex-direction angepasst werden.

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>Flexible Darstellung</title>
	<style>
		ul {
			font-family: sans-serif;
			display: flex;
			justify-content: space-around;	
			margin: 5rem;
			border: 1px solid #BBBBBB;
			background-color: #595873;
			padding: 0px;
			width: 35rem; 
			list-style-type: none;
		}
		li {
			box-sizing: border-box;
			margin: 0px;
			border-right: 0px solid #FFFFFF;
			text-align: center;
		}
		li:last-of-type {
			border-right: none;
		}
		a {
			display: block;
			padding: 1rem;
			background-color: #567482;
			color: #FFFFFF;
			text-decoration: none;
		}
		a:hover, a:focus {
			background-color: #CCCCCC;
			color: #000000;
		}	
	</style>
</head>
<body>
  <nav>
  <ul>
    <li><a href="#" title="Anfang">Anfang</a></li>
    <li><a href="#" title="Beiträge">Beiträge</a></li>
    <li><a href="#" title="Kontaktformular">Kontaktformular</a></li>
    <li><a href="#" title="Impressum">Impressum</a></li>
  </ul>
</nav>
</body>
</html>

Die Eigenschaft display:flex erzeugt die Flexbox generell.

Die weiteren Eingenschaften lauten:

  • flex-direction: row (links nach rechts = Standardwert)
  • flex-direction: column (oben nach unten)
  • flex-direction: row-reverse (rechts nach links)
  • flex-direction: column-reverse (unten nach oben)

Flex Elemente

Neben der Positionierung über den Flex-Container können auch die Items innerhalb des Containers angepasst werden. Entweder mit Hilfe der klassischen CSS-Angaben für Größe und mittels eines Box Models. In der CSS Flexbox dienen die Eigenschaften flex-basis, flex-grow und flex-shrink zur Beeinflussung der Größe. Mit den verschiedenen flex-Werten kann das gewollte Layout innerhalb des Flex Containers erzeugt werden.

Kategorien
Stylesheets Webentwicklung

RGBa – Werte für RGB und Alphakanal

RGBa steht für Red-Green-Blue-alphachannel, also einem Quadrupel aus drei Farbwerten (Rot, Grün und Blau) und einem Transparenzwert (Alphakanal).

Damit stellt es eine Weiterentwicklung des schon bekannten RGB Farbraumes dar und unterscheidet sich im Wesentlichen nur durch den vierten Kanal.

https://www.w3schools.com/css/css_colors_rgb.asp

Kategorien
Stylesheets Webentwicklung

Flash of unstyled content

CSS Programming Image

CSS Unterstützung.

Nicht immer halten die Browser das was versprochen wird. Immer wieder gibt es Probleme (flash) in der Darstellung zwischen den einzelnen Browsern, welche es dem Webdesigner schwer machen sein Projekt umzusetzen. Hier auf diesen Seiten habe ich einige häufige Probleme gesammelt. Natürlich biete ich auch Lösungen an. Konzentriert habe ich mich dabei nicht auf sog. “Hacks” sondern eher auf eine Umgehung bzw. “schöne” Lösung des aufgetretenen Problems.

Weiterlesen “Flash of unstyled content”
Kategorien
Stylesheets Webentwicklung

Multiple Backgrounds in CSS 3

CSS Programming Image

CSS3 erlaubt die Verwendung mehrerer Hintergrundbilder (multiple backgrounds). Dazu werden den entsprechenden CSS-Eigenschaften einfach mehrere durch Kommata von einander getrennte Werte übergeben.

Die Hintergrundgrafiken werden dabei in umgekehrter Reihenfolge, in der sie genannt werden, übereinander gestapelt, also die erste Grafik liegt ganz oben.

Damit man die neue Technik nutzen kann, muss man mehrere URLs, das Attachment und die Position des Bildes in die background– Anweisung schreiben.

id.multiple_backgroung {
	background:url(img1.jpg) no-repeat 0 0,
	url(img2.jpg) no-repeat right bottom,
	url(img3.jpg) no-repeat center center;
  • Zuerst kommt der flächendeckende Verlauf
  • wird die Grafik einer Fliege referenziert, die mittels no-repeat nur einmal angezeigt und links mittig positioniert
  • wird zum Schluss kommt eine Wolke, die mit repeat-x horizontal gekachelt wird.

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund

Kategorien
Stylesheets Webentwicklung

Neue Möglichkeiten mit CSS 3

CSS Programming Image
box-sizing – ein alternatives Box-Modell

Mit der Eigenschaft box-sizing hält ein alternatives Box-Modell Einzug in CSS 3. Dieses soll die oben beschriebene Desginschwäche beseitigen, indem nach Aktivierung durch box-sizing:border-box die Angaben für width als Gesamtbreite interpretiert werden. Innenabstände und Rahmen werden von dieser Gesamtbreite subtrahiert.

Damit kann die Gesamtbreite direkt vorgegeben werden und die effektiv verbleibende Nutzbreite im Innenraum der Box wird vom Browser dynamisch festgelegt. Durch diese Änderungen haben padding und border keinen Einfluss mehr auf die Gesamtbreite einer Box, was den Umgang mit verschiedenen Einheiten und flexiblen Breiten enorm vereinfacht.

Dieses neue Box-Modell stellt keinen Ersatz, sondern lediglich eine Alternative dar. Zwischen dem alten Box-Modell von CSS 1 (box-sizing:content-box) und dem alternativen Modell von CSS 3 (box-sizing:border-box) kann beliebig umgeschaltet werden.

calc() – Rechnen innerhalb von CSS

Der aktuelle Entwurf für CSS 3 enthält noch einen weiteren interessanter Ansatz, dem zu Beginn beschriebenen Designproblem Herr zu werden. Dieser Ansatz sieht vor, dass es in Zukunft möglich sein wird, neben konkreten Größenangaben auch eine Rechenvorschrift zu übergeben. Ein Beispiel für zwei nebeneinander liegende flexible Boxen:

#left {
float:left;
padding: 0 1em;
border-right: 1px #888 dotted
width: calc( 30% - 2*1em - 1px );
}

#right {
float:right;
padding: 0 1em;
width: calc( 70% - 2*1em );
}

Durch die Möglichkeiten der neuen Funktion calc() ist es eigentlich egal, mit ob mit dem alten oder dem neuen Box-Modell gearbeitet wird. Durch die Rechenvorschrift können verschiedene Einheiten beliebig miteinander kombiniert werden. Für der Gestaltung von Boxen mit flexibler Breite steht damit gleich noch ein zweiter Lösungsansatz bereit.

Column – Spaltensatz mit CSS

Noch heute basieren viele Layouts auf Tabellenkonstrukten – dem Gestaltungsmittel der 90er Jahre des letzten Jahrhunderts. CSS 2 sieht keinen Spaltensatz vor und erfordert ein Umdenken des Designers bei der Layoutentwicklung.

Die Schwierigkeiten, die sich aus dieser Entscheidung des W3C ergeben, sind Webdesignern bestens vertraut. Nur sehr langsam haben sich moderne CSS-basierte Layouttechniken entwickelt, die dieses Manko des CSS-Standards mit zunehmend fehlerfreier Unterstützung der Browser vergessen lassen. In CSS 3 wird der allseits beliebte Spaltensatz über die Eigenschaft column nun endlich Einzug in den CSS-Standard finden.

#3col_container {
column-count: 3;
column-gap: 20px;
…
}

Über die Eigenschaften column-count wird die Anzahl der Spalten innerhalb eines Containers festgelegt. Der Wert für column-gap regelt den horizontalen Abstand zwischen den einzeln Spalten. Auf diese Weise wird die effektive Breite der Spalte durch den Browser ermittelt. Der Designer gibt lediglich die Anzahl der gewünschten Spalten vor. In erster Linie eignet sich diese Eigenschaft zur Aufteilung von Texten in mehrere nebeneinander liegende Spalten.

Ob die Flexibilität dieser Eigenschaft jedoch ausreicht, die mittlerweile recht hohen Ansprüche an CSS-basierte Spaltenlayouts zu erfüllen, um die derzeitigen Techniken ersetzen zu können, wird sich erst noch zeigen müssen.

Unabhängig davon können Sie sich auch schon heute ein Bild von den Möglichkeiten des CSS 3-Spaltensatzes machen, wenn Sie den folgenden Links mit dem Firefox Browser folgen, der die Eigenschaft bereits unterstützt.