Professor Web - RSS-Feed

Professor Web nimmt seinen Betrieb nach einem Relaunch wieder auf

Thu, 17 Mar 2011 02:20:12 +0100

In den letzten 1,5 Jahren habe ich mir oft gedacht: "Das hier w�re perfekt um dar�ber einen Artikel zu schreiben!". Ich habe mich sehr viel mit objektorientierter Programmierung besch�ftigt, mit dem CMS TYPO3 und auch mit Unittests.

Und nun wende ich mein neues Wissen an um Professor Web zu relaunchen und es in neuen Beitr�gen zu teilen! Unter der eigenen Abk�rzung "pw2011" entwickle ich derzeit an der neuen Seite, die der alten in Nichts nachstehen wird.

Bedingt durch meine berufliche Verwendung von TYPO3 wird pw2011 eben darauf basieren! Das alleine ist schon eine Herausforderung, da TYPO3 nicht als Blog-CMS bekannt ist. Allerdings sind eigene Programmierungen von TYPO3-Extensions wie "pw_comments" und "pw_teaser" bereits am laufen und werden nach dem Launch von mir als Open Source ver�ffentlicht.

Die Umsetzung ist schon ziemlich weit vorangeschritten, was mich auch dazu veranlasst hat diesen Beitrag zu ver�ffentlichen. Es ist allerdings auch noch einiges zu tun, nicht zuletzt der Import und die Aufbereitung der bisherigen Professor Web Artikel, daher bitte ich noch um ein bisschen Geduld.

Geplant ist der Relaunch im Sommer 2011.

Ich freue mich darauf!

~Armin

Update September 2011:

Nachdem ich mehrfach gefragt werde, wie weit der Relaunch vorangeschritten ist, will ich hier mal ein kurzes Update geben:

Der angestrebte Relaunch bis Sommer 2011 ist aufgrund des meterologischen Herbstanfangs neulich nun nicht mehr drin. Die Gr�nde hierf�r sind sowohl Zeit- als auch teilweise Motivationsmangel. Hinzu kommt, dass Projekte die mir die Wurst auf dem Br�tchen erm�glichen nat�rlich vor gehen.

Nichtsdestotrotz habe ich schon recht viel umgesetzt, auch wenn ich beschlossen habe manche Dinge davon nochmal zu �ndern. Ich hab mal ein Screenshot des aktuellen Standes beigef�gt - der ist zwar nicht repr�sentativ, zeigt aber ganz gut die Marschrichtung:

Um TYPO3 benutzen zu k�nnen habe ich bereits diverse Extensions entwickelt die ich auch, wenn sie entspreched ausgereift sind, ins TER (TYPO3 Extension Repository) laden werde, bzw. dies teilweise schon gemacht habe.

Ein paar meiner eigenen Extensions im TER:

pw_teaser �- Zum Generieren der Artikel-Listen
pw_comments �- Eine einfache aber m�chtige Kommentar Extension
pagehits �- Einfacher Counter um einzelne Seitenaufrufe zu loggen (verwendet User-Session)
tinysource �- Entfernt Kommentare und �berfl�ssige Whitespaces im finalen Code
extbase_cache_configurator �-�Verhindert das st�ndliche Leeren des Extbase-Object-Caches.
session �- Erm�glicht es Session-Variablen im TypoScript Kontext zu schreiben

Extensions die (noch) nicht im TER liegen:

pw_comments - Eine Kommentar-Extension�(ist jetzt online)
pw_codesnippets - Im RTE werden Styles hinzugef�gt, die wenn man sie auf Text anwendet, den Text im Frontend Syntax-Highlighted (sowas gibt es zwar schon, aber ich will keine extra Content-Elemente anlegen m�ssen)

Ich m�chte das Projekt jetzt auch gerne fertig bekommen und w�rde mal sch�tzen, dass das dieses Jahr noch was wird, wenn nichts dazwischen kommt.

Vielen Dank f�r Euer Verst�ndnis und Interesse!

Keine neuen Artikel bei ProfessorWeb

Fri, 25 Sep 2009 12:19:07 +0100

Um die Gr�nde kurz zu erl�utern: Prim�r ist die Zeit ein Faktor der aufgrund von Arbeit und Privatem eher sp�rlich ges�t ist. Dazu kommen manche echt sau dumme Kommentare, die einem die Lust allm�hlich nehmen.

Der Grundgedanke des Blogs war es, der �ffentlichkeit das zug�nglich zu machen, was ich selbst j�ngst herausgefunden oder gelernt habe. Aber Undank ist der Welten Lohn und so ziehe ich den entsprechenden Entschluss.

Die Kommentare bleiben weiterhin offen und bei Fragen darf man mich auch gerne weiterhin kontaktieren - lediglich der RSS-Feed (und damit auch der Blog selbst) wird kein neues Futter erhalten.

Ich danke f�r Eure Aufmerksamkeit und Euer Verst�ndnis.

Freundlicher Gru�
Armin R�diger Vieweg
- Gr�nder ProfessorWeb.de -

Zeilen in Tabellen mit PHP abwechselnd stylen (even, odd)

Wed, 12 Aug 2009 13:37:00 +0100

Erst k�rzlich habe ich in einem ausf�hrlichen Artikel die PHP Klasse "Simple HTML DOM Parser" vorgestellt, mit der man wie in jQuery sehr komfortabel HTML-Code �ndern kann.

