Suche
Teilen
startseite » forum

[Frage] Typo3 + jQuery + Android Standardbrowser --> Bilder aus Conten Elemententen werden im 1. Ladevorgang nicht angezeigt [Gelöst] TYPO3-Version: -

  • angsch-li angsch-li
    Padawan
    0 x
    43 Beiträge
    0 Hilfreiche Beiträge
    15. 08. 2014, 15:50

    Hallo Leute,

    Seit langem durfte ich wieder eine Webseite bauen und dachte mir ich versuche es gleich mit "responsive Design" und HTML5 / CSS3.

    So weit, so gut.. die letzten 20% der Webseite benötigen wieder einmal 80% der Zeit.

    Vorab technische Angaben: TYPO3 6.2.1
    Seite: http://www.perfectyou.ch

    Ab
    "@media only screen and (max-width: 650px)"
    beginnt ein verstecktes Menü, welches mit jQuery ein- und ausgeblendet werden kann.

    Dort beginnt auch das Problem... und zwar, so viel ich weiss, nur beim Android Standardbrowser.

    Die Bilder im Headerbereich werden via Html/Css geladen...kein Problem.
    Aber die Bilder, welche sich im Content-Bereich befinden und über Typo3 Content-Elemente eingebunden werden, werden nicht geladen. Lediglich der Text wird angezeigt. Wenn man jedoch die Seite dann nochmals aktualisert kommen auch plötzlich die Bilder?!

    Nach meinen unzähligen Testversuchen liegt es eindeutig am jQuery. Wenn ich das nämlich deaktiviere, dann werden auch die Bilder angezeigt (nach gelöschtem Cache, versteht sich).

    Ich bin nun leider kein Javascript /jQuery Hirsch, deshalb meine Frage an euch.. kennt jemand dieses Phänomen? Ist etwas falsch am js-code? Gemäss Validation müsste er korrekt sein.

    Vielen Dank für eure Hilfe.

    lg
    angsch-li

    Hier noch meine Daten:

    1. jQuery(document).ready(function($){
    2.   $('#navphone').hide();
    3.  
    4.   $('.test').click(function(einblenden){
    5.     $('#navphone').slideToggle();
    6.   });
    7.  
    8.  
    9. })

    1. @import url('http://fonts.googleapis.com/css?family=Nunito:400,300,');
    2.  
    3. @font-face {
    4. font-family : "'Nunito'";
    5. font-style : normal;
    6. font-weight : 300;
    7. src : local('Nunito-Light'), url(http://fonts.gstatic.com/s/nunito/v6/1TiHc9yag0wq3lDO9cw0vqCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
    8. }
    9.  
    10. @font-face {
    11. font-family : "'Nunito'";
    12. font-style : normal;
    13. font-weight : 400;
    14. src : local('Nunito-Regular'), url(http://fonts.gstatic.com/s/nunito/v6/kpI87QY2ce-mk2ZnKb-r0g.ttf) format('truetype');
    15. }
    16.  
    17.  
    18. header, footer, content, nav {
    19.   margin: 0;
    20.   padding: 0;
    21.   border: none;
    22. }
    23.  
    24.  
    25. body {
    26. margin : 0;
    27. }
    28.  
    29. li {
    30. font-size : 90%;
    31. font-family : 'Nunito', Arial, Helvetica, sans-serif;
    32. font-weight : 300;
    33. color : #000000;
    34. }
    35.  
    36. p {
    37. font-size : 90%;
    38. font-family : 'Nunito', Arial, Helvetica, sans-serif;
    39. font-weight : 300;
    40. color : #000000;
    41. }
    42.  
    43. td {
    44. font-size : 90%;
    45. font-family : 'Nunito', Arial, Helvetica, sans-serif;
    46. font-weight : 300;
    47. color : #000000;
    48. border : 0;
    49. width : 100%;
    50. padding : 10px;
    51. }
    52.  
    53. table {
    54.     border-collapse: separate;
    55.     border-spacing: 0;
    56. }
    57.  
    58. tr:nth-child(even) {
    59.    background-color: #fff;
    60. }
    61. tr:nth-child(odd) {
    62.    background-color: #FFEBF5;
    63. }
    64.  
    65.  
    66. td:nth-child(even) {
    67.   text-align: right;
    68. }
    69. td:nth-child(odd) {
    70.   text-align: left;
    71. }
    72.  
    73.  
    74. iframe {
    75. width : 100%;
    76. min-height : 500px;
    77. border : 0;
    78. }
    79.  
    80.  
    81.  
    82. #nav-icon{
    83.   display:none;
    84. }
    85.  
    86.  
    87. #content h1{
    88.   font-size: 100%;
    89.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    90.   font-weight: 300;
    91.   color: #ff0090;
    92. }
    93.  
    94. #content p {
    95.   padding: 0 0 8% 0;
    96.   font-size: 90%;
    97.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    98.   font-weight: 300;
    99.   color: #000000;
    100.   border-bottom-width:0;
    101.   border-bottom-style:solid;
    102.   border-bottom-color:#FFCBEA;
    103. }
    104.  
    105. #content a:link   { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    106. #content a:visited  { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    107. #content a:hover     { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    108. #content a:active  { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    109.  
    110. #content2 h1{
    111.   font-size: 100%;
    112.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    113.   font-weight: 300;
    114.   color: #ff0090;
    115. }
    116.  
    117. #content2 p {
    118.   padding: 0 0 8% 0;
    119.   font-size: 90%;
    120.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    121.   font-weight: 300;
    122.   color: #000000;
    123.   border-bottom-width:0;
    124.   border-bottom-style:solid;
    125.   border-bottom-color:#FFCBEA;
    126. }
    127.  
    128. #content2 a:link   { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    129. #content2 a:visited  { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    130. #content2 a:hover     { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    131. #content2 a:active  { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    132.  
    133.  
    134. #content3 h1{
    135.   font-size: 100%;
    136.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    137.   font-weight: 300;
    138.   color: #ff0090;
    139. }
    140.  
    141. #content3 p {
    142.   padding: 0 0 8% 0;
    143.   font-size: 90%;
    144.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    145.   font-weight: 300;
    146.   color: #000000;
    147.   border-bottom-width:0;
    148.   border-bottom-style:solid;
    149.   border-bottom-color:#FFCBEA;
    150.  
    151. }
    152.  
    153. #content3 a:link   { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    154. #content3 a:visited  { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    155. #content3 a:hover     { color: #000000; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    156. #content3 a:active  { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    157.  
    158.  
    159.  
    160. #footer h1 {
    161.   font-size: 100%;
    162.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    163.   font-weight: 300;
    164.   color: #999999;
    165. }
    166.  
    167.  
    168. #footer p {
    169.   font-size: 90%;
    170.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    171.   font-weight: 300;
    172.   color: #999999;
    173. }
    174.  
    175. #footer a:link   { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    176. #footer a:visited  { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    177. #footer a:hover     { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    178. #footer a:active  { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    179.  
    180.  
    181. #footermenu a:link   { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    182. #footermenu a:visited  { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    183. #footermenu a:hover     { color: #ff0090; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    184. #footermenu a:active  { color: #ccc; 'Nunito', Arial, Helvetica, sans-serif; text-decoration: none }
    185.  
    186.  
    187. #footermenu ul li {
    188.   list-style: none;
    189.   float:none;
    190.   font-size: 90%;
    191.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    192.   font-weight: 300;
    193.   color: #999999;
    194. }
    195.  
    196.  
    197. .navfont {
    198.   font-size: 110%;
    199.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    200.   font-weight: 300;
    201. }
    202.  
    203. .navphonefont {
    204.   font-size: 120%;
    205.   font-family: 'Nunito', Arial, Helvetica, sans-serif;
    206.   font-weight: 300;
    207. }
    208.  
    209.  
    210. /*DIV Containers*/
    211.  
    212.  
    213. #container {
    214.   width:100%;
    215. }
    216.  
    217. #headerbereich {
    218.   margin: auto;
    219.   height: 30%;
    220. }
    221.  
    222.  
    223. #gepflegt-bild {
    224.   display: inline-block;
    225.   margin-top: 15%;
    226.   margin-bottom: auto;
    227.   width: 300px;
    228. }
    229.  
    230. #schoen-bild {
    231.   display: inline-block;
    232.   margin-top: 15%;
    233.   margin-bottom: auto;
    234.   width: 300px;
    235. }
    236.  
    237.  
    238. #gepflegt {
    239.   position:relative;
    240.   /*margin: 6% 5% auto 15%;
    241.   padding:1%;*/
    242.   margin: 0;
    243.   padding: 0;
    244.   /*width: 17%;*/
    245.   min-width: 40%;
    246.   float:left;
    247.   border:0;
    248.   text-align: center;
    249. /*  -webkit-animation-name: button-gepflegt;
    250.   -webkit-animation-duration: 10s;
    251.   -webkit-animation-iteration-count: infinite;
    252.   -webkit-animation-direction: normal;
    253.   -moz-animation-name: button-gepflegt;
    254.   -moz-animation-duration: 10s;
    255.   -moz-animation-iteration-count: infinite;
    256.   -moz-animation-direction: normal;
    257.   -o-animation-name: button-gepflegt;
    258.   -o-animation-duration: 10s;
    259.   -o-animation-iteration-count: infinite;
    260.   -o-animation-direction: normal;
    261.   -ms-animation-name: button-gepflegt;
    262.   -ms-animation-duration: 10s;
    263.   -ms-animation-iteration-count: infinite;
    264.   -ms-animation-direction: normal;
    265.   animation-name: button-gepflegt;
    266.   animation-duration: 10s;
    267.   animation-iteration-count: infinite;
    268.   animation-direction: normal;*/
    269. }
    270.  
    271.  
    272. /*@keyframes button-gepflegt {
    273.     0%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    274.    50%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    275.   100%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    276. }
    277.  
    278. @-webkit-keyframes button-gepflegt {
    279.     0%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    280.    50%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    281.   100%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    282. }
    283.  
    284. @-moz-keyframes button-gepflegt {
    285.     0%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    286.    50%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    287.   100%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    288. }
    289.  
    290. @-ms-keyframes button-gepflegt {
    291.     0%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    292.    50%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    293.   100%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    294. }
    295.  
    296. @-o-keyframes button-gepflegt {
    297.     0%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    298.    50%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    299.   100%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    300. }*/
    301.  
    302.  
    303. #logo {
    304.   position:relative;
    305.   margin: 0;
    306.   padding: 0;
    307.   float: left;
    308.   min-width: 20%;
    309.   text-align: center;
    310. }
    311.  
    312.  
    313. #logo-bild {
    314.   display: inline-block;
    315.   margin-left: auto;
    316.   margin-right: auto;
    317.   background-image: url("../pix/Header-Logo_perfectYou-100.jpg");
    318.   background-repeat:no-repeat;
    319.   width: 170px;
    320.   height: 336px;
    321. }
    322.  
    323.  
    324.  
    325. #schoen {
    326.   position:relative;
    327.   /*margin: 6% 15% auto 5%;
    328.   padding:1%;*/
    329.   margin: 0;
    330.   padding: 0;
    331.   /*width: 17%;*/
    332.   min-width: 40%;
    333.   float:left;
    334.   border:0;
    335.   text-align: center;
    336.   /*
    337.   -webkit-animation-name: button-gepflegt;
    338.   -webkit-animation-duration: 10s;
    339.   -webkit-animation-iteration-count: infinite;
    340.   -webkit-animation-direction: normal;
    341.   -moz-animation-name: button-gepflegt;
    342.   -moz-animation-duration: 10s;
    343.   -moz-animation-iteration-count: infinite;
    344.   -moz-animation-direction: normal;
    345.   -o-animation-name: button-gepflegt;
    346.   -o-animation-duration: 10s;
    347.   -o-animation-iteration-count: infinite;
    348.   -o-animation-direction: normal;
    349.     -ms-animation-name: button-gepflegt;
    350.   -ms-animation-duration: 10s;
    351.   -ms-animation-iteration-count: infinite;
    352.   -ms-animation-direction: normal;
    353.   animation-name: button-gepflegt;
    354.   animation-duration: 10s;
    355.   animation-iteration-count: infinite;
    356.   animation-direction: normal;*/
    357. }
    358.  
    359. /*@keyframes button-schoen {
    360.     0%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    361.    50%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    362.   100%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    363. }
    364.  
    365. @-webkit-keyframes button-schoen {
    366.     0%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    367.    50%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    368.   100%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    369. }
    370.  
    371. @-moz-keyframes button-schoen {
    372.     0%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    373.    50%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    374.   100%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    375. }
    376.  
    377. @-ms-keyframes button-schoen {
    378.     0%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    379.    50%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    380.   100%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    381. }
    382.  
    383. @-o-keyframes button-schoen {
    384.     0%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    385.    50%   { opacity: 0;  transition: opacity .10s ease-in-out;}
    386.   100%   { opacity: 1;  transition: opacity .10s ease-in-out;}
    387. }*/
    388.  
    389. #nav {
    390.   clear: both;
    391.   position:relative;
    392.   padding: 0;
    393.   left:0;
    394.   right:0;
    395.   width:100%;
    396.   z-index:20;
    397. }
    398.  
    399.  
    400. #navphone {
    401.   display: none;
    402.   position:relative;
    403.   padding: 0;
    404.   left: 0;
    405.   right:0;
    406.   z-index:21;
    407. }
    408.  
    409.  
    410.  
    411. #content {
    412.   position:relative;
    413.   padding: 1% 3%;
    414.   left:0;
    415.   right:0;
    416.   width:27%;
    417.   float:left;
    418.   border-right-width:0;
    419.   border-right-style:solid;
    420.   border-right-color:#FFCBEA;
    421.   z-index:2;
    422. }
    423.  
    424. #content2 {
    425.   position:relative;
    426.   padding:1% 3%;
    427.   left: 0;
    428.   right:0;
    429.   width:27%;
    430.   float:left;
    431.   border-right-width:0;
    432.   border-right-style:solid;
    433.   border-right-color:#FFCBEA;
    434.   z-index:1;
    435. }
    436.  
    437. #content3 {
    438.   position:relative;
    439.   padding:1% 3%;
    440.   left: 0;
    441.   right:0;
    442.   width:27%;
    443.   float:left;
    444.   border-right-width:0;
    445.   border-right-style:solid;
    446.   border-right-color:#FFCBEA;
    447.   z-index:1;
    448. }
    449.  
    450.  
    451. #footerwrap {
    452.   margin: 0;
    453.   padding: 10px 0 10px 0;
    454.   position:relative;
    455.   float:left;
    456.   width:100%;
    457.   background-color: #000;
    458. }
    459.  
    460. #footermenu {
    461.   margin: 0 0 0 -10px;
    462.   padding:0;
    463.   text-align: left;
    464.   float:left;
    465.   width: 48%;
    466. }
    467.  
    468.  
    469. #footer {
    470.   margin: 0 -10px 0 0;
    471.   padding:0;
    472.   text-align: right;
    473.   float:left;
    474.   width: 50%;
    475. }
    476.  
    477.  
    478.  
    479.  
    480.  
    481. /* Bilder Grössen Anpassung */
    482.  
    483.  
    484. img {
    485.   display: block;
    486.   width:100%;
    487.   height: auto;
    488.   -ms-interpolation-mode: nearest-neighbor;
    489. }
    490.  
    491.  
    492.  
    493.  
    494.  
    495. @media only screen and (max-width: 650px) {
    496.  
    497. #footermenu ul li {
    498.   font-size: 130%;
    499. }
    500.  
    501. }
    502.  
    503.  
    504.  
    505. @media only screen and (max-width: 900px) {
    506.  
    507.  
    508. #nav-icon{
    509.   display:block;
    510.   position:absolute;
    511.   top: 20px;
    512.   right: 20px;
    513.   width: 40px;
    514.   height: 32px;
    515.   margin: 0;
    516.   padding:0;
    517.   z-index:2000;
    518. }
    519.  
    520.  
    521.  
    522.  
    523. #navphone {
    524.   display: block;
    525.   float: none;
    526. }
    527.  
    528. #nav {
    529.   clear: both;
    530.   display: none;
    531. }
    532.  
    533.  
    534.  
    535. #content {
    536.   width:94%;
    537. }
    538.  
    539. #content h1{
    540.   font-size: 110%;
    541. }
    542.  
    543. #content p {
    544.   padding: 0 0 2% 0;
    545.   border-bottom-width:1px;
    546.   border-bottom-style:solid;
    547.   border-bottom-color:#FFCBEA;
    548. }
    549.  
    550. #content2 h1{
    551.   font-size: 110%;
    552. }
    553.  
    554. #content2 {
    555.   width:94%;
    556. }
    557. #content2 p {
    558.   padding: 0 0 2% 0;
    559.   border-bottom-width:1px;
    560.   border-bottom-style:solid;
    561.   border-bottom-color:#FFCBEA;
    562. }
    563.  
    564. #content3 h1{
    565.   font-size: 110%;
    566. }
    567.  
    568. #content3 {
    569.   width:94%;  
    570. }
    571. #content3 p {
    572.   padding: 0 0 2% 0;
    573.     border-bottom-width:1px;
    574.   border-bottom-style:solid;
    575.   border-bottom-color:#FFCBEA;
    576. }
    577.  
    578.  
    579. .navfont {
    580.   font-size: 100%;
    581. }
    582.  
    583.  
    584. #gepflegt {
    585.   clear: both;
    586.     float: none;
    587.   display: none;
    588. }
    589.  
    590. #schoen {
    591.   clear: both;
    592.   float: none;
    593.   display: none;
    594. }
    595.  
    596. /*#logo {
    597.   float: none;
    598.   margin-left:auto;
    599.   margin-right:auto;
    600.   width: 20%;
    601.  
    602. }*/
    603.  
    604. #logo {
    605.   float: none;
    606.   width: 95%;
    607.   margin-left:auto;
    608.   margin-right:auto;
    609. }
    610.  
    611.  
    612. #logo-bild {
    613.   background-image: url("../pix/Header-Logo_perfectYou-klein.jpg");
    614.   background-repeat:no-repeat;
    615.   width: 110px;
    616.   height: 217px;
    617.   margin-left:auto;
    618.   margin-right:auto;
    619. }
    620.  
    621.  
    622.  
    623.  
    624. }
    625.  
    626.  
    627. @media only screen and (min-width: 900px) {
    628. #logo {
    629.   max-width: 18%;
    630.   text-align: center;
    631. }
    632.  
    633. #schoen {
    634.   max-width: 14%;
    635. }
    636.  
    637. #gepflegt {
    638.   max-width: 14%;
    639. }
    640.   }

    1. #navphone {
    2.     padding: 0;
    3.     margin: 0;
    4.     /*width: 100%;*/
    5. }
    6.  
    7. #navphone ul {
    8.     width: 100%;
    9.     padding: 0;
    10.     margin: 0;
    11. }
    12.  
    13.  
    14.  
    15. #navphone ul li {
    16.     /*clear: both;*/
    17.     list-style: none;
    18.     width: 100%;
    19.     float: none;
    20.     position: relative;
    21.     display: inline-block;
    22. }
    23.  
    24.  
    25. #navphone ul li a {
    26.     text-decoration: none;
    27.     display: block;
    28.     color: #fff;
    29.     text-align: center;
    30.     padding: 2.5% 0 2.5% 0;
    31.     background-color: #ff0090;
    32.     font-size: 100%;
    33.     -webkit-transition: none;
    34.     -moz-transition: none;
    35.     -o-transition: none;
    36.     transition: none;
    37.     border-bottom-width: 1px;
    38.     border-bottom-style:solid;
    39.     border-bottom-color:#fff;
    40. }
    41.  
    42. #navphone ul li:hover a, #navphone ul li:hover > ul li a  {
    43.     background-color: #FFEBF5;
    44. }
    45.  
    46.  
    47.  
    48. #navphone ul li:hover > a {
    49.     color: #ff0090;
    50.     background-color: #FFEBF5;
    51.     display:block;
    52.  
    53. }
    54.  
    55.  
    56.  
    57. /*#navphone ul li ul li:hover > a {
    58.     color: #fff;
    59.     background-color: green;
    60.     display:block;
    61. }*/
    62.  
    63.  
    64.  
    65. #navphone ul li:hover > ul  {
    66.     visibility: visible;
    67. }
    68.  
    69.  
    70. #navphone ul li ul{
    71.    /*display: block;*/
    72.     visibility: visible;
    73.     position: relative;
    74.     color: #000;
    75.     z-index: 15;
    76. }
    77.  
    78.  
    79. #navphone ul li ul li{
    80.   float: none;
    81.   width: 100%;
    82. }
    83.  
    84.  
    85.  
    86. #navphone ul li ul li a {
    87.     background-color: #FFEBF5;
    88.    color: #ff0090;
    89.     font-size: 95%;
    90. }
    91.  
    92.  
    93.  
    94.  
    95. #navphone ul li ul li a:hover{
    96.     color: #fff;
    97.     background-color: #FF1FA5;
    98.  
    99. }
    100.  
    101.  
    102.  
    103.  
    104. /*Dritte Stufe*/
    105.  
    106. /*#navphone ul li ul li ul :before{
    107.     display: inline;
    108.     visibility: block;
    109.     position: absolute;
    110.     z-index: 10;
    111.     display: none;
    112. }*/
    113.  
    114.  
    115. /*#navphone ul li ul li ul :after{
    116.     display: block;
    117. }*/
    118.  
    119.  
    120.  
    121. /*#navphone ul li ul li ul li{
    122.   float: none;
    123.   width: 100%;
    124. }*/
    125.  
    126.  
    127.  
    128. /*#navphone ul li ul li ul li a {
    129.    color: #ff0090;
    130.    font-size: 140%;
    131. }*/
    132.  
    133.  
    134.  
    135.  
    136. /*test*/
    137.  
    138.  
    139. /*#navphone ul li > #navphone ul li ul li  {
    140. height: 0;
    141.     /*overflow: hidden;*/
    142.     /*-webkit-transition: all .2s ease-in-out;
    143.     -moz-transition: all .2s ease-in-out;
    144.     -o-transition: all .2s ease-in-out;
    145.     -ms-transition: all .2s ease-in-out;
    146.     transition: all .2s ease-in-out;
    147. }*/
    148.  
    149. /*#navphone ul li:target > #navphone ul li ul li {
    150.     height: 98px;
    151. }*/
    152.  
    153.  
    154.  
    155. }

    1. # Allgemeine TypoScript-Konfigurationen
    2. config {
    3.   doctype = html5
    4.   metaCharset = utf-8
    5.   no_cache = 0
    6.   admPanel = 0
    7.   debug = 0
    8.   baseURL = http://www.perfectYou.ch/
    9.   simulateStaticDocuments = 0
    10.   tx_realurl_enable = 1
    11.   uniqueLinkVars = 1
    12.   linkVars = L(0-3)
    13.   language = de
    14.   #xmlprologue = none
    15.   #locale_all = german
    16.   #htmlTa­g_l­angKey = de
    17.   #sys_la­ngu­age_uid = 0
    18.   #htmlTag_setParams = none
    19.   #doctype = xhtml_trans
    20.   #xhtml_cleaning = all
    21.   #htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"
    22.   #prefixLocalAnchors = all
    23.   #typolinkCheckRootline = 1
    24.   #typolinkEnableLinksAcrossDomains = 1
    25. }
    26.  
    27.  
    28.  
    29. page = PAGE
    30.  
    31. page.includeCSS {
    32.    stylesheet1 = fileadmin/templates/perfectYou.css
    33.    stylesheet2 = fileadmin/templates/perfectYou-menu.css
    34.    stylesheet3 = fileadmin/templates/perfectYou-menu-phone.css
    35.   }
    36.  
    37. page.includeJSFooter.jquery.external = 1
    38. page.includeJSFooter.jquery = https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
    39. page.includeJSFooter.myjavascript = fileadmin/templates/perfectYou-menu.js
    40.  
    41.  
    42. page.headerData.1 = TEXT
    43. page.headerData.1.value (
    44.    <link rel="shortcut icon" href="fileadmin/pix/favicon.ico" type="image/x-icon" />
    45. )
    46.  
    47.  
    48. page {
    49.      typeNum = 0
    50.  
    51.      #includeLibs.gmenu_layers = media/scripts/gmenu_layers.php
    52.  
    53.      # Allgemeine Seiteneigenschaften setzen
    54.      #bodyTag = <body bgcolor="ffffff" topmargin="0" leftmargin="0">
    55.  
    56.      meta {
    57.        viewport = width=device-width, initial-scale=1, user-scalable=no
    58.         apple-mobile-web-app-capable = yes
    59.  
    60.        keywords = kosmetik, cosmetic, behandlung, schönheit, beauty, perfekt, wachsen, waxing, haarentfernung, gesicht,  pflege, breitenbach, franziska, borer, breitenbach, thierstein, laufental,    
    61.        description = perfectYou cosmetic - Schön und gepflegt ist die moderne Frau von heute! Kosmetikstudio in Breitenbach.
    62.        author = angie.graphics
    63.        robots = index,follow
    64.        }
    65.  
    66.  
    67.  
    68.  
    69.      10 = TEMPLATE
    70.      10.template = FILE
    71.      10.template.file = fileadmin/templates/template-new.html
    72.  
    73.      # Ersetzt Subpart Dokument im Template, damit keine doppelte Ausgabe von doctype und co.
    74.      10.workOnSubpart = DOKUMENT
    75.  
    76.      10.marks {
    77.  
    78.  
    79.  
    80.  
    81.  
    82.           # Inhalt ausgeben
    85.           table = tt_content
    86.           #styles.content.get
    88.           where = colPos = 1
    89.           orderBy = sorting
    90.           languageField = sys_language_uid
    91.           }
    92. }
    93.  
    94.           # Inhalt ausgeben
    95.           CONTENT2 = CONTENT
    96.           CONTENT2 {
    97.           table = tt_content
    99.           where = colPos = 0
    100.           orderBy = sorting
    101.           languageField = sys_language_uid
    102.           }
    103. }
    104.  
    105.  
    106.                  # Inhalt ausgeben
    107.           CONTENT3 = CONTENT
    108.           CONTENT3 {
    109.           table = tt_content
    111.           where = colPos = 2
    112.           orderBy = sorting
    113.           languageField = sys_language_uid
    114.           }
    115. }
    116.  
    117.           # Inhalt ausgeben
    118.           FOOTER = CONTENT
    119.           FOOTER {
    120.           table = tt_content
    122.           where = colPos = 3
    123.           orderBy = sorting
    124.           languageField = sys_language_uid
    125.           }
    126. }
    127.  
    128.  
    129.  
    130.  
    131.  
    132.  
    133.  
    134.  
    135.  
    136.  # Das Hauptmenü erstellen
    137. MENU = HMENU
    138.        MENU {
    139.   special = directory
    140.   special.value = 3
    141.   wrap = <div id="nav">|</div>
    142.     ### Erste Ebene ###
    143.   1 = TMENU
    144.   1 {
    145.     wrap = <ul class="nav">|</ul>
    146.     expAll = 1
    147.     NO.wrapItemAndSub = <li>|</li>
    148.       ACT < .NO
    149.       ACT = 1
    150.       ACT.ATagParams = class="active"
    151.       }  
    152.    ### Zweite Ebene ###
    153.     2 < .1
    154.     }
    155.  
    156.  
    157.  
    158.  
    159.  
    160.  
    161.  
    162.  
    163. # Phonemenu Versuch
    164. MENUPHONE = HMENU
    165. MENUPHONE {
    166.   special = directory
    167.   special.value = 3
    168.   wrap = <div id="navphone">|</div>
    169.     ### Erste Ebene ###
    170.   1 = TMENU
    171.   1 {
    172.     wrap = <ul class="navphone">|</ul>
    173.     expAll = 1
    174.     NO.wrapItemAndSub = <li>|</li>
    175.       ACT < .NO
    176.       ACT = 1
    177.       ACT.ATagParams = class="active"
    178.       }  
    179.    ### Zweite Ebene ###
    180.     2 < .1
    181.  
    182.    ### DritteEbene ###
    183.     3 < .1
    184.     }
    185.  
    186.  
    187.  
    188.   # Das Footermenu erstellen
    189. FOOTERMENU = HMENU
    190. FOOTERMENU {
    191.   special = directory
    192.   special.value = 20
    193.   wrap = <div id="footermenu">|</div>
    194.     ### Erste Ebene ###
    195.   1 = TMENU
    196.   1 {
    197.     wrap = <ul class="footermenu">|</ul>
    198.     expAll = 1
    199.     NO.wrapItemAndSub = <li>|</li>
    200.       ACT < .NO
    201.       ACT = 1
    202.       ACT.ATagParams = class="active"
    203.       }  
    204.    ### Zweite Ebene ###
    205.     2 < .1
    206.     }
    207.  
    208.  
    209.  
    210.  
    211.  
    212.  }
    213. }
    214.  
    215.  
    216. tt_content.menu = COA
    217. tt_content.menu.10 =< lib.stdheader
    218. tt_content.menu.20 = TEXT

    Tags: Typo3 6.2.1
  • angsch-li angsch-li
    Padawan
    0 x
    43 Beiträge
    0 Hilfreiche Beiträge
    03. 09. 2014, 17:18 - Lösung

    Falls es jemanden geben sollte, in Zukunft, der das gleiche Problem hat...
    ich hätte nun die Lösung.

    Es lag an den vielen "csc..."div's, welche um die Bilder im Content gelegt wurden. Dies kann man aber im TS ausschalten. Und nun klappts auch (mit dem Nachbarn). :-D

    TS Code:

    1. ###DIV Wraps entfernen###
    2. tt_content.stdWrap.innerWrap >
    3. lib.stdheader.stdWrap.dataWrap >
    4.  
    5. tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    6.     width.unset = 1
    7.     height.unset = 1
    8. }
    9. tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    10.     width.unset = 1
    11.     height.unset = 1
    12. }
    13. lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    14.     width.unset = 1
    15.     height.unset = 1
    16. }

  • 1
  • angsch-li angsch-li
    Padawan
    0 x
    43 Beiträge
    0 Hilfreiche Beiträge
    18. 08. 2014, 12:30

    Ich habe es echt versucht..aber ich bin kein sehr geduldiger Mensch... ;)
    Hatte echt noch niemand dasselbe Problem? Scheint auch beim iPad der 1. Generation mit iOS 5 der Fall zu sein, dass die Bilder nicht angezeigt werden.

    Gibt es dafür einen Hack?

    Danke für eure Hilfe...

    angsch-li

  • angsch-li angsch-li
    Padawan
    0 x
    43 Beiträge
    0 Hilfreiche Beiträge
    03. 09. 2014, 17:18

    Falls es jemanden geben sollte, in Zukunft, der das gleiche Problem hat...
    ich hätte nun die Lösung.

    Es lag an den vielen "csc..."div's, welche um die Bilder im Content gelegt wurden. Dies kann man aber im TS ausschalten. Und nun klappts auch (mit dem Nachbarn). :-D

    TS Code:

    1. ###DIV Wraps entfernen###
    2. tt_content.stdWrap.innerWrap >
    3. lib.stdheader.stdWrap.dataWrap >
    4.  
    5. tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    6.     width.unset = 1
    7.     height.unset = 1
    8. }
    9. tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    10.     width.unset = 1
    11.     height.unset = 1
    12. }
    13. lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib{
    14.     width.unset = 1
    15.     height.unset = 1
    16. }

  • 1
Präsentiert von