der-webentwickler.net » HTML & CSS http://www.der-webentwickler.net Codeschnipsel . PHP . MySQL . JavaScript Wed, 25 Jan 2012 09:39:40 +0000 en hourly 1 http://wordpress.org/?v=3.3 Element mittels margin: auto zentrieren http://www.der-webentwickler.net/html-css/element-mittels-margin-auto-zentrieren/ http://www.der-webentwickler.net/html-css/element-mittels-margin-auto-zentrieren/#comments Sat, 16 Oct 2010 22:43:17 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=254 Weiterlesen →]]> Möchte man ein Element zentrieren ohne sich mit der Browsergröße zu befassen, sollte man margin: 0 auto; verwenden. Dies funktioniert aber nur, wenn das Element eine fest definierte Breite hat.

.inhalt {
width: 600px;
margin: 0 auto;
text-align: left;
}

Dieses Beispiel zentriert das betreffende Element in der horizontalen.
Der Inhalt wird links bündig ausgerichtet.
Eventuell muss für ältere Browser im Body Element text-align: center definiert werden.

]]> http://www.der-webentwickler.net/html-css/element-mittels-margin-auto-zentrieren/feed/ 0 CSS3: Mehrere Hintergrundbilder http://www.der-webentwickler.net/html-css/css3-mehrere-hintergrundbilder/ http://www.der-webentwickler.net/html-css/css3-mehrere-hintergrundbilder/#comments Mon, 20 Sep 2010 23:53:15 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=243 Dank der Fähigkeit, mit CSS3 mehrere Hintergrundbilder einem Element zuzuweisen, lassen sich visuelle Effekte zeitsparend realisieren.
Leider unterstützen noch nicht alle Browser diese Eigenschaft.

Ein Beispielcode:

background: url(bild1.png) top left no-repeat, url(bild2.png) top right no-repeat;

]]> http://www.der-webentwickler.net/html-css/css3-mehrere-hintergrundbilder/feed/ 0 Website in 30 Minuten mit TYPO3 Teil 1: HTML Template, Seitenbaum, Ressourcen http://www.der-webentwickler.net/html-css/website-in-30-minuten-mit-typo3-teil-1-html-template-seitenbaum-ressourcen/ http://www.der-webentwickler.net/html-css/website-in-30-minuten-mit-typo3-teil-1-html-template-seitenbaum-ressourcen/#comments Tue, 06 Jul 2010 09:16:20 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=200 Weiterlesen →]]> In diesem kleinen Online Tutorial möchte ich Dir zeigen, wie Du in 30 Minuten eine Internetseite mit TYPO3 erstellen kannst. Ziel dieser Anleitung soll es sein, Dir näher zu bringen, wie sich der Ablauf mit TYPO3 gestaltet, und welche Schritte Du abarbeiten musst, um am Ende auch Erfolg zu haben.

Themen in diesem Kurs:

  1. Vorbereiten einer HTML Datei, setzen von Subparts
  2. Backend-Spalten anpassen
  3. Seitenbaum erstellen
  4. Dateibaum erstellen

Was kann ich am Ende des Kurses mit TYPO3 machen?

Wir werden das HTML Template für TYPO3 vorbereiten. Ich gehe davon aus, dass Du bereits mit HTML vertraut bist, und ein Layout erstellen kannst. Sollte das nicht der Fall sein, steht Dir am Ende der Download mit den Dateien zur Verfügung. An denen kannst Du Dich dann weiter orientieren. Wir werden das TYPO3 für ein 3 spaltiges Layout einrichten, und zusätzlich ein austauschbares Headerbild (Emobild) anlegen. Du lernst wie man eine Dateistruktur sowie einen Seitenbaum anlegt und einen TypoScript Template Record erstellt. Am Schluss des Lehrgangs werden wir eine Seite mit Content pflegen. Wenn Du nicht selbst Lust hast ein TYPO3 zu installieren und einzurichten, möchte ich Dir Mittwald als Hoster für TYPO3 empfehlen. Die Preise sind klein und die Leistungen sehr gut: Mittwald TYPO3 Hosting.

Als erstes benötigen wir ein fertiges HTML Dokument. Die beste Vorgehensweise ist, zuerst ein Layout zu gestalten. Bei aufwändigeren Designs wird das Layout zuerst im Grafikprogramm erstellt. Dann kommt der nächste Schritt: Nachbauen in HTML und CSS.