Dieser Artikel setzt den Vorherigen als Basis voraus, daher empfehle ich erst den Simple HTML DOM Parser Artikel zu verinnerlichen, bevor wir auf das folgende Praxis-Beispiel n�her eingehen.

Grafisch hochwertige Tabellen
Eine nett anzusehende Tabelle k�nnte zum Beispiel so aussehen:

Dieses Bild ist aus einem vorherigen Artikel von Professor Web, in dem ich auf das kleine JavaScript Tablecloth eingegangen bin, dass das was wir jetzt mit PHP machen schon mit JavaScript umgesetzt hat.

Der Vorteil es mit PHP zu machen ist, dass kein JavaScript ben�tigt wird und der Aufwand verh�ltnism��ig gering ist.

Der Grund-Code
Wenn wir den Simple HTML DOM Parser eingebunden und den Quellcode der Seite, der gleich ausgegeben werden soll, in eine entsprechende Variable geladen haben, k�nnen wir mit dem eigentlichen Script anfangen.

Hier nochmal kurz der Quellcodeauszug um den Parser einzubinden und den Code in die Variable $inhalte zu laden. Wie das genau funktioniert findet Ihr im Artikel, den ich eingangs verlinkt habe.

require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/simple_html_dom.php");

$inhalte = str_get_html($inhalte);

Der Haupt-Code

foreach($inhalte->find('table') as $e) {

    foreach($e->find('tr') as $f) {

        if($i == 0) $f->class .= ' first';

        if($i % 2 == 0) {

            $f->class .= ' odd';

        }

        else {

            $f->class .= ' even';

        }

        $i++;

    }

    unset($i);

}

Erkl�rung
Wir durchsuchen hier den Quellcode zuerst nach allen Tabellen die vorhanden sind. Danach alle TR (Table Row) innerhalb der jeweiligen Tabellen. Wir m�ssen es in zwei Schleifen aufteilen, da ansonsten nicht mehr differenziert werden kann ob sich das n�chste gefundene TR noch in der 1. oder vielleicht schon in der 2. Tabelle befindet.

Die erste If-Abfrage identifiert anhand der Laufvariable $i ob es das erste TR der aktuellen Tabelle ist. Wenn dem so ist, wird dem TR die Klasse "first" zugewiesen.

In der zweiten If-Abfrage wird gekl�rt ob das aktuelle TR gerade (even) oder ungerade (odd) ist. Daf�r verwenden wir den Operator %. Wir teilen also die Laufvariable durch 2 und erhalten nicht den geteilten Wert, sondern den Restwert.

3 geteilt durch 2 - der Restwert ist 1 - d.h. ungerade
4 geteilt durch 2 - der Restwert ist 0 - d.h. gerade
usw...

Egal mit welcher Zahl wir das machen. Der Restwert ist immer 1 oder 0 und das k�nnen wir dann super in einer IF-Abfrage nutzen um die entsprechende CSS-Klasse hinzuzuf�gen.

Da die Laufvariable bei 0 und nicht bei 1 beginnt sind die Klassen "even" und "odd" scheinbar verkehrt herum aufgef�hrt - so wird jedoch das korrekte Ergebnis angezeigt. Die 1. Zeile (Zahl 1 = ungerade) erh�lt somit die Klasse "odd" und dies wird abwechselnd mit "even" fortgef�hrt.

Sind alle TR der ersten Tabelle durchgelaufen endet die innere foreach-Schleife und die Variable $i wird wieder auf 0 gesetzt. Dann beginnt das Spiel mit der n�chsten Tabelle die gefunden wird.

Modifikation
Man kann nach Belieben die erste Zeile des Scriptes anpassen um nur Tabellen aufzuf�hren die bestimmte Kriterien erf�llen. Beispielsweise sollen nur Tabellen bearbeitet werden die sich im DIV mit der id="content" befinden. Dann w�rde die erste Zeile so aussehen:

foreach($inhalte->find('div#content table') as $e) {

Das passende CSS
Ist das Script eingebunden und wird der Quellcode ausgegeben k�nnen wir die Klassen .even, .odd und .first nach Belieben im Stylesheet definieren.

Um ein vergleichbares Ergebnis wie im Screenshot oben zu erzielen w�rden wir also folgendes schreiben:

tr.odd {

  background-color:#f8fbfc;

}



tr.even {

  background-color:#e5f1f4;

}



tr.first {

  background-color:#328aa4;

  color:#fff;

  font-weight:bold;

}

�brigens: Die erste Zeile in der Tabelle hat die Klassen "first" und "odd". Das kann je nach Aufbau des Stylesheets wichtig sein.

Dies ist ein Beispiel, wie wir den Simple HTML DOM Parser sinnvoll in der Praxis einsetzen k�nnen. Ein Weiteres, dass sich mit Links befasst, wird demn�chst folgen.

Basiswissen: Simple HTML DOM Parser

Der Artikel hat �brigens die glatte ID=300 in meinem Blog :)

Neuer RSS-Feed - Jetzt mit den kompletten Artikeln

Wed, 12 Aug 2009 10:56:53 +0100

W�hrend ich vergangene Nacht den RSS-Feed so vor mich hin umgestellt habe, ist mir aufgefallen, dass Feedburner von Google aufgekauft zu sein scheint. Das fand ich sehr interessant und mein alter Feedburner Account wurde in meinen Google Account umgewandelt.

