Kategorien
Stylesheets

Background-Size CSS Syntax

CSS Programming Image

Allgemein

Background-Size wird zwar von vielen Browsern unterstützt, allerdings hat jedes Programm noch seine eigene Implementierung mit eigener Syntax. Alle folgenden Anweisungen sind nötig, um background-size auf allen Browsern, sofern diese die Technik auch unterstützen, zum Laufen zu bringen.

-moz-background-size:50% 30%; /* Firefox */
-webkit-background-size:50% 30%; /* Safari, Chrome */
background-size:50% 30%; /* Opera, IE*/

Hintergrundbilder lassen sich mit vier Schreibweisen einsetzen: mit Schlüsselwörtern, mit einem Wert, mit zwei Werten und mit der Syntax für mehrere Hintergrundbilder.

.schieberegler { 
   background-image: url(x_test_x.jpg);
   background-size: cover;
}

Bei mehr als einem Hintergrundbild sitzen die Größenangaben in einer kommagetrennten Liste.

background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px; 
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

Browser-Support: Alle modernen Browser (IE ab Version 10).

SVG-Grafik ist besonders gut geeignet als Hintergrundbild, da sich SVG an die Größe anpassen lässt. Ihr müsst ein wenig damit probieren bis ihr das richtige Layout gefunden habt. Viel Erfolg.

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K10

Joomla Logo flat

Template K10

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
Joomla Templates

Joomla Template Reihe K09

Joomla Logo flat

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.0 und dem IE 8.
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.

140 kB

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K08

Joomla Logo flat

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.

Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K01

Joomla Logo flat

Template – K01

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:

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

Als Zusammenfassung kann ich sagen:

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.

112 kB

Kategorien
Joomla Templates

Joomla Template Reihe K02

Joomla Logo flat

Template K02

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 980px.

Der primaere Font ist Tahoma, so ist auch wie bei anderen Vorlagen das Zentrieren des Layouts mittels automatischer Ränder erfolgt:

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

Eine andere Möglichkeit besteht mit einer Flexbox.

#zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}

Dieses Template ist getestet mit Firefox 3 und dem IE 8. 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 template bezogenen Grafiken und Bilder sind wie immer selbst erstellt und bearbeitet worden.

95 kB

Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K03

Joomla Logo flat

Template – K03

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:

#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.

217 kB

Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K04

Joomla Logo flat

Template K04

Dieses Template baut auf DIV-Container auf, besitzt eine feste Breite von 840px. Als primären Font verwende ich Tahoma. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

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

Das funktioniert bei den meisten neueren Browsern, für den IE im Quirks-Modus sollte ein

body {text-align: center;}  

eingefügt werden. Dieses Template ist getestet mit Firefox 3 und dem IE 8. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

28 kB

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K05

Joomla Logo flat

Dieses Template baut auf DIV-Container auf und besitzt eine feste Breite von 920px. Als primaeren Font verwende ich Trebuchet MS. Das Zentrieren des Layouts erfolgt mittels automatischer Ränder:

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

Das funktioniert bei den meisten neueren Browsern, für den IE im Quirks-Modus sollte ein

body{text-align: center;} 

eingefügt werden.

Die Eiganschaft „text-align“ wurde dann im #container wieder angepasst. Dieses Moeglichkeit des Zentrierens verhindert das Verschieben bei geringen Breiten oder Auflösungen, im Vergleich zu einer Zentrierung mit negativen Rändern. Die Farbdarstellung der Ränder erfolgt einmal im #footer mittels border-bottom sowie unter #smallbar mittels border-top. Für Änderungen an der index.php und an der CSS-Datei seid Ihr selbst verantwortlich.

Dieses Template ist getestet mit Firefox 2.0 und dem IE 6 bzw. 7. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

130 kB

Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K07

Joomla Logo flat

Alle Angaben sind fix gesetzt, das sollte aber bei einer Auflösung von 1024 kein Problem darstellen.
Die Container bestehen aus einem Außen- und einen Innen-Container, um mehr Möglichkeiten zur Abgrenzung der Elemente zu erreichen.
Die wichtigsten Änderungen an den CSS Deklarationen sehen wie folgt aus.

Ich habe den oberen Bereich etwas zusammengefasst so das schon in der Startpage mehr Content auf dem Bildschirm zu sehen ist.
Die beiden Bilder in den Bereichen LatestNews und Popular habe ich aus der index.php in die CSS Datei gezogen.
Die CSS Deklaration des rechten Menüs ist nun auch validiert.