blog.bartlweb - a technologist's external brain

Thema: Webentwicklung

emHack – 1em auf 10 Pixel setzen

MIt Hilfe des emHacks ist es möglich die relative Größeneinheit em sinnvoll und vereinfacht zu nutzen, da dieser 1em immer auf 10px anstatt 16px setzt und damit die Umrechnung erheblich leichter wird.

Der Hack sollte als erste CSS-Definition eingefügt werden:

/* em Hack */
* { font-size:1em; }
html { font-size:62.5%; }
body { font-size:1em;}

Achtung: im InternetExplorer stimmt die Umrechnung nur für kleinere Werte, bei größeren Werte (>100px) werden die Angaben auf Grund von Rundungsfehlern nicht exakt in Pixel umgerechnet. Dies ist ein Allgemein bekanntes Problem und tritt auch bei Prozentangaben auf.

min-height Hack für IE6

IE6 unterstützt dass CSS-Attribut min-height nicht. Folgender Workaround schafft Abhilfe:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Internet Explorer Allheilmittel

d, css is feature."

Das gerade die weit verbreiten Browser von Microsoft nicht gerade für ihre CSS-Unterstützung berühmt sind ist bekannt, dass sich die meisten Layout-Bugs allerdings mit dem zuweisen des hasLayout-Attributes für die betroffenen HTML-Elemente beheben lässt eher weniger.

overflow: hidden;

ist eine der wirksamsten Waffen gegen Layoutfehler. Hilft diese Eigenschaft nicht oder ist die Anwendung nicht möglich könnte auch eine der folgenden Eigenschaften Abhilfe schaffen.

zoom: 1;
height: 1%;

Hover Grafiken mit CSS erstellen

Die meisten Hover-Effecte auf Grafiken werden mittels JS gelöst. Diese Lösung basiert rein auf CSS. Dabei enthält der betreffende Link als Inhalt das Ausgangs-Icon. Per CSS wird dieses ausgeblendet und als Hintergrundgrafik das selbe Icon noch einmal gesetzt. Dieses kann dann simple per :hover oder :focus und CSS ausgewechselt werden.

HTML

<a href="#edit" title="hovericon" class="link_icon">
  <img src="icon.gif" alt="edit"/>
</a>

CSS

a.link_icon img {
  visibility: hidden;
}
a.link_icon {
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(icon.gif);
}
a.link_icon:hover, a.link_icon:focus {
  background-image: url(icon_hover.gif);
}

Flash xHTML-konform einbinden

Flash xHTML-konform einbinden

<object width="326" height="171" type="application/x-shockwave-flash" data="movie.swf">
  <param value="movie.swf" name="movie"/>
</object>

Flash laut Adobe einbinden

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="305" height="32" id="countdown" align="middle">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="movie.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="movie.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="305" height="32" name="movie" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Aktuelle User-ID in Typo3-Extension auslesen

Wie viele Infos ist auch die ID des aktuell im Frontend angemeldeten Benutzers im globalen TSFE-Array gespeichert.

$GLOBALS['TSFE']->fe_user->user[uid]

Link auf die aktuelle Seite in einer Typo3-Extension ausgeben

Um einen vollständigen Link (falls RealUrl aktiv ist, auch sofort in eine lesbaren Form) auf die aktuelle Seite zu erhalten wird folgender Funktionsaufruf benötigt:

$this->pi_getPageLink($GLOBALS["TSFE"]->id , '',  '')

Typo3-Content in Extension ausgeben

Um ein spezialles Content-Element, dessen ID bekannt ist, in einer Typo3-Extension auszugeben ist folgender Code notwending:

$tt_content_conf = array('tables' => 'tt_content','source' => $this->conf['contentID'],'dontCheckPid' => 1);
$markerArray['###TEXT###'] = $this->cObj->RECORDS($tt_content_conf);

Link mit Parameter in Typo3-Extension erstellen

Das Typo3 Framwork bietet die möglichkeit einfach Links samt Parameter auf bestimmte Seiten von denen die ID bekannt ist zu generieren.

$referer = $GLOBALS["TSFE"]->id;
$urlparams = array("uid" =>  $row['uid'], "referer" => $referer);        
$marker['###LINK###'] = $this->pi_getPageLink($this->conf['page'] , '',  $urlparams);