Soll mir recht sein - ich fand es nur lustig, mal einen Moment nicht aufgepasst zu haben und *schwubs* hat Google Feedburner aufgekauft ;-)

Neuer Professor Web RSS-Feed
Alles ist gleich geblieben. Die URL zum Feed und der gewohnte Umfang meiner Beitr�ge. Jetzt k�nnt Ihr aber die Artikel direkt, komplett in Eurem RSS-Reader lesen. Und das sogar ohne Werbung.

Der Link zum RSS lautet: http://feeds.feedburner.com/professorweb

Ihr k�nnt ihn aber auch �ber den Button rechts oben jederzeit aufrufen und hinzuf�gen.

Neues Professor Web Logo
Da der Relaunch wohl noch etwas dauern wird, habe ich das neue Professor Web Logo in der vergangenen Woche in den Header, anl�sslich des 2. Geburtstages von Professor Web, geladen. Das wollte ich nur mal kurz hier anmerken, wenn ich ja eh gerade ein Artikel �ber mich selbst am schreiben bin ;)

Fragen, Anregungen und Kritik
bitte wie immer �ber die Kommentare der jeweiligen Artikel, oder als E-Mail �ber Kontakt. Das Beste am Bloggen sind die Reaktionen der Besucher, vor allem nat�rlich wenn man ihnen gerade helfen konnte. Dies strebe ich weiter an.

Simple HTML DOM Parser - HTML mit PHP �ndern

Tue, 11 Aug 2009 14:38:54 +0100

In jQuery gibt es sehr komfortable Selectors. Man kann zum Beispiel sagen, dass jeder Link der extern ist eine zus�tzliche Klasse zugewiesen bekommt. Der Code in jQuery sieht daf�r so aus:

$("a[href^='http://']").addClass("external");

In CSS 3 gibt es auch die M�glichkeit Selektierungen an Hand von z.B. Eigenschaften vorzunehmen, das s�he in einem CSS3-Stylesheet dann so aus:

a[href^='http://'] {

  color:red;

}

Aber Achtung! CSS3 Befehle werden vom Internet Explorer 8 oder fr�her nicht unterst�tzt. Lediglich Vorreiter wie Firefox, etc. unterst�tzen bereits CSS3-Befehle (und sogar schon HTML5).

Aber ohne jetzt ausschweifen zu wollen, stellt sich mir hierbei die Frage: Wie kann ich eine Klasse �ber PHP dem entsprechenden Link hinzuf�gen? Denn jQuery und damit JavaScript klappt nicht auf allen Computern (kann man ja ausschalten) und CSS3 wird nicht fl�chendeckend unterst�tzt.

Grundvoraussetzung
Also die Grundvoraussetzung ist, dass wir den Quellcode der Seite die wir gleich ausgeben m�chten in einer Variable gespeichert haben um so darauf zugreifen zu k�nnen. Wie das geht mit PHP habe ich in zwei Artikeln etwas n�her erl�utert:

Inhalte mit PHP abfangen und
PHP und .htaccess: Aus statisch mach dynamisch

Haben wir jetzt den Quellcode z.B. in der Variable $inhalte gespeichert, ist die Frage, wie kann z.B. jedem Link, dass sich im DIV mit der id="content" befindet eine zus�tzliche Klasse geben? Es gibt vermutlich seitenlange Regul�re Ausdr�cke mit denen das ginge, aber es geht sehr viel schneller und einfacher!

PHP Simple HTML DOM Parser
Was hier trotz des W�rtchens "simple" immer noch recht kompliziert klingt ist gar nicht so schlimm wie es aussieht. Wenn wir die aktuell 35,2 KB ~~gro�e~~ kleine Datei �ber ein Include oder besser ein Require ins PHP einf�gen, also so:

require_once($_SERVER["DOCUMENT_ROOT"] . "/inc/simple_html_dom.php");

Dann k�nnen wir im Anschluss daran mit neuen Befehlen arbeiten. Wir gehen ja noch davon aus, dass der Quellcode ganz normal als Text in der Variable $inhalte steht.

Damit kann das Script noch nichts anfangen, der Text muss erst geparsed werden. Ist aber nicht schwer, daf�r gibt es folgenden Befehl:

$inhalte = str_get_html($inhalte);

Wir �berschreiben hier die Variable $inhalte mit der geparsten Variante des Quellcodes.

Man kann auch statt einer Variable direkt eine Datei �ffnen oder sich den Quellcode einer externen Seite "leechen" mit folgendem Befehl:

$html = file_get_html('test.html');

$external_html = file_get_html('http://www.google.de/');

Das aber nur am Rande - wir arbeiten jetzt mit $inhalte weiter.

Ich will alle Links im DIV mit der id="content" aufgelistet haben. Kein Problem daf�r nutzen wir folgenden Code:

$meine_links = $inhalte->find('#content a');

Die Variable $meine_links ist jetzt ein DOM-Parser-Objekt, vergleichbar mit einem assoziativen Array, d.h. wir k�nnen hier mit einer foreach-Schleife arbeiten. Also eine Schleife die f�r jedes gefundene Element was entsprechendes ausf�hrt.

Der Befehl von eben, kombiniert mit der entsprechenden Schleife sieht dann so aus:

foreach($inhalte->find('#content a') as $e) {

  echo("Link gefunden mit href: " . $e->href . "<br>\n");

}

