Ich weiss nicht, ob ich mit dem Thema im richtigen Unterforum bin, aber ich fange mal an:
Ich nutze ein Responsive Website Template (http://www.derby-web-design-agency.co.uk/themes/response/). Dieses Template baue ich gerade mit Typo3 nach. Es soll ein FLUID Template sein. Soweit wird alles, was ich bisher nachgebaut habe, auch dargestellt.
Ich habe die Javscripte und die CSS Dateien wie im Original eingefügt. Doch der NivoSlider wird nicht richtig dargestellt. Bei der Typo3-Seite fehlen die Navigationspfeile und das Bild ragt über den geplanten Rand hinaus. Auch scheint das Javascript nicht zu funktionieren.
Hier erst einmal der HTML-Ausschnitt des Originals:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Responsive - Premium Responsive HTML Template</title>
<meta name="description" content="Response Premium Html Responsive Template" />
<meta name="keywords" content="Responsive Html, Responsive Template, Response" />
<link rel="shortcut icon" href="http://www.derby-web-design-agency.co.uk/themes/response/images/favicon.png" />
<link rel="bookmark icon" href="http://www.derby-web-design-agency.co.uk/themes/response/images/favicon.png" />
<link href="css/main.css" rel="stylesheet" type="text/css">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="grey" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="js/twitter.js"></script>
<script src="js/custom.js"></script>
<script>
//// Start Simple Sliders ////
$(function() {
setInterval("rotateDiv()", 10000);
});
function rotateDiv() {
var currentDiv=$("#simpleslider div.current");
var nextDiv= currentDiv.next ();
if (nextDiv.length ==0)
nextDiv=$("#simpleslider div:first");
currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
nextDiv.fadeIn('3000').addClass('current',function() {
currentDiv.fadeOut('2000', function () {currentDiv.removeClass('previous');});
});
}
//// End Simple Sliders ////
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</head>
<body>
<div id="header">
<!-- Start navigation area -->
<div id="navigation">
<div id="navigation_wrap">
<!-- Start contact info area -->
<div id="conteactinfo"><strong>Email:</strong> info@domainname.com | <strong>Phone:</strong> (+44) 1234 567 890</div>
<!-- End contact info area -->
<!-- Start navigation -->
<div id="navi">
<ul>
<li><a href="/themes/response/" title="Response Home">Home</a></li>
<li><a href="#" title="Response Features">Features</a>
<ul>
<li><a href="buttons-buttonshapes.html" title="Response Buttons">Buttons</a></li>
<li><a href="columns.html" title="Response Columns">Columns</a></li>
<li><a href="icons-and-lists.html" title="Response Icons & Lists">Icons & Lists</a></li>
<li><a href="notifications.html" title="Response Notifications">Notifications</a></li>
<li><a href="tabs-and-toggles.html" title="Response Tabs & Toggles">Tabs & Toggles</a></li>
<li><a href="#" title="Response Other Dropdown">Other</a>
<ul>
<li><a href="#" title="Response Other Dropdown">Demo Tab</a></li>
<li><a href="#" title="Response Other Dropdown">Demo Tab</a></li>
<li><a href="#" title="Response Other Dropdown">Demo Tab</a></li>
<li><a href="#" title="Response Other Dropdown">Demo Tab</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="blog.html" title="Response's Blog">Blog</a>
<ul>
<li><a href="blog-left.html" title="Left Column Blog">Left Column Blog</a></li>
<li><a href="blog.html" title="Right Column Blog">Right Column Blog</a></li>
<li><a href="blog-post.html" title="Blog Post">Post</a>
<ul>
<li><a href="left-blog-post.html" title="Left Column Blog Post">Left Column Post</a></li>
<li><a href="blog-post.html" title="Right Column Blog Post">Right Column Post</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="portfolio.html" title="Respons'se Portfolio">Portfolio</a>
<ul>
<li><a href="portfolio-2-column.html" title="2 Column Filtered Portfolio">2 Columns</a></li>
<li><a href="portfolio-3-column.html" title="3 Column Filtered Portfolio">3 Columns</a></li>
<li><a href="portfolio.html" title="4 Column Filtered Portfolio">4 Columns</a></li>
</ul>
</li>
<li><a href="contact-us.html" title="Contact Response">Contact Us</a></li>
</ul>
</div>
<!-- End navigation -->
</div>
</div>
<!-- End navigation area -->
<div class="clear"></div>
<!-- Start Social & Logo area -->
<div id="header_small">
<!-- Start Logo area -->
<div id="logo">
<a href="/themes/response/" title="Response">Response</a>
</div>
<!-- End Logo area -->
</div>
<!-- End Social & Logo area -->
</div>
<div id="main">
<!-- Start Slider Wrapping -->
<div id="sliderwrap">
<!-- Start Slider -->
<div id="slider" class="nivoSlider">
<img src="images/slider-banners/slider01.jpg" alt=""/>
<img src="images/slider-banners/slider02.jpg" alt=""/>
<img src="images/slider-banners/slider03.jpg" alt=""/>
</div>
<!-- End Slider -->
<!-- Start Slider HTML Captions -->
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
<!-- End Slider HTML Captions -->
</div>
<!-- End Slider Wrapping -->
Jetzte der Ausschnitt aus dem Quelltext der lokalen Typo3-Seite:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
Diese Seite wurde erstellt von:
XXXXX
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2012 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at http://typo3.org/
-->
<title>Home</title>
<meta name="generator" content="TYPO3 6.0 CMS">
<meta name="DESCRIPTION" content="My Site">
<meta name="KEYWORDS" content="nix">
<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_15e32f16ab.css?1352662913" media="all">
<script src="typo3temp/javascript_5fe67b6b66.js?1352474961" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link href="fileadmin/responsive/css/main.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fileadmin/responsive/js/jquery.nivo.slider.js"></script>
<script src="fileadmin/responsive/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="fileadmin/responsive/js/twitter.js"></script>
<script src="fileadmin/responsive/js/custom.js"></script>
<script>
//// Start Simple Sliders ////
$(function() {
setInterval("rotateDiv()", 10000);
});
function rotateDiv() {
var currentDiv=$("#simpleslider div.current");
var nextDiv= currentDiv.next ();
if (nextDiv.length ==0)
nextDiv=$("#simpleslider div:first");
currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
nextDiv.fadeIn('3000').addClass('current',function() {
currentDiv.fadeOut('2000', function () {currentDiv.removeClass('previous');});
});
}
//// End Simple Sliders ////
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
</head>
<body>
<div id="header">
<!-- Start navigation area -->
<div id="navigation">
<div id="navigation_wrap">
<!-- Start contact info area -->
<div id="conteactinfo"> </div>
<!-- End contact info area -->
<!-- Start navigation -->
<div id="navi">
<ul><li><a href="index.php?id=4" >Home</a></li></ul>
</div>
<!-- End navigation -->
</div>
</div>
<!-- End navigation area -->
<div class="clear"></div>
<!-- Start Social & Logo area -->
<div id="header_small">
<!-- Start Social area -->
<div class="social">
<ul>
<li><a href="#" class="social-google"></a></li>
<li><a href="#" class="social-facebook"></a></li>
<li><a href="#" class="social-twitter"></a></li>
<li><a href="#" class="social-linkedin"></a></li>
<li><a href="#" class="social-forrst"></a></li>
<li><a href="#" class="social-dribbble"></a></li>
</ul>
</div>
<!-- End Socialarea -->
<!-- Start Logo area -->
<div id="logo">
<a href="index.php?id=4&tx__%5Baction%5D=index.php&tx__%5Bcontroller%5D=Standard&cHash=243e4e7f5d5eb30ffc23320fef47db68"> XXXXX </a>
</div>
<!-- End Logo area -->
</div>
<!-- End Social & Logo area -->
</div>
<div id="main">
<!-- Start Slider Wrapping -->
<div id="sliderwrap">
<!-- Start Slider -->
<div id="slider" class="nivoSlider">
<img src="fileadmin/responsive/images/slider-banners/slider01.jpg" alt=""/>
<img src="fileadmin/responsive/images/slider-banners/slider02.jpg" alt=""/>
<img src="fileadmin/responsive/images/slider-banners/slider03.jpg" alt=""/>
</div>
<!-- End Slider -->
<!-- Start Slider HTML Captions -->
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
<!-- End Slider HTML Captions -->
</div>
<!-- End Slider Wrapping -->
Ich nutze lokal schon die Typo3 6.0 Version als RC1!
Nun, ich sehe leider keinen Unterschied in der Ausgabe des Quelltextes vom Slider.
Liegt es evtl. an einem Javascript, dass falsch eingebunden wird? Oder liegt es an einer Typo3 Einstellung?
Hier mal mein TS der ROOT Page:
# Create and configure our site
page = PAGE
page.typeNum = 0
page.meta.DESCRIPTION = My Site
page.meta.KEYWORDS = nix
#div um ctype html entfernen
tt_content.html.prefixComment >
tt_content.stdWrap.innerWrap.override = |
tt_content.stdWrap.innerWrap.override.if {
equals = html
value.field = CType
}
page.headerData.10=TEXT
page.headerData.10.value (
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
)
### Setup
config {
doctype = {$doctype}
xmlprologue = none
xhtml_cleaning = none
htmlTag_setParams = none
}
# Make sure that the language of the page is english
page.config.htmlTag_langKey = de
config.locale_all = de_DE
config.language = de
# Define the javascript (used by TYPO3) as an external file
page.config.removeDefaultJS=external
# Encrypt Mail addresses
page.config.spamProtectEmailAddresses = 1
# do not allow TYPO3 to write code into the body tag
page.bodyTag = <body>
# Define the characterset as utf8
config.metaCharset = utf-8
tt_content.stdWrap.dataWrap >
config.disablePrefixComment = 1
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
# Create a Fluid Template
page.10 = FLUIDTEMPLATE
page.10 {
file = fileadmin/responsive/index.html
# Set the Template Pathes
partialRootPath = fileadmin/fluid/partials/
layoutRootPath = fileadmin/fluid/layouts/
variables {
# Assign the main column with our {content}-destination
content < styles.content.get
# Assign the left column with our {content_left}-destination
content_left < styles.content.get
content_left.select.where = colPos = 1
# Assign the right column with our {content_right}-destination
content_right < styles.content.get
content_right.select.where = colPos = 2
}
}
# Assign the Template files with the Fluid Backend-Template
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
# Set the default Template, our 3 column Template
default = TEXT
default.value = fileadmin/fluid/index.html
# Set also the first [2] Template, our 3 column Template
2 = TEXT
2.value = fileadmin/fluid/index.html
# Set a second [3] Template, our full size Template
3 = TEXT
3.value = fileadmin/fluid/fullSize.html
}
page.headerData.20 = TEXT
page.headerData.20.value (
<link href="fileadmin/responsive/css/main.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fileadmin/responsive/js/jquery.nivo.slider.js"></script>
<script src="fileadmin/responsive/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="fileadmin/responsive/js/twitter.js"></script>
<script src="fileadmin/responsive/js/custom.js"></script>
<script>
//// Start Simple Sliders ////
$(function() {
setInterval("rotateDiv()", 10000);
});
function rotateDiv() {
var currentDiv=$("#simpleslider div.current");
var nextDiv= currentDiv.next ();
if (nextDiv.length ==0)
nextDiv=$("#simpleslider div:first");
currentDiv.removeClass('current').addClass('previous').fadeOut('2000');
nextDiv.fadeIn('3000').addClass('current',function() {
currentDiv.fadeOut('2000', function () {currentDiv.removeClass('previous');});
});
}
//// End Simple Sliders ////
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
)
/GRUNDKONFIGURATION
config {
admPanel = 0
headerComment (
Diese Seite wurde erstellt von:
XXXXX
)
doctype = html5
htmlTag_langKey = de_DE.utf-8
xmlprologue = none
disablePrefixComment = 1
index_enable = 1
baseUrl = http://localhost:8504/
spamProtectEmailAddresses = ascii
spamProtectEmailAddresses_atSubst = (at)
#simulateStaticDocuments = 1
#simulateStaticDocuments_noTypeIfNoTitle = 1
removeDefaultJS = external
inlineStyle2TempFile = 1
noScaleUp = 1
meaningfulTempFilePrefix = 50
sys_language_uid = 0
language = de
locale_all = de_DE
}
//RESPONSIVE DESIGN EINSTELLUNGEN
tt_content.image.20 {
imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn"> | </div>
}
tt_content.image.20 {
rendering {
dl {
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" > | </dl>
}
ul {
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"><ul> | </ul></div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"><ul> | </ul></div>
oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###"> | </li>
}
div {
imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc-textpic-imagerow-last"> | </div>
oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###"> | </div>
}
simple {
imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap csc-textpic-single-image"> | </div>
}
}
}
// CoolURI aktivieren
config.tx_cooluri_enable = 0
config.redirectOldLinksToNew = 0
page.config.metaCharset = utf-8
page.config.additionalHeaders = Content-Type:text/html;charset=utf-8
//ERWEITERTE BEREINIGUNGEN
lib.stdheader {
10.1.fontTag = <h2 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h2>
10.2.fontTag = <h3 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h3>
10.3.fontTag = <h4 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h4>
10.4.fontTag = <h5 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h5>
10.5.fontTag = <h6 id="c{field:uid}"{register:headerStyle}{register:headerClass}>|</h6>
stdWrap.dataWrap = |
}
page.config.disablePrefixComment = true
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
tt_content.stdWrap.prefixComment >
tt_content.header.20.prefixComment >
tt_content.default.prefixComment >
tt_content.text.stdWrap.prefixComment >
tt_content.text.20.prefixComment >
tt_content.textpic.20.stdWrap.prefixComment >
tt_content.table.20.stdWrap.prefixComment >
tt_content.menu.20.stdWrap.prefixComment >
tt_content.image.20.stdWrap.prefixComment >
tt_content.list.20.stdWrap.prefixComment >
lib.stdheader {
10.1 >
10.1 = TEXT
10.1.current = 1
10.1.fontTag = <h2>|</h2>
10.2 >
10.2 < .10.1
10.2.fontTag = <h3>|</h3>
10.2.stdWrap.dataWrap >
10.3 >
10.3 < .10.1
10.3.fontTag = <h4>|</h4>
10.4 >
10.4 < .10.1
10.4.fontTag = <h5>|</h5>
10.5 >
10.5 < .10.1
10.5.fontTag = <h6>|</h6>
stdWrap.dataWrap >
}
content.headerSpace = 0|0
content.space = 0|0
tt_content.textpic.20.spaceBelowAbove = 0
tt_content.image.20.spaceBelowAbove = 0
tt_content.header.stdWrap.space = 0|0
tt_content.stdWrap.space = 0|0
tt_content.stdWrap.spaceBefore = 0
tt_content.stdWrap.spaceAfter = 0
lib.stdheader.stdWrap.space = 0|0
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
plugin.tt_news._CSS_DEFAULT_STYLE >
tt_content.stdWrap.innerWrap >
# ID der Startseite = 4
lib.logo = COA
lib.logo {
10 = TEXT
10.value = XXXXX
10.typolink {
parameter = 2
wrap = <a href ="">|</a>
}
}