Trotz aller Verbesserungen und die recht komfortable CSS-Unterstützung für den Internet Explorer 8, kann es immer wieder Fälle geben, in denen man auf einen CSS-Hack zurückgreifen muss. Hier ist ein CSS-Hack, welcher im IE8 Standard-Modus funktioniert.
.elementORClass {
color /*\**/: blue\9
}
Dieser IE CSS-Hack ist für alle IE Versionen gültig:
.elementORClass {
color: blue\9
}
Ein Teil eines Textes vor der Google Indizierung zu schützen ist recht einfach, aber nicht jeder kennt diese Methode. Verwende einfach den folgenden HTML-Kommentar in deinem Source-Code, um einen bestimmten Satz oder Text vor der Indizierung von Google zu schützen.
Dieser Text wird von Google indiziert... <!--googleoff: all--> ...aber dieser nicht! <!--googleon: all>
Das ist auch schon alles was ihr machen müsst. Dieser HTML-Kommentar weist den Google-Bot hin darauf das er den eingebetteten Text nicht indizieren soll.
In meiner neuen Serie werden ich euch alle Möglichen Menüs für Typo3 vorstellen. Diesmal ein Codesnippsel für ein Listen Menu mit Typoscript für mehrere Levels.
// TYPO3 settings
// mainmenu
lib.mainnavi = HMENU
lib.mainnavi {
entryLevel = 0
1 = TMENU
1 {
noBlur = 1
expAll = 1
wrap =
<ul class="mainnavi">|</ul>
NO = 1
NO {
ATagTitle.field = title // description // abstract
ATagBeforeWrap = 1
stdWrap.htmlSpecialChars = 1
wrapItemAndSub =
<li class="first"> |</li>
|*|
<li> |</li>
|*|
<li class="last"> |</li>
}
ACT = 1
ACT {
ATagTitle.field = abstract // description // title
ATagParams = class = "active"
ATagBeforeWrap = 1
stdWrap.htmlSpecialChars = 1
wrapItemAndSub =
<li class="first"> |</li>
|*|
<li> |</li>
|*|
<li class="last"> |</li>
}
}
2 < .1
2 = TMENU
2 {
wrap =
<ul class="level2">|</ul>
}
3 < .1
3 = TMENU
3 {
wrap =
<ul class="level3">|</ul>
}
4 < .1
4 = TMENU
4 {
wrap =
<ul class="level3">|</ul>
}
}
Erklärungen für das Listen Menu:
Mit wrapItemAndSub habt ihr die Möglichkeit den ersten und dem letzten li eine bestimmte CSS Klasse zuzuweisen.
Mit ATagTitle.field könnt ihr den Anchor eine Title Beschreibung die Ihr im Backend einfügt zuweisen.
Mit stdWrap.htmlSpecialChars = 1 wird darauf geachtet das die HTML-Entities richtig erstellt werden.
Webdevelopment Links for light reading – Part 3
- How To Use The Background Eraser Tool In Photoshop
- How to Override Inline CSS Styles
- Der Title aus SEO- & Usersicht
- The CSS Overflow Property
- CSS Quick-Question Edition
- 7 Quick CSS Enhancements for Better User Experience
- The Do´s & Don´ts of Modern Web Design
- 40 Outstanding CSS Techniques And Tutorials
- 25 Advanced CSS Techniques
- The Ultimate Guide to .htaccess Files
Hier ein Codesnippsel für ein Brotkrumenmenü (Breadcrumb) Menu/Navigation mit Typoscript erstellt. Dieses spezielle Menü zeigt uns an, wo wir uns gerade befinden. Hier noch einige Beispiele wie man Breadcrumb Menus Effektiv einsetzen kann.
// TYPO3 Constants
baseUrlOn = 1
baseUrl = http://www.domain.de
// TYPO3 settings
lib.breadcrumb = HMENU
lib.breadcrumb {
special = rootline
special.range = 1|-1
includeNotInMenu = 0
1 = TMENU
1 {
noBlur = 1
wrap =
<ul>
<li><a href="{$baseUrl}">Home</a> ></li>
|</ul>
NO {
linkWrap =
<li> | ></li>
ATagTitle.field = abstract // title // description
ATagTitle.noTrimWrap = | zur Seite: |
}
CUR = 1
CUR {
linkWrap =
<li> |</li>
doNotLinkIt = 1
}
}
}
includeNotInMenu = 0/1 gilt für Seiten die auf Hide in Menu gestellt sind.
Webdevelopment Links for light reading – Part 2
- Designing Drop-Down Menus: Examples and Best Practices
- Bilder: Alt-Text und/oder Title-Text? – Image-Tag Grundlagen
- 45 Apple-Inspired Photoshop Tutorials
- CSS Formatter and Optimiser
- 10 Web Analytics Tools For Tracking Your Visitors
- 10 Best jQuery Datepickers Plugins
- How to Build the Best Browser Test Suite
- Internet Explorer Collection
- 40 Outstanding CSS Techniques And Tutorials
Ein Kunde wünschte die Darstellung bestimmter Inhaltselemente in einem bestimmten DIV-Container auf all seinen Seiten. Nach kurzer Nachforschung im Internet fand ich heraus, dass dies sich sehr einfach per TypoScript lösen lässt. Dieser TypoScript Codesnippsel kann für TemplaVoila und Modern Template Building benützt werden.
// Typoscript
lib.sidepanel = COA
lib.sidepanel.10 = RECORDS
lib.sidepanel.10 {
tables = tt_content
source = tt_content_33
}
lib.sidepanel.20 = xxx
tt_content_33 bezieht sich auf die uid 33 des Inhaltes in der tt_content tabelle.
An overlooked aspect of websites is the formatting of HTML and CSS documents. This affects validation, SEO, and visual ease of use. Visual ease of use is the last thing most authors tend to keep in mind, but it’s still very important. If you’re building a template for a client, or to sell on ThemeForest, it is important that it’s visually formatted properly. Here are some examples of well formatted HTML and CSS.