Für diesen Kurs habe ich ein kleines Grundlayout auf CSS Basis erstellt. Das Layout ist 3 Spaltig und hat einen Emo-Bereich. Auf der linken Seite befindet sich eine Navigation. Unter der Navigation kann zusätzlich Content gepflegt werden. In der Mitte befindet sich der Haupt-Content-Bereich und links ist erneut eine Spalte für pflegbaren Content enthalten. Im Emobereich kann das Bild getauscht werden. Hier kannst Du das HTML Layout ansehen.

Damit nun TYPO3 nachher weiß, welcher Content wohin muss, musst Du im HTML Template sogenannte “Subparts” erstellen. Jeder Subpart hat einen Start- und Endpunkt. Alles was sich in diesem Subpart befindet, entfernt TYPO3 automatisch und füllt es mit dem eigenen Content auf. Einzige Ausnahme: Der Dokumenten Subpart (wird weiter unten beschrieben). Subparts werden wie folgt erstellt:

<div>
	<!-- Subpart ###HEADERIMAGE### begin -->
		<img src="header.jpg">
	<!-- Subpart ###HEADERIMAGE### end -->
</div>

In diesem Beispiel wird also der Subpart HEADERIMAGE definiert. Wichtig dabei sind folgende Punkte:

  • Code in html Kommentar schreiben
  • 3 x Raute am Anfang und 3 x Raute am Ende des Namens für den Subpart

Der Code, der sich zwischen den beiden HTML Kommentaren befindet, kann so verbleiben. Eben dieser Teil wird wird nachher von TYPO3 dynamisch ersetzt. Das hat den Vorteil dass Änderungen am Layout relativ einfach vorgenommen werden können, da keine Code-Teile gelöscht werden müssen. Man sieht also am HTML Template wie es nachher auch aussehen wird, wenn TYPO3 mit dem HTML Template arbeitet.

Der wichtigste Subpart ist nun der DOKUMENT Subpart. DIeser Subpart umschliesst alle anderen Subparts. HTML Code der sich außerhalb dieses Subparts befindet, ignoriert TYPO3 schlichtweg. Dieser Subpart wird deshalb auch nach dem body-Tag des HTML Dokumentes eingeleitet, und hört vor dem schließenden body Tag wieder auf:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Training Template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
<!-- Subpart ###DOKUMENT### begin -->
  <div>

	some code....

  </div>
<!-- Subpart ###DOKUMENT### end -->
</body>
</html>

Der Name muss nicht zwingend DOKUMENT lauten. Dieser ist frei definierbar und in TypoScript einstellbar.

Rein theoretisch kann man in einem HTML Template auch mehrere Dokumenten-Subparts angeben. So hätte man dann für verschiedene Layouts immer nur ein HTML-File mit allen Designs. Für einen Internetauftritt mit mehreren HTML Templates empfehle ich aber auch mehrere HTML Vorlagen zu bauen. Man ist bei der Gestaltung und Programmierung der Vorlage flexibler und es ist in TYPO3 nachher auch übersichtlicher.

Noch ein Beispiel: Subpart einer Navigation

<div>
	<!-- Subpart ###NAVIGATION### begin -->
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Demos</a></li>
		<li><a href="#">Misc</a></li>
	</ul>
	<!-- Subpart ###NAVIGATION### end -->
</div>

Die Navigationsliste befindet sich in einem DIV mit der Klasse navi. Das ul Element und die Listeneinträge befinden sich innerhalb des Subparts ###NAVIGATION###. Du musst also das Menü mit TypoScript so konfigurieren, dass genau diese Struktur von TYPO3 ausgegeben wird. Um den äußeren DIV machen wir uns keine Gedanken, dieser wird von TYPO3 ja nicht gelöscht.

Und hier die HTML Datei mit allen Subparts die benötigt werden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Training Template
    </title>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen">
  </head>
  <body>
    <!-- Subpart ###DOKUMENT### begin -->
    <div>
      <div>
        <!-- Subpart ###HEADERIMAGE### begin -->
        <img src="header.jpg">
        <!-- Subpart ###HEADERIMAGE### end -->
      </div>
      <div>
        <div>
          <div>
            <!-- Subpart ###NAVIGATION### begin -->
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">News</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Demos</a></li>
              <li><a href="#">Misc</a></li>
            </ul>
            <!-- Subpart ###NAVIGATION### end -->
          </div>
          <!-- Subpart ###LEFTCONTENT### begin -->
          <h2>Some Content...</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###LEFTCONTENT### end -->
        </div>
      </div>
      <div>
        <div>
          <!-- Subpart ###MAINCONTENT### start -->
          <h1>Text, Text und nochmal Text....</h1>
          <img src="image01.jpg" style="display:inline; float:left; padding:0 10px 10px 0;">
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###MAINCONTENT### end -->
        </div>
      </div>
      <div>
        <div>
          <!-- Subpart ###RIGHTCONTENT### start -->
          <h2>Some other content</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <h2>Mehr davon...</h2>
          <p>Lorem ipsum dolor sit amet, ...</p>
          <!-- Subpart ###RIGHTCONTENT### end -->
        </div>
      </div>
      <div>
      </div>
    </div>
    <!-- Subpart ###DOKUMENT### end -->
  </body>
