iContent Anwenderdokumentation

iContent im Detail:
 
 

Responsive-Templates

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