Schlagwort: CSS Techniken

Kategorien
Joomla Templates Stylesheets Webentwicklung

Joomla Template Reihe K18

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

Dieses Template wurde für Joomla 1.5 erstellt. Auf Grund des Alters dieses Templates müsst ihr die Installationsprozedur (index.php) anpassen.

Dieses Template unterliegt der GNU/GPL Lizenz.

Ich stelle euch dieses Template kostenfrei zur Verfügung. Dieses Template besteht aus zwei Containern die mittels float positioniert werden.

Weiterlesen “Joomla Template Reihe K18”
Kategorien
Joomla Templates

Joomla Template Reihe K22

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

Zusammenfassung

Dieses Template besteht aus zwei Containern die mittels float positioniert werden.
Die CSS Deklarationen sehen wie folgt aus:

rahmen {
width:980px;
margin: auto;
text-align:left;
}
main {
float:left;
width:790px;
margin-top:10px;
text-align:left;
}
menue {
float:right;
clear:right;
margin:0;
padding:0;
text-align:center;
font-size:12px;
width:186px;
margin-top:10px;
background-color:#4D88FF;
color:#FFFFFF;
border-left:1px solid #E0E0E0;
min-height:400px;
}

Das header-Image ist 800x450px und wird über:

header {        
background:transparent url(../images/header.jpg) 0 0 no-repeat;
height:400px;
color:#FFFFCC;
border-bottom:3px solid #000000;
}

zugewiesen.

Warnhinweis – Diese Seiten benutzen bestimmte CSS-Definitionen, die von älteren Browsern nicht dargestellt werden können.

Getestet habe dieses Template mit SeaMonkey 1.1.2 und dem IE7 (7.0.6000.16448). Anpassungen für andere Browser sind nicht explzit enthalten und auch nicht geplant.

Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

173 kB

Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K16

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

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 heraus laufen 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 K16”
Kategorien
Joomla Templates Webentwicklung

Joomla Template Reihe K03

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 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. Das Template ist etwas älter, demzufolge müsst ihr die Installationsprozedur (index.php) anpassen.

217 kB

Kategorien
Joomla Templates

Joomla Template Reihe K24

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

Zusammenfassung

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 {
margin:auto;
width:980px;
height:100%;
text-align:center;
background-color:#FFFFFF;
}

Dieses Template ist getestet mit Firefox und IE. Das Topmenue liegt auf “user4”, der banner auf “banner”, der newsflash auf “top”, latestnews auf “user1” und mostread auf “user2”.

Screenshot

Die CSS Datei ist beim W3C nach CSS Standard 2.1 validiert. Alle templatebezogenen Grafiken und Bilder sind selbst erstellt und bearbeitet.

167 kB

Kategorien
Stylesheets Webentwicklung

How to use Background-Size

CSS Programming Image

Einleitung

CSS background-size ist eine Eigenschaft, mit der man die Größe von Hintergrundbildern in einem HTML-Element definieren kann.

Die background-size Eigenschaft kann verwendet werden, um die Breite und Höhe des Hintergrundbildes anzupassen, um es entweder vollständig oder teilweise im Hintergrund des Elements anzuzeigen. Es gibt verschiedene Werte, die für die background-size Eigenschaft verwendet werden können:

  1. auto – Der Standardwert. Das Hintergrundbild wird in seiner ursprünglichen Größe angezeigt.
  2. cover – Das Hintergrundbild wird so skaliert, dass es den gesamten Hintergrund des Elements ausfüllt, wobei die Proportionen des Bildes beibehalten werden. Das Bild wird möglicherweise beschnitten, um den Hintergrund vollständig zu füllen.
  3. contain – Ein Hintergrundbild wird so skaliert, dass es vollständig im Hintergrund des Elements angezeigt wird, wobei die Proportionen des Bildes beibehalten werden. Wenn das Bild kleiner als das Element ist, wird es nicht vergrößert, um das gesamte Element auszufüllen.
  4. Prozentangaben – Man kann auch Prozentangaben für die background-size Eigenschaft verwenden, um das Verhältnis von Breite zu Höhe des Hintergrundbildes zu definieren. Zum Beispiel kann man background-size: 50% 50%; verwenden, um das Hintergrundbild auf 50% der Breite und 50% der Höhe des Elements zu skalieren.
  5. Pixelangaben – Man kann auch Pixelangaben für die background-size Eigenschaft verwenden, um die genaue Breite und Höhe des Hintergrundbildes zu definieren.
  6. Weitere spezifische Werte wie “contain-float”, “cover-float” und “auto-fit” für besondere Anforderungen.

Zusätzlich zur background-size Eigenschaft gibt es noch weitere Eigenschaften, die mit Hintergrundbildern in CSS verwendet werden können, wie background-image, background-position und background-repeat. Zusammen können diese Eigenschaften dazu beitragen, den Hintergrund eines HTML-Elements genau nach den Anforderungen zu gestalten.

Unterstützung

Die EIgenschaft 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 Komma getrennten Liste.

1. Beispiel: background-size: 200px;
2. Beispiel: background-size: 200px 100px;
3. Beispiel: background-size: 200px 100px, 400px 200px; 
4. Beispiel: background-size: auto 200px;
5. Beispiel: background-size: 50% 25%;
6. Beispiel: background-size: contain;
7. Beispiel: 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.