$e beinhaltet dank der foreach-Schleife immer das aktuelle Element, dass unserem Selektor entspricht. Die Eigenschaften des Objektes sind auch die Eigenschaften des Elementes. Wir k�nnen dar�ber jedes beliebige Attribut abfragen.

Den Quellcode in der Variable ver�ndern
Im letzten Beispiel haben wir in der foreach-Schleife ein Echo zum Ausgeben verwendet. Wir wollen aber in der Regel den Quellcode selbst manipulieren und anschlie�end komplett als fertige Website ausgeben. Dies geht ebenfalls denkbar einfach und zwar auch �ber die Attribute des Objektes.

foreach($inhalte->find('#content a') as $e) {

  $e->target = "_blank";

}

Dadurch, dass wir der Eigenschaft "target", die ein Link ja besitzt, einen neuen Wert zuweisen wirkt sich diese �nderung auf alle Elemente in dem Quellcode aus. Also alle Links im DIV mit der id="content" haben nun das Attribut "target" mit dem Wert "_blank" zugewiesen bekommen.

Geben wir den Quellcode nun mit

$fertige_inhalte = $inhalte;

echo $fertige_inhalte;

aus, sehen wir den urspr�nglichen Quellcode mit den eben definierten �nderungen. Den Schritt vor dem Echo machen wir um aus dem DOM-Objekt wieder reinen Text zu machen und ihn dann auszugeben.

Wenn wir weiterhin objektorientiert bleiben wollen, k�nnen wir aber auch dieses hier schreiben:

$fertige_inhalte = $inhalte->save();

echo $fertige_inhalte;

Alternativ kann man den Quellcode auch direkt in eine Datei zur�ckschreiben:

$html->save('ergebnis.html');

Das ist total praktisch und relativ einfach zu handhaben.

Spezielle Attribute
Verschiedene Elemente im HTML haben ja verschiedene Eigenschaften. Ein Link hat z.B. ein "target", ein Bild hat kein "target", daf�r einen "alt"-Tag. Hier unterscheiden sich die Elemente, darauf muss man auch entsprechend achten. Versucht man ein Attribut aufzurufen, den es nicht gibt erh�lt man als R�ckgabe "NULL". Man erh�lt allerdings auch "NULL" zur�ck, wenn man in einem Link ein Target ausgeben m�chte, der gar nicht vorhanden ist (obwohl es valide w�re).

Abgesehen von den "normalen" Attributen gibt es aber noch speziell definierte Eigenschafen, die es im normalen HTML so gar nicht gibt.

Und zwar gibt es noch Folgendes:

echo $e->tag; //Ausgabe: a

echo $e->outertext; //Ausgabe: <a href="test.html">Dies ist ein <b>Lin...</a>

echo $e->innertext; //Ausgabe: Dies ist ein <b>Link</b>

echo $e->plaintext; //Ausgabe: Dies ist ein Link

Diese Eigenschaften sind vergleichbar mit innerHTML oder outerHTML aus JavaScript.

Sich im Quellcode bewegen
Wir k�nnen uns auch im Quellcode bewegen. Wir wollen also nicht alle Links haben, die mit "http://" im "href" beginnen, sondern alle Elemente, die danach kommen - oder sich vielleicht innerhalb des Links befinden. Oder wir wollen das Element haben, was sich oberhalb des Links befindet.

Hierf�r haben die Entwickler �hnliche Befehle eingebaut, wie wir sie schon aus JavaScript oder Libraries wie jQuery kennen:

$element_danach = $e->next_sibling();

$element_davor = $e->prev_sibling();

Wir k�nnen auch Kombinationen machen, z.B. alle Kinder-Elemente im n�chsten Element:

$elemente_im_element_danach = $e->next_sibling()->children();

Lizenz, Download und Dokumentation
Dieses Script, was mit seinen 35,2 KB recht schnittig ist, unterliegt der MIT-Lizenz, kann also frei (auch f�r kommerzielle Zwecke) verwendet werden.

Das Projekt selbst liegt bei Sourceforge. Dort liegt auch die Dokumentation und findet sich der Download der verschiedenen Versionen. Die aktuelle Version ist 1.11, diese war auch Bestandteil meiner Tests.

Website von PHP Simple HTML DOM Parser
Download Version 1.11 (als ZIP mit Beispielen)

Wenn Ihr Alternativen kennt, Fragen habt oder schon Erfahrungen damit machen konntet - immer gerne her damit - die Kommentarfunktion steht Euch zur freien Verf�gung.

Wie man in CSS mit Position arbeitet

Thu, 23 Jul 2009 17:17:51 +0100

Die Position-Eigenschaft in CSS (Cascading Stylesheet) kann folgende Werte haben:
absolute, relative, static und fixed

"Fixed" wird vom IE6 nicht unterst�tzt ansonsten sind die verschiedenen Werte unterschiedlich einsetzbar.

Wof�r verwendet man Position?
Mit Position sagt man einem Element wie es positioniert wird. Also nicht wo es zu finden sein soll, sondern an was es sich ausrichten soll.

Hat z.B. ein DIV position:relative; orientiert es sich �hnlich wie auch bei static an den Elementen die sich davor oder dar�ber befinden. Bei position:absolute; jedoch wird es praktisch aus der Struktur genommen und erh�lt komplett unabh�ngige Positionsangaben.

Fast immer verwendet man in Verbindung mit Position auch die Befehle "left" und "top" - gelegentlich auch "right" und "bottom".

