2016-04-03 54 views
0

我很難得到owl_slider擴展(2.3.3通過TER對typo3 7.6.2)正常工作。我設法讓滑塊工作,但是當我改變瀏覽器寬度低於768像素時,我的頁眉和頁腳圖像顯示方式太大,內容(滑塊,文本等)不再適合內容區域(引導程序容器)。當我沒有頁面上的滑塊時,調整大小工作沒有麻煩。貓頭鷹滑塊不能在768像素寬度下工作

當我檢查貓頭鷹滑塊項目,我可以看到寬度隨着我的瀏覽器寬度變化,低於768它計算奇怪的值(屏幕附加,這應該是不正確顯示的原因)。有任何想法嗎 ?

編輯:剛試過只有{content}模板,滑塊沒有功能,然後我把它放在一個容器內,它的工作。爲什麼會這樣?

模板:

<header class="page-row container-fluid"> 
    <div style="position:fixed;top:0px;z-index:20;" >   
     <img class="img-responsive" src="fileadmin/user_upload/slider_top_text.png" width="100%"/>   
    </div> 
    <img src="fileadmin/user_upload/slider_top_text.png" width="100%" /> 
</header> 
<main class="page-row page-row-expanded" > 
    <div class="container" style="margin-top:8px;">   
     <div >    
      <div style="float:left;"> 
       <f:cObject typoscriptObjectPath="lib.breadcrumb" /> 
      </div> 
      <div style="float:right;"> 
       <f:format.raw>{PRINTVIEW}</f:format.raw> 
      </div> 
     </div>  
     <div style="clear: both;padding-top:6px;"><f:format.raw>{content}</f:format.raw> 
      <div class="toTop"> 
       <a href="#top"><span class="glyphicon glyphicon-arrow-up"></span></a> 
      </div> 
      <div class="toTop2" style="width:80px;height:100px;background-color: white;"></div> 
     </div> 
    </div><!-- /.container --> 
</main> 
<footer class="page-row footer container-fluid" > 
    <div class="footer-bg" style=""> 
     <div class="container" > 
      <div class="row"> 
       <div class="col-md-12">  
        <p style="">some text</br> 
         <a href="http://localhost/typo3_src-7.6.2/index.php?id=6">Impressum</a>&nbsp&nbsp<a href="http://localhost/typo3_src-7.6.2/index.php?id=8">Sitemap</a>&nbsp&nbsp<a href="http://localhost/typo3_src-7.6.2/index.php?id=7">AGB</a> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div>  
</footer> 

CSS

body { 
    display: table; 
    margin:0; 
    padding:0; 
    width: 100%; 
} 

.page-row { 
    display: table-row; 
} 

.page-row-expanded { 
    height: 100%; 
} 

.footer p {  
    margin-top: 20px; 
    text-align:center; 
} 

.footer-bg{  
    background-image:linear-gradient(180deg, white 10%,transparent 15%),url(http://localhost/typo3_src-7.6.2/fileadmin/user_upload/sand-181273_1920.jpg); 
    background-size:100%; 
    background-position: center; 
    background-repeat:no-repeat; 
} 

tr{ 
    vertical-align: top; 
    border-top:1px solid;  
} 

.toTop { 
    z-index: -1; 
    position: fixed; 
    bottom: 40%; left: 1%; 
} 

.toTop2 { 
    z-index: -1; 
    position: absolute; 
    bottom: 40%; left: 1%; 
} 

html, body{ 
    height:100%; /* needed for container min-height */ 
} 

th, td, caption{ 
    padding: 8px;  
} 

table{ 
    width:100%; 
} 


.element2cols { overflow:hidden;} 
.col1, .col2 { width:48%; float:left; } 
.col1 { margin-right:2%; } 
.col2 { margin-left: 2%; } 

Typo腳本

page = PAGE 
page { 
    config { 
      metaCharset = utf-8 
      additionalHeaders = Content-Type:text/html;charset=utf-8 
      index_enable = 1 
    } 

/* Bootstrap 3 automatic responsive, do i need it ? 
     meta{ 
      name = viewport 
      content = width=device-width, initial-scale=1.0     
     } 
*/ 

    includeCSS.bootstrap = EXT:spif_distribution/Resources/Public/Bootstrap/css/bootstrap.min.css 
    includeCSS.bootstratheme = EXT:spif_distribution/Resources/Public/Bootstrap/css/bootstrap-theme.min.css 
    includeCSS.bootstrapcustom = EXT:spif_distribution/Resources/Public/Css/custom.css 

    includeJS.bootstrap = EXT:spif_distribution/Resources/Public/Bootstrap/js/bootstrap.min.js 

    10 = FLUIDTEMPLATE 
    10 { 
      file = EXT:spif_distribution/Resources/Private/Template/index.html 
      layoutRootPath = EXT:spif_distribution/Resources/Private/Layouts/ 
      partialRootPath = EXT:spif_distribution/Resources/Private/Partials/ 
      variables { 
        hallo = TEXT 
        hallo.value = HALLO WELT! 
        content < styles.content.get 

        PRINTVIEW = TEXT 
        PRINTVIEW { 
         value = Druckansicht 
         typolink.parameter.data = page:uid 
         typolink.additionalParams.insertData=1 
         typolink.additionalParams =&type=10 

        } 
      }     
    } 
} 

圖片 correct sized

weird sized not in container

回答

-1

我有類似的問題。刪除顯示:表;並顯示:表格行;從你的CSS。這件事對我有用。它可能也適用於你。