Bootstrap Vorlage Offcanvas für Joomla 3

Hier wurde das Grundlayout – Bootstrap Vorlage Off Canvas für die Verwendung in Joomla vorbereitet.

Zur Verwendung die ZIP Datei entpacken und in den templates\protostar Ordner der Joomla Installation kopieren. Die index.php wird dabei überschrieben.
Es befinden sich alle JS Script und CSS Dateien im Ordner und der Pfad wurde in der index.php angepasset.

Bootstrap Vorlage Offcanvas für Joomla 3 ZIP

Um jetzt Joomla Inhalte einzufügen, muss man noch die einzelnen Positionen in der idex.php durch den Joomla Platzhaltercode ersetzen. Bootstrap Vorlage Offcanvas für Joomla 3 weiterlesen

Mit CSS < li > in einer Zeile mittig ausrichten

Zur Erstellung von Menüs wird fast immer die <ul><li> Aufzählung in HTML verwendet. Damit dan das Ganze in einer Zeile bekommt und auf der Seite in der Mitte zentriert ist, kann man folgendes Beispiel verwenden. Mit CSS < li > in einer Zeile mittig ausrichten weiterlesen

CSS DIV in die Mitte stellen

In fast jedem Layout einer Webseite gibt es das wrapper DIV. Der Wrapper kommt aus den Englischen und bedeutet Verpackung oder Hülle. Man darf dieses DIV natürlich nennen wie man möchte. Es hat sich jedoch in fast jedem Layout der Name wrapper etabliert.

Dieses <div> sorgt dafür, das der DIV Container in der Mitte von der Webseite erscheint. CSS DIV in die Mitte stellen weiterlesen

CSS Datei in HTML Dokument einbinden

Bei der Webprogrammirung werden die, für das Aussehen verantwortliche Dateien oft über CSS formatiert. Dies sind die Stylescheets.

Das Stylescheet, die CSS Datei mit den Formatierungen wird in die HTML oder PHP Datei im Bereich <head> </head> (Kopfbereich) eingebunden. CSS Datei in HTML Dokument einbinden weiterlesen

CSS auf null stellen – für den Start vorbereiten

Beim Einbinden einer CSS Datei passieren oft formatieren, ja nach Browser, ohne dass man diese wünscht. Um dies zu verhindern, sollte man ganz oben in jeder CSS Datei diesen Code einfügen.

Anleitung Webprogrammierung

Damit wird alles und für jeden Browser auf Null gesetzt.

 

htaccess URL Weiterleitung mit und ohne www und IP

htaccess URL Weiterleitung mit und ohne www und IP

Mit der . htaccess Datei kann man eine Umleitung der URL Adresse am Webspace (Webserver) anlegen. Wenn man z.B. die Webseite nur mit www oder nur ohne www zulassen möchte. Z.B. nur webprogrammierung.at oder nur www.webprogrammierung.at. Es ist auch möglich, falls jemand die IP Adresse von Webserver aufruft, diesen auf die gewünschte URL zu leiten.

htaccess URL Weiterleitung
htaccess URL Weiterleitung

Dadurch vermeidet man, dass die URLs mehrfach existieren. In den Google Webmaster Tools kann man die bevorzugte URL einstellen, jedoch werden von vielen andern Suchmaschinen trotzdem die verschiedenen URLs verlinkt. Dies kann sich negative auf das Ranking auswirken. htaccess URL Weiterleitung mit und ohne www und IP weiterlesen

jQuery Slider DIV ein – aus – blenden

Mit jQuery ein DIV anzeigen oder ausblenden.

Mit der jQuery JavaScript-Bibliothek kann man Container ausblenden und auch wieder einblenden. Man kann auch die Container auf der Webeseite hin und her schieben. So werden heute viele Menüs aufgebaut.

In diesem Beispiel haben wir eine kleines leeres Layout erstellt und lassen den obersten Container per Standard nicht anzeigen. Erst wenn man auf die Aktionsfläche (ein DIV) klickt, so wird der Container angezeigt. Dies wer mit der jQuery JavaScript Funktion click(function() und .slideToggle() gesteuert. Die genaue Beschreibung der Funktion kann man auf http://api.jquery.com/slideToggle/ nachlesen. jQuery Slider DIV ein – aus – blenden weiterlesen

HTML Teil 21 HTML Responsive Webseiten

Responsive Webseiten sind Webseiten, die für verschiedene Anzeigegeräte optimiert werden. Für einen Computer, für ein Smartphone, Für ein Tablet und für normale Telefone.
Alle diese Geräte verwenden verschiedene Bildschirm- Auflösungen und somit muss man für jedes Gerät ein eigenes Layout erstellen, bzw das Layout so erstellen, dass sich dieses automatisch an alle Größen anpassen kann.

Einfaches Beispiel:
Hier werden die DIV Container auf eine Größe von 300px mal 300px eingestellt. Der Browser zeigt so viele DIV Container nebeneinander an, wie möglich. Reicht der Platz nicht mehr, so wird da nächste nach unten Verschoben. HTML Teil 21 HTML Responsive Webseiten weiterlesen