Um mal mit einem einfachen Beispiel arbeiten zu k�nnen ist der folgende HTML-Code f�r alle Beispiele gleich:

<div id="header">

    Ich bin oben

</div>



<div id="footer">

    Ich bin unten

</div>

Dieser Quellcode ohne irgendwelche extra Positionsangaben (das entspricht dann position:static) gibt folgendes im Browser aus:

Nat�rlich nicht so, hierbei handelt es sich um schematische Darstellungen. Grauen Hintergrund oder dunkelgrauen Rahmen haben wir im CSS nirgends definiert.

Position: relative
Das Bild eben bleibt so, auch wenn wir im CSS folgendes sagen:

#header, #footer {

  position:relative;

}

Relative Positionierung bedeutet, abh�ngig (also relativ) von anderen Elemente die noch vorhanden sind. Gibt man einem Element keine Position kommt das dem Wert "static" gleich. "Relativ" verh�lt sich prinzipiell genau so, es gibt jedoch noch einen kleinen Unterschied den ich gleich noch erl�utern werden und zwar in Kombination mit "absolute".

Position: absolute
Geben wir beiden Elementen position:absolute; erhalten wir folgendes:

Huch! Wo ist denn das zweite DIV hin? Wir haben doch nichts am HTML ge�ndert?!
Nun beide DIVs orientieren sich am dar�ber gelegenen Objekt. In diesem Fall den . Da wir keinem irgendwelche Top- oder Left-Angaben mitgegeben haben, befinden sich beide Elemente an der gleichen Position. Left:0 und Top: 0.

Das bedeutet sie befinden sich �bereinander. Wir sehen das untere DIV ganz oben, da man sich das vorstellen muss wie mit Zetteln auf einem Tisch: Lege ich den ersten Zettel auf den Tisch und dann einen zweiten dar�ber, sehe ich oben den zweiten.

Manchmal sind solche �berlagerungen durchaus erw�nscht, dann kann man mit der CSS-Eigenschaft z-index bestimmen, welcher h�her liegt. Je h�her der z-index, desto h�her auch die Position des Elements. H�her bezieht sich aber nun auf die Z-Achse, also die Tiefe.

#header, #footer {

  position:absolute;

}

#header {

  z-index:10;

}

Jetzt w�re "Ich bin oben" zu lesen.

Bei Position:absolute wird fast immer auch mit Positionsangaben gearbeitet.

#header, #footer {

  position:absolute;

}



#header {

  top:0;  left:0;

}



#footer {

  top:20px; left:10px;

}

Das sieht dann so aus:

�brigens, ich habe jetzt die DIVs l�nger gemacht, als sie eigentlich sind. Denn bei position:absolute verliert das DIV das ohne eine definierten Breite ja immer so breit ist wie das umliegende Elemente, jegliche Zuordnung und ist dann nur noch so breit wie sein Inhalt. Es sieht praktisch dann so aus wie display:inline - bleibt aber dennoch block.

Position: fixed
"Fixed" ist wie "absolute", mit dem Unterschied, dass es beim Scrollen weiterhin zu sehen bleibt. Ein Logo mit bottom:0; right:0; und position:fixed ausgerichtet ist immer in der unteren rechten Ecke zu sehen, auch wenn man scrollt. Dieser Wert wird vom Internet Explorer 6 nicht unterst�tzt.

Die Kombination aus absolute und relative
Jetzt wird es interessant! Wenn ich dem DIV position:absolute gebe und top:10px; left:10px setze, dann kann man sich durchaus die Frage stellen: Von wo denn 10 Pixel?

Die Antwort ist, wenn man nichts anderes definiert hat: Vom Rand der Website. Also von ganz links oben. Ein bottom:10px; w�rde �brigens nicht das untere Ende des Browsers als Basis nehmen, sondern das untere Ende der Website. Ist die Seite also noch nicht vorbei und man muss herunterscrollen werden die 10 Pixel von dem Ende der Website genommen.

Als Beispiel nehmen wir jetzt mal folgenden HTML-Code:

<div id="website">



    <div id="box1">Box 1</div>

    <div id="box2">Box 2</div>



</div>

und folgendes CSS:

#website {

  width:960px;

  height:500px;

}



#box1, #box2 { position:absolute; }



#box1 {

  top:10px; left:10px;

}



#box2 {

  bottom:10px; right:10px;

}

Das Ergebnis sieht so aus:

Obwohl sich die beiden Boxen innerhalb von #website befinden werden sie mit position:absolute aus dem Raster gehoben und richten sich nun an den Website-Ma�en ganz au�en.

Wenn man das umgehen m�chte und die Boxen sich innerhalb von Website mit 10 Pixel Abstand zum Rand befinden sollen, ist die L�sung einfach eine Kombination aus dem bisher verwendeten absolute und relative!

Wir erg�nzen unser letztes CSS folgenderma�en:

#website {

  width:960px;

  height:500px;

  position:relative;

}

...

Der Rest bleibt identisch. Das Ergebnis sieht dann, so wie wir es wollten aus, n�mlich so:

Die Anwendungsgebiete f�r diese Technik sind gro�. M�chte man zum Beispiel einen Artikel schreiben. Und in der letzten Zeile soll neben dem Text noch ein Drucken-Link folgen k�nnen wir das nicht anders l�sen (au�er garstige Tabellen zu nutzen).

