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>  <a href="http://localhost/typo3_src-7.6.2/index.php?id=8">Sitemap</a>  <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
}
}
}
}