Schlagwort: CSS

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

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
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 Webentwicklung

Joomla Template Reihe K04

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

28 kB

Kategorien
Joomla Templates

Joomla Template Reihe K23

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

Der Hauptrahmen hat eine Breite von 980px. Zentriert automatisch über margin:, besitzt einen Header und einen Top Bereich. Der Teil darunter nimmt den Pathway auf und die zugewiesenen Module.

#rahmen {
width:980px;
margin:0 auto;
text-align:left;
}
#top-aussen {
width:960px;
height:50px;
margin:0;
background-color:#FFFFFF;
border-left:20px solid #2664B7;
}
#header-aussen {
width:960px;
height:180px;
margin:0;
border-left:20px solid #000000;
background:#FFFFFF url(../images/bg-header-aussen.jpg);
}

Screenshot

Joomla Template K23
Joomla Template K23

Im Screenshot sind mehrere Module eingebettet, diese sind abhängig von der Zuweisung und Aktivierung im CMS selbst.

109 kB

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