Ein bottom:16px; (wenn die Zeilenh�he z.B. 16 Pixel ist) w�rde ohne das "relative" am Ende der Website erscheinen. Gibt man aber dem DIV das um den Artikel liegt ein "position:realtive" und dem Link innerhalb des DIV ein "position:absolute; bottom:16px;" erh�lt man das gew�nschte Ergebnis.

Egal wie lang der Artikel wird (das wei� man ja selten im Voraus) der Link befindet sich immer ganz unten. Diese Technik hat sich bew�hrt und ist die einzige, mir bekannte M�glichkeit so etwas mit CSS, ohne Tabellen umzusetzen.

Soviel mal zu den M�glichkeiten von Position in CSS. Wenn Ihr noch Erg�nzungen, Links oder Fragen habt, nur her damit :)

Firefox 3.5 und Firebug 1.4 haben einen Bug

Tue, 21 Jul 2009 14:22:49 +0100

Der Bug wurde in Firefox 3.5.2 behoben

"Web Development Evolved" lautet der Untertitel dieser wirklich g�ttlich anmutenden Erweiterung f�r den Firefox Browser. Der Slogan bedeutet soviel wie "Webentwicklung weitergedacht".

Die Rede ist von der Erweiterung Firebug, welche ausnahmslos jedem Webdesigner eine gro�e Erleichterung sein d�rfte, vor allem beim Debugging von Webseiten und JavaScripts.

In der neuen Version von Firebug 1.4.0 die kurz nach Firefox 3.5 erschienen ist, scheint es jedoch einen kleinen aber relativ gravierenden Fehler zu geben, der das Arbeiten mit Firebug nahezu unm�glich macht.

Update: Der Fehler ist in Version 1.4.1 leider immer noch enthalten.

Die Ausgangssituation
Der Fehler wird verursacht durch f�r verschiedene Medien definierte Stylesheets. Ein Stylesheet kann je nach Medium, dass die Seite gerade aufruft verschiedenen definiert sein. So ist es bei mir z.B. �blich, dass ich spezielle Formatierungen verwende um die Seite beim Ausdrucken anders aussehen zu lassen, als auf dem Monitor.

Ein entsprechendes Stylesheet s�he z.B. so aus:

#website {

  background:red;

}



@media print

{

  #website {

    background:white;

  }

}

Das Element mit der id="website" w�re im Browser mit einem roten Hintergrund versehen und beim Ausdruck mit einem wei�en. Dies ist nur ein Beispiel, was in dieser Form nun keine Anwendung finden d�rfte - aber ich nutze die Technik ganz gerne um Content-unabh�ngige Elemente wie Header oder Footer beim Druck auszublenden.

Der Fehler
Firebug in der neusten Version zeigt, sobald man ihn aktiviert die Print-Variante an. Man sieht also erst die normale Website, aktiviert Firebug und auf einmal ver�ndern oder verschwinden alle entsprechend formatierten Elemente.

So kann man nat�rlich nicht effektiv arbeiten. Hier mal eine Beispielseite bei der die Nutzung von Firebug zu dem Fehler f�hrt.

Die L�sung (zum Update)
Es gibt zwar ein Workaround, doch das ist recht impraktikabel: Die Print-Definitionen im Stylesheet f�r den Zeitraum der Entwicklung der eigentlichen Seite auskommentieren.

Also so:

#website {

  background:red;

}



/* @media print

{

  #website {

    background:white;

  }

} */

So interpretiert Firebug nun nur noch den tats�chlich g�ltigen CSS-Code und l�sst die Kommentare als solche links liegen.

Alternativen?
In meinem Beispiel h�nge ich die Print-Definitionen unter das normale Stylesheet. Bisher war dies auch nirgends ein Problem - auch Firefox 3.5 ohne aktiviertem Firebug interpretiert den Code einwandfrei. Gegebenenfalls (das habe ich jetzt aber nicht ausprobiert) reicht die Aufteilung von Screen- und Print-Definition in zwei Dateien mit einem entsprechend definiertem Aufruf im HTML:

<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />

<link rel="stylesheet" media="print" href="print.css" type="text/css" />

Wenn Ihr hier Erfahrungswerte habt, w�rde ich mich �ber einen kurzen Kommentar freuen.

Ansonsten bleibt nur Abwarten und Tee trinken, bis eine neue Version von Firebug ver�ffentlicht wird, die den Fehler entsprechend behebt.

Die Entwickler sagen,...
dass in Version 3.5.2 von Firefox der Fehler behoben sein wird. Noch ist diese Version nicht drau�en, d.h. bis dahin m�ssen wir noch etwas Tee trinken und warten.

Link: Firebug Issue #2141

Update: Eine weitere Alternative
So eben ist mir eine weitere Alternative eingefallen, die auch wunderbar funktioniert. Dieser Bug scheint erst ab der Beta 7 von Firebug 1.4.0 aufzutreten. Da man sich auch vergagene Versionen installieren kann empfiehlt es sich solange es kein neues Update gibt auf eine Beta-Version zur�ckzuspringen.

Ich bin mal alle durchgegangen. In der Beta 5 war der Fehler noch nicht, in der Beta 7 schon. Das hei�t, einfach die Beta 5 installieren und produktiv arbeiten k�nnen.

Download: Firebug 1.4.0 Beta 5

Diese Beta-Version sieht noch etwas anders aus als die endg�ltige Fassung, aber man kann dennoch wunderbar damit arbeiten. Der Fehler tritt zwar immer noch vereinzelnt auf, jedoch ist er mit einem Refresh (F5) der Website wieder behoben.

