Seit dem Update Herbst 2014 steht auch die Möglichkeit zur Bereitstellung responsiver Websites zur Verfügung.
Diese Templates arbeiten nicht tabellenbasiert, sondern auf Basis der HTML5-Definitionen von Bereichen wie <article>, <nav>, <div>, <aside>, <header>, <footer> usw.
Hierfür stehen in der Template-Verwaltung zwei zusätzliche Optionen zur Verfügung:
-
DIV-Template
(mit Header und Footer aus DIVtop bzw. DIVbottom im Mandanten
oder, falls diese leer sind, htmlTOP/htmlBottom im Mandanten)
-
DIV-Popup
Popup ohne Rahmen etc.
diese arbeiten sinngemäß ident wie die anderen beiden Optionen für tabellenbasierte Templates.
Als Responsive-Templates definierte Templates werden nur in der Template-Content-Verwaltung für Responsive-Templates angezeigt, aber nicht unter den normalen Templates. Und umgekehrt werden die normalen (statischen) Templates auch nicht unter den Responsive-Templates angezeigt.
APPLE - HTML-Darstellungsfehler
-
Problem von Apple IOS bei <div> mit display: inline-block;
Apple IOS erkennt nicht, dass auch zwischen unmittelbar aufeinander treffenden </div><div> ein Zeilenumbruch möglich ist und schreibt deshalb alle <div> nebeneinander, obwohl Sie eigentlich umgebrochen werden sollten.
iContent schreibt aber die <div>TemplateContent</div><div>TemplateContent</div> unmittelbar nebeneinander, um unerwünschte Umbrüche zu vermeiden weil ein [enter] oder [space] zwischen den </div> </div> ein wenig Platz braucht und sich dann die Summe der Elementbreiten im Fluid Design nicht mehr ausgehen würde.
-
Lösungsvorschlag:
-
In Styles kann zwischen den </div><wbr><div> ein <wbr> eingefügt werden, das benötigt 0px Platz und gilt für Apple als Trennmöglichkeit
-
In Templates kann das zwischen den Template-Contents eingefügte <span></span> genutzt werden, um über CSS eine Umbruchsmöglichkeit zu schaffen:
Beispiel ( aus www.cryptolink.at )
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:1024px)
{
span:before { content:"\00200B" /* für ipad geschütztes Leerzeichen einbinden */; }
.wide6 , .wide4, div#main { display: inline-block; }
span#labelstyle:before , span#labelhtmltop:before, span#labelhtmlbottom:before,
form > span:before, td > span:before, div > span:nth-of-type(1):before,
nav > span:before { content: none; }
}
-
oder:
Templates zeilenweise aufbauen, wobei das umfassende <div> kein(!) display-block besitzten darf, dann wirds auch von Apple richtig ausgeführt