</html>

TYPO3 bietet uns standardmäßig 4 Spalten an: Links, Mitte, Rechts und Rand. Diese Spalten werden nachher den verschiedenen Subparts im HTML Template, dass Du gerade erstellt hast, zugewiesen.

Backend Spalten nach der Installation

Die 4 spalten die TYPO3 bereits mitbringt, reichen in aller Regel auch aus. Allerdings möchte ich bei dieser Installation ein Headerbild austauschbar machen. Und genau dafür bietet sich eine solche Spalte an. Nur, was macht es für einen Sinn, ein Emobild in einer Spalte namens “Rand” zu pflegen? Keinen :-) Deshalb werden wir diese 4. Spalte neu konfigurieren und mit dem Titel Headerimage belegen.

Leider bietet TYPO3 uns das nicht als Konfigurationspunkt an. Wir müssen dazu 2 Konfigurationsdateien von TYPO3 anpassen. Dazu benötigst Du ein FTP Programm mit dem Du Zugriff auf deinen Webspace hast. Ich beginne mit der Datei  /typo3conf/extTables.php:

Am Ende der Datei musst Du folgenden Code einfügen:

t3lib_extMgm::addPageTSConfig('
mod.SHARED.colPos_list = 1,0,2,3
');
$TCA["tt_content"]["columns"]["colPos"]["config"]["items"] = array (
"1" => array("Links||Links||||||||","1"),
"0" => array("Mitte||Mitte||||||||","0"),
"2" => array("Rechts||Rechts||||||||","2"),
"3" => array("Headerbild||Headerbild||||||||","3"),
);

Bitte achte darauf, diesen Code vor dem ?> einzufügen. Wenn Du soweit bist, dann öffne die Datei /typo3conf/localconf.php:

Füge auch hier am Ende der Datei folgendes ein und achte darauf dass auch hier dass ?> immer als allerletzte Zeile kommen muss!

$typo_db_extTableDef_script = 'extTables.php';

Backend Spalten nach der Konfiguration

Somit hast Du nun erfolgreich die Spaltennamen im TYPO3 Backend angepasst. Solltest Du Dich diesen Schritt nicht trauen, kannst Du Ihn auch ohne Probleme übergehen. Du musst in Zukunft nur dran denken, dass die Spalte “Rand” für den Headerbereich zuständig ist.

Dieser Eingriff in die TYPO3 Dateien sind sofort zu erkennen. Wenn Du im Backend im Seitenmodul nachher auf eine Seite klickst, siehst Du die neue konfigurierten Spalten.

Der Seitenbaum im TYPO3 Backend

Zum Seitenbaum gibt es nicht besonders viel zu schreiben. Der Seitenbaum im TYPO3 Backend stellt die Struktur der Internetseite dar. Ausserdem wird aus dem Seitenbaum die Naviagtion erzeugt. Im Seitenbaum können normale Seiten, versteckte Seiten oder auch sogenannte SysFolder, also Systemordner erstellt werden. Jede Seite hat einen Titel der sich im Seitenbaum wiederspiegelt. Zum Titel kann man das Feld alias nutzen. Das ist die Angabe wenn man “sprechende” Urls unabhängig vom Seitentitel aufbauen möchte.

Einzelne Seiten lassen sich per Drag & Drop im Seitenbaum bewegen. Ausserdem gibt es noch den Eintrag “Funktionen” im Linken Modulmenü. Dieser Punkt enthält verschiednene Assistenten. Einer davon nennt sich “Viele Seiten anlegen“. Das ist ein ganz nützliches Werkzeug wenn man mehr als eine Seite gleichzeitig anlegen möchte. Man hat die Möglichkeit, bis zu 10 Seiten auf einmal anzulegen. Wie man genau Seiten anlegt, erfährst Du im Video.

Die Dateistruktur im TYPO3 Backend

Der Dateibaum in TYPO3 ist der Bereich, wo man Ressourcen und Media Daten ablegen und verwalten kann. Der Dateibaum befindet sich im Ordner fileadmin/. In diesem Dateibaum erstelle ich den Ordner templates/ in den ich dann die html, css und sonstige Dateien die für den Betrieb der Seite notwendig sind, einsortiere. Über das TYPO3 Backend lassen sich Ordner anlegen, Dateien erstellen, Dateien hochladen und wenn es sein muss, auch alles wieder löschen.

Der Zugang zum Dateibaum und den Dateien kannst du mit einem Klick auf “Dateiliste” bekommen. Für spätere Mediadaten und Downloads empfiehlt es sich, innerhalb von fileadmin/einen extra Ordner anzulegen, und den Redakteur in dieses Verzeichniss einzuschliessen, damit nicht aus versehen die benötigten Template Ressourcen verschwinden.

In den nächsten Tagen erscheint auch ein passendes Video Tutorial zum ersten Teil, sowie nächster Woche der zweite Teil der Serie.

]]> http://www.der-webentwickler.net/html-css/website-in-30-minuten-mit-typo3-teil-1-html-template-seitenbaum-ressourcen/feed/ 3 Flash Film transparent darstellen http://www.der-webentwickler.net/html-css/flash-film-transparent-darstellen/ http://www.der-webentwickler.net/html-css/flash-film-transparent-darstellen/#comments Mon, 28 Jun 2010 12:00:03 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=195 Um einen Flash Film transparent darzustellen befolge einfach folgede zwei Schritte:

1. Füge den folgenden Parameter zum OBJECT Tag hinzu:

<param name="wmode" value="transparent">

2. Dieser wird in den EMBED Tag eingebunden:

wmode="transparent"
]]> http://www.der-webentwickler.net/html-css/flash-film-transparent-darstellen/feed/ 0 IE6 Meldung ausgeben http://www.der-webentwickler.net/html-css/ie6-meldung-ausgeben/ http://www.der-webentwickler.net/html-css/ie6-meldung-ausgeben/#comments Mon, 03 May 2010 14:00:36 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=181 Weiterlesen →]]> Immer öfters sieht man, wenn man mit dem Internet Explorer 6 auf diversen Seiten wie Facebook oder auch in Google surft, dass eine Meldung erscheint, die einen informiert dass dieser veraltet ist. Doch wie baut man so eine Meldung nun auf der eigenen Seite ein? Das geht relativ einfach mit so genannten Conditional Comments.

<!--[if IE 6]>
Sie benutzen einen älteren Browser (Internet Explorer 6). Es wird Ihnen empfohlen diesen Upzudaten...
<![endif]-->

Es gibt verschiedene Conditional Comments:
[if IE]: alle Versionen (ab 5.0),
[if IE 6]: alle 6er-Versionen,
[if lt IE 7]: alle Version vor 7 (less-than = kleiner als),
[if lte IE 5.5999]: alle Version bis 5.5 (less-than or equal = kleiner oder gleich),
[if gte IE 5.5]: alle Version ab 5.5 (greater-than or equal = größer oder gleich).

]]> http://www.der-webentwickler.net/html-css/ie6-meldung-ausgeben/feed/ 0 Ladegeschwindigkeit wird Google Rankingfaktor http://www.der-webentwickler.net/html-css/ladegeschwindigkeit-wird-google-rankingfaktor/ http://www.der-webentwickler.net/html-css/ladegeschwindigkeit-wird-google-rankingfaktor/#comments Wed, 28 Apr 2010 08:00:16 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=184 Weiterlesen →]]> Die meisten werden es schon gelesen haben, dass Google nun offiziell die Ladegeschwindigkeit als Rankingfaktor wertet. Ich möchte hier kurz ein paar Links dazu bereitstellen.

Auf perun.net gibt es dazu einen Artikel, welcher WordPress behandelt.
Mit Tools wie YSlow und Page Speed (Firefox Addons) oder aber auch den Google Webmaster Tools lassen sich die Ladezeiten messen.

Auch eine Interessante Präsentation:

Performance Optimierung – Barrierefreiheit beginnt mit Ladezeiten
]]> http://www.der-webentwickler.net/html-css/ladegeschwindigkeit-wird-google-rankingfaktor/feed/ 0 Frame Weiterleitung 100%, 0-100% http://www.der-webentwickler.net/html-css/frame-weiterleitung-100-0-100/ http://www.der-webentwickler.net/html-css/frame-weiterleitung-100-0-100/#comments Thu, 25 Feb 2010 09:30:08 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=149 Weiterlesen →]]> Immer wieder benötigt man eine Weiterleitungs Methode, bei der die aufgerufene URL stehen bleibt. Z.B. bei einem Serverumzug übergangsweise wenn die Domain länger braucht zum umziehen oder auch in vielen anderen Fällen.
Hier eignen sich Frame Weiterleitungen sehr gut um über einen kurzen Zeitraum eine Domain umzuleiten, so dass die URL in der Adresszeile stehen bleibt. Wichtig hierbei ist, das es sich um einen kurzen Zeitraum handelt. Denn SEO Technisch ist eine Frame Weiterleitung totaler Müll.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Weiterleitung</title>
  <meta name="description" content="Weiterleitung Beschreibung" />
  <meta name="keywords" content="Weiterleitung, Keywords" />
</head>
<frameset rows="100%">
  <frame src="http://URL.de" title="" frameborder="0" noresize="noresize"/>
  <noframes>
    <body>
      <h1>Name / URL</h1>
      <p><a href="http://URL.de">Text / Name / URL</a></p>
    </body>
  </noframes>
</frameset>
</html>
]]> http://www.der-webentwickler.net/html-css/frame-weiterleitung-100-0-100/feed/ 0 Apple Touch Icon http://www.der-webentwickler.net/allgemein/apple-touch-icon/ http://www.der-webentwickler.net/allgemein/apple-touch-icon/#comments Wed, 17 Feb 2010 15:56:03 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=146 Weiterlesen →]]> Seit kurzem kann man mit der neuen FirmWare bei Iphone und Ipod Touch Bookmarks auf dem Homescreen ablegen. Als Icon wird dabei standardmäßig ein Screenshot der aktuellen Seite angezeigt und entsprechend skaliert.

Wie für das FavIcon gibt es auch hier 2 Möglichkeiten ein eigenes Icon einzubinden. Entweder man legt dieses als “apple-touch-icon.png” ins Root Verzeichniss oder bindet es über eine Verlinkung als Metatag ein.

<link rel=”apple-touch-icon” href=”customIcon.png” />

In beiden Fällen sollte das Icon 57 x 57 Pixel besitzen. Es wird empfohlen keinen Transparenten Hintergrund zu nutzen und das Icon auf 54 x 54 Pixel Arbeitsfläche zu beschränken. Der Glas Effekt wird anscheinend automatisch erzeugt.
Wer hat hier schon Erfahrungen gemacht?

]]> http://www.der-webentwickler.net/allgemein/apple-touch-icon/feed/ 5 Firefox 2.x & CSS inline-block http://www.der-webentwickler.net/html-css/firefox-2-x-css-inline-block/ http://www.der-webentwickler.net/html-css/firefox-2-x-css-inline-block/#comments Mon, 01 Feb 2010 10:00:54 +0000 Rene Kreupl http://www.der-webentwickler.net/?p=133 Wenn man einem Element die CSS-Eigenschaft “display: inline-block” zuweist, so hat man im Firefox 2.x leider das falsche Los gezogen. Dieser unterstützt diese Eigenschaft leider nicht. Es gibt aber einen einfachen Workaround:

display:-moz-inline-box;
display:inline-block;
]]> http://www.der-webentwickler.net/html-css/firefox-2-x-css-inline-block/feed/ 0 Flash Valide in XHtml 1.1 einbauen http://www.der-webentwickler.net/html-css/flash-valide-in-xhtml-1-1-einbauen/ http://www.der-webentwickler.net/html-css/flash-valide-in-xhtml-1-1-einbauen/#comments Tue, 04 Aug 2009 09:08:11 +0000 Rene Kreupl http://code.rene-design.com/?p=15 Oft wird gefragt wie man den Flash valide in XHTML 1.1 einbauen kann.
Hier die Lösung:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <title>Flash valide einbinden</title>
  </head>
  <body>
    <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
      <param name="movie" value="flash.swf" />
      <param name="wmode" value="transparent" />
      <img src="ersatz.jpg" width="800" height="600" alt="header" />
    </object>
  </body>
</html>

Das Bild dient zur korrekten Darstellung, falls einmal kein Flash geladen werden kann.

via rene-design

]]> http://www.der-webentwickler.net/html-css/flash-valide-in-xhtml-1-1-einbauen/feed/ 0