Letztes Update: Fehler in Firefox 3.5.2 und Firebug 1.4.1 behoben
Wie die Entwickler �ber Google Code schon mitgeteilt haben, ist in dem k�rzlich erschienenen Firefox Update 3.5.2 dieser Fehler behoben. Auch andere kleine Darstellungsfehler wie das Verschwinden von CSS-Attributen wenn man sie ver�ndert, wurden behoben. Damit ist dieser Artikel mehr oder weniger hinf�llig :)

�brgens...
Auch neu ist, dass sich Firebug automatisch in Popups und neuen Fenstern �ffnet, die von der gleichen Seite kommen wie der, auf der schon Firebug ge�ffnet ist. Das kann man aber gl�cklicherweise abschalten. In den Optionen bzw. Einstellungen einfach den Haken bei "URLs mit gleicher Herkunft aktivieren" raus nehmen. Dann wird Firebug wieder f�r jedes Fenster separat gehandlet.

Denn es ist nervig, wenn ich auf einer Website Firebug im Einsatz habe und in einem anderen Fenster im CMS ein Popup �ffne um z.B. ein Bild hochzuladen, welches dann erstmal komplett von Firebug �berlagert wird.

YouTube stellt den Internet Explorer 6 Support ein

Wed, 15 Jul 2009 12:42:05 +0100

Momentan kursieren drei Versionen des Internet Explorers im Internet herum. Zwischen IE6 und IE8 ist alles vertreten. W�hrend der IE8 erst einige Monate alt ist hat der Internet Explorer 6 schon knapp 8 Jahre auf dem Buckel. Updates im IE6 gibt es kaum und wenn sind sie sicherheitstechnischer Natur.

Verst�ndlich das ein so alter Browser mit "neuen" Standards nicht unbedingt zurecht kommt. Diese Tatsache, kostet jedem von uns wertvolle Zeit, da wir teilweise Extraw�rste f�r den IE entwickeln m�ssen um die Darstellung der Website dort erst m�glich zu machen.

Google macht was dagegen!
Google ist mit seinen Diensten das gr��te Unternehmen in Internet und ist damit nat�rlich richtungsweisend. Der weltweit bekannteste und beliebteste Video-Streaming-Dienst YouTube dient nun als erste Aktion den alten Internet Explorer 6 aus der Welt zu schaffen.

Folgender Hinweis erwartet den IE6-Nutzer auf der YouTube-Website:

Hinweis: Ich habe diesen Screenshot grafisch etwas abge�ndert um die Darstellung zu optimieren.

Dieser Hinweis ist das erste, was den Besucher der YouTube-Website unterhalb der Suchleiste �ber die komplette Breite der Website erwartet - jedoch nur dann, wenn man den IE6 als Browser nutzt. Eine emulierte Internet Explorer 6 Version (die parallel mit anderen Versionen installiert wurde) funktioniert hier nicht. Der Netrenderer bietet da aber eine entsprechende Alternative.

Das Mittel zum Zweck
YouTube, dass mit seinen enormen Zugriffszahlen einer der f�hrenden Seiten im Internet sein d�rfte erreicht extrem viele Menschen - vor allem privat.

Um mal eine Gr��enordnung von YouTube zu nennen: Jede Minute werden bei YouTube 10 Stunden Videomaterial hochgeladen. Dies schreibt Google selbst im YouTube Fact Sheet (englisch).

Als Vorreiter im Internet hat Google auf YouTube etwas geschaffen, dass viele andere als Vorlage nehmen d�rften um �hnliche Ma�nahmen durchzuf�hren.

Auch die neue ProfessorWeb Seite m�chte ich ohne IE6-Support ver�ffentlichen - wo, wenn nicht bei den Webdesignern :-)

Was hei�t das f�r uns?
F�r uns Webdesigner und Webentwickler ist dies eine frohe Nachricht, denn endlich hat der IE6 seinen Todessto� erhalten und das nicht nur mit einem kleinen Dolch, sondern direkt mit der dicken Keule.

W�hrend die Nutzer auf andere Versionen vom IE oder gar andere Browser umsteigen, sinkt der Verbreitungsgrad des IE6 und irgendwann ist er so wie schon der Internet Explorer 5.5 vernachl�ssigbar in der Erstellung von Internetseiten.

F�r mich hei�t das �brigens auch, dass ich keine Artikel mehr verfasse welche L�sungen bei welchen Interpretationsproblemen des IE6 anwendbar sind. Und kleine Hass-Artikel des IE betreffend werden (so hoffe ich) auch weniger werden ;-)

Fazit
Insgesamt ist dies eine sehr gute Nachricht. Ich bin gespannt wer noch auf den Zug springt und damit den IE6 in die wohlverdiente Rente schickt.

Heise.de: YouTube stellt Unterst�tzung f�r Internet Explorer 6 ein

Tool um YouTube-Website als IE6-Nutzer anzeigen zu lassen:
Netrenderer

Danke Tim, f�r den Hinweis zur Heise-News.

Min-Height: Die mindest H�he und ihre Probleme

Mon, 29 Jun 2009 11:44:24 +0100

Height gibt eine feste H�he an. Das Element ist also immer so hoch, egal wie viele Inhalte darin sind. Sind es mehr, bleibt die H�he des umschlie�enden Elementes aber konstant, was teilweise nicht so h�bsch aussehen kann.

