Schlagwort: CSS

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.

Kategorien
Webentwicklung

Was man über Super HTML 8.5 wissen muss

html code beispiel

SuperHTML Web Studio 8.5 ist ein professioneller, deutschsprachiger HTML/Webeditor. Er ist unter anderem zur Erstellung von Homepages, Webseiten, Webanwendungen und CMS-Templates geeignet.

SuperHTML Web Studio ist in erster Linie ein Code-basierter Editor, der volle Kontrolle über den Quellcode und maximale Flexibilität und Präzision bietet. Speziell für HTML-Dokumente steht aber auch ein bequemer WYSIWYG-Modus zur Verfügung, der besonders für Anfänger mit wenig HTML-Kenntnissen geeignet ist.

Das Programm unterstützt alle gängigen Sprachen aus dem Webumfeld wie HTML, XHTML, XML, CSS, JavaScript, PHP, Perl, Ruby, WML u.v.m. und ist damit ein unverzichtbares Werkzeug für jeden professionellen Webentwickler. Weiterhin ist SuperHTML Web Studio vollständig Unicode-fähig und kann Dokumente für alle Zeichensätze und Sprachen bearbeiten und erstellen (ANSI, UTF-8 und UTF-16).

Features in Super HTML Web Studio 8.5

Verbesserte Windows Vista-Unterstützung

Auch Windows Vista wird nun vollständig von SuperHTML Web Studio unterstützt. Unter Windows XP, Windows 2000 und Windows 98/ME lässt sich die Anwendung ebenfalls nach wie vor problemlos einsetzen.

Office 2007 Look & Feel

Mit der neuen Benutzeroberfläche im Office 2007 Stil (mit Multifunktionsleiste) erreichen Sie nun noch schneller mit weniger Klicks alle Funktionen. Und wer von dieser neuen Form der Benutzerschnittstelle noch nicht überzeugt ist, kann alternativ weiterhin die klassische Darstellung mit Menüs und Symbolleisten verwenden, die natürlich komplett Benutzer-anpassbar ist!

Projektverwaltung

Endlich verfügt SuperHTML nun auch über eine Projektverwaltung. Mit der Projektverwaltung lassen sich nicht nur alle Dateien, die zu einem Projekt gehören, einfach verwalten und schneller zugreifen, sondern auch Projekt-spezifische Einstellungen wie z.B. (S)FTP-Profil, Aufgabenlisten oder Offline-Includes-Optionen zusammen speichern.

Verzeichnis-weites Suchen in Dateien

Mit dem neuen, leistungsfähigen Suchassistenten lassen sich beliebige Wörter oder Texte in Dateien bestimmter Verzeichnisse suchen. Dabei können zusätzlich auch bereits im Editor geöffnete Dateien miteinbezogen werden.

Unterstützung der aktuellen Version von Tidy.exe

Das Tool Tidy.exe hat sich zum de facto Standard für Syntax-Ãœberprüfung und Code-Validierung bzw. Reparatur und Aufbereitung von (X)HTML/XML-Code etabliert. Während SuperHTML Web Studio 8.0 nur die proprietäre Tidy-Lib von 2003 unterstützt hat, arbeitet die neue Version nun direkt mit Tidy.exe zusammen.

So kann dieses Tool auch zukünftig leicht aktualisiert werden. Natürlich kann SuperHTML Web Studio auch beliebige Tidy-Konfigurations-Dateien laden bzw. Ihre Konfigurationen zur späteren Verwendung speichern.

Drag & Drop zwischen (S)FTP/SSH-Client und dem Windows Explorer / Arbeitsplatz

Lokale Dateien aus beliebigen Windows-Explorer bzw. Arbeitsplatzfenstern lassen sich nun per Drag & Drop auf den (S)FTP-Server kopieren. Der umgekehrte Weg funktioniert natürlich genauso. Somit brauchen Sie wirklich kein externes (S)FTP-Programm mehr.

Neue Syntax-Highlighting-Schemes

Neben den zahlreichen Syntax-Highlighting-Schemes für viele Websprachen gibt es nun auch Syntax-Schemes für Ruby, Rails und Apache-Konfigurationsdateien. Natürlich können Sie auch Ihre eigenen Syntax-Schemes erstellen oder bestehende nach Ihren Wünschen anpassen.

Programm-Startseite

Auf Wunsch erscheint nun bei jedem Programmstart eine aktuelle Startseite, welche Sie über verfügbare Updates und nützliche Funktionen im Programm informiert. So verpassen Sie keine Updates oder kostenlose Maintenance Releases mehr!

Unterstützung von weichen TABS

Zur besseren Lesbarkeit von Code (HTML, PHP oder andere Sprachen) werden Absätze häufig mit TABS (Tabstops) eingerückt. Da die dargestellte Länge eines TABS auf unterschiedlichen Systemen jedoch variieren kann, wirkt u.U. der Code nur noch schlecht lesbar. Weiche TABS sind eine Verkettung von Leerzeichen in der Länge eines TABS. So sieht Ihr Code auf allen Systemen gleich “gut” aus.

Verbesserte UTF-8-Unterstützung

Durch das automatische Einfügen von Codierungs-Meta-Tags und die verbesserte Erkennung von UTF-8-Dateien (auch wenn diese keine Sonderzeichen enthalten!), fällt die Arbeit mit UTF-8-codierten Dateien in SuperHTML Web Studio nun noch leichter.

Verbesserte CSS-Unterstützung in vielen Assistenten

In vielen Assistenten (z.B. zum Einfügen von Tabellen oder Hyperlinks) können nun CSS-Klassen angegeben werden und optional auch der generierte Code mit CSS-Formatierungen statt mit normalen HTML-Formatierungen ausgegeben werden.

Neue Möglichkeiten in der Vorschau

In der Vorschau informiert eine Info-Zeile nun stets über den aktuellen IE-Browser-Modus (Quirks-Mode bzw. Standards-Compliant-Mode). Außerdem lassen sich für Formular-Steuerelemente (z.B. Buttons oder Eingabezeilen) die Betriebssystem-spezifischen Skinning-Effekte (wie unter Windows XP oder Vista) ein- oder ausschalten.

Zahlreiche kleinere Detailverbesserungen und Bugfixes

Viele Detailverbesserungen machen die Arbeit mit SuperHTML Web Studio nun noch angenehmer als bisher. Die neuen Version 8.5 ist der Beweis dafür, dass sich auch bei voller Kontrolle über den Quellcode eines Dokuments komfortabel arbeiten lässt.

*Quelle: mirabyte.com