Daf�r gibt es in CSS die min-height Eigenschaft.
Sie gibt keine fixe H�he vor, sondern beschreibt wie hoch ein Element mindestens sein darf.

So k�nnte der CSS-Code oder grauen Box aussehen:

.box {

  background:#EDEDED;

  border:1px solid #DEDEDE;

  padding:5px;

  width:120px;

  min-height:100px;

}

Die Breite der grauen Box ist immer 130 Pixel (120 Pixel breite + (2x 5 Pixel Innenabstand links und rechts)). Die H�he jedoch ist nun flexibel. Sie ist mindestens 110 Pixel hoch und nach oben hin offen, je nach Inhalt.

Ist eine solche Box z.B. nur eine Zeile hoch kann das ziemlich unsch�n aussehen, daher ist ein solcher Befehl ziemlich praktisch.

Problem im IE6
Der Internet Explorer 6 kennt min-height gar nicht. Das CSS-Attribut height wird im IE6 so verwendet wie in allen anderen Browsern die min-height. Das f�hrt somit unweigerlich zu Konflikten, wenn man keine browserspezifische Anweisungen gibt. Nachfolgend drei L�sungsans�tze:

1. Min-Height durch Height mit Unterstrich
Diese Verfahrensweise nutzt mein gesch�tzter Kollege Sven gerne (dem ich auf diesem Weg zum bestandenen Fachinformatiker/Anwendungsentwickler gratulieren m�chte :D), von dem ich auch von dieser Variante erfahren habe.

Man f�gt dem CSS etwas hinzu:

.box {

  background:#EDEDED;

  border:1px solid #DEDEDE;

  padding:5px;

  width:120px;

  min-height:100px;

  _height:100px;

}

Jetzt k�nnte man denken: "Whoo, ein neues Feature in CSS? Der Unterstrich _",
doch tats�chlich ist es einfach ein Fehler.

Ein Fehler der jeden Browser (au�er den IE6) dazu veranlasst diese Zeile komplett zu ignorieren. Der Internet Explorer 6 hingegen ignoriert in diesem CSS-Beispiel den min-height (weil er den Befehl nicht kennt) und nutzt stattdessen munter den Height-Befehl da ein voranstehender Unterstrich (_) wohl keine Syntax-Verletzung darstellt.

Height wird im IE6 ja ebenso interpretiert wie in allen anderen Browsern die Min-Height-Eigenschaft, daher kommt man so zu einem einheitlichen Ergebnis in allen Browsern.

2. Verschiedene CSS-Dateien f�r den Internet Explorer
Dank den hier beschriebenen Conditional Comments oder einer einfachen PHP-Funktion ($_SERVER['HTTP_USER_AGENT'] und get_browser()) kann man je nach verwendetem Browser individuelle Inhalte darstellen. So kann man auch eine spezielle CSS-Datei f�r den IE6 zus�tzlich laden in der folgendes steht:

.box {

  height:100px;

}

So hat man keinen syntaktischen CSS-Fehler provoziert und kommt zum selben Ergebnis.

3. Das Element .minheight
Ich pers�nlich verwende in meinen Projekten eine Variante, die vielleicht etwas umst�ndlicher, daf�r syntaktisch sowie logisch einwandfrei ist.

Ich f�ge in die Box ein Element mit einer CSS-Klasse (.minheight) und gebe diesem Objekt die Breite 1 Pixel und die H�he x Pixel, wobei x f�r die gew�nschte Mindesth�he steht.

Dieses Element muss immer als erstes in der Box erscheinen. Der HTML-Code sieht dann so aus:

<div class="box">

  <div class="minheight"></div>

  Inhalte der Box

</div>

Das passende CSS so:

.box .minheight {

  float:right;

  height:100px;

  width:1px;

}

Bei der Verwendung des Float-Befehls sollte man aber auch daran denken, es mit clear:right; entsprechend wieder aufzuheben ;-)

Diese L�sung hat zwei Nachteile:
1. Sie ist umst�ndlicher
2. Sie nimmt ein Pixel Platz in unserer Box weg. Wer darauf Wert legt sollte zu einer der anderen beiden L�sungen tendieren.

Fazit
Drei verschiedene L�sungen, mit jeweils einem ganz eignem Charme. Ich pers�nlich empfehle f�r die Sauberkeit die zweite oder dritte L�sung. Wenn es schnell und schmerzlos gehen muss, auch mal die erste Variante.

Dies alles ist nur f�r den Internet Explorer 6 n�tig. Wenn sein Marktanteil mal auf ein verschwindend geringes Prozentp�nktchen geschrumpft ist, sind solche Tricksereien nicht mehr notwendig.

Master Plan - �ber die Macht von Google

Fri, 26 Jun 2009 22:53:43 +0100

Die Website um das Video "Master Plan - About the power of Google" beschreibt kurz, pr�gnant und sehr anschaulich was Google macht und warum unsere Privatsph�re dadurch gest�rt wird.

Besonders hervorheben m�chte ich die Aufmachung des Videos, wirklich sehr anschaulich mit netten Effekten und 3D-Animationen. Die unterschwellige Musik erinnert ein wenig an die "Umbrella Corporation" aus der Filmreihe Resident Evil.

Der Film darf zum Nachdenken anregen.

Hier geht es zur Website des Videos, dort kann es auch herunter geladen werden:

Master Plan - About the power of Google