liebes forum,
ich muss, nachdem mir hier das letzte mal schon sehr nett geholfen wurde, noch einmal eine frage stellen. ich komme einfach nicht weiter...
-es geht um eine eingebundene jquery slideshow.
das ding muss absolute positioniert werden, nun "rutscht" diese slideshow aber aus dem div. hier mal der code...
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
</script>
<!--slideshow_plugin_end-->
<!-- jQuery Code weiches scrollen -->
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
// jQuery laden
google.load("jquery", "1.3.2");
</script>
<script type="text/javascript">
$(document).ready(function() {
// Alle internen Links auswählen
$('a[href*=#]').bind("click", function(event) {
// Standard Verhalten unterdrücken
event.preventDefault();
// Linkziel in Variable schreiben
var ziel = $(this).attr("href");
//Scrollen der Seite animieren, body benötigt für Safari
$('html,body').animate({
//Zum Ziel scrollen (Variable)
scrollTop: $(ziel).offset().top
// Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
}, 1000 , function (){location.hash = ziel;});
});
return false;
});
</script>
<!-- jQuery Code weiches scrollen ende -->
<head>
<meta charset="utf-8"/>
<title>classics.</title>
<link rel="stylesheet" media="all" href="../css/main.css"/>
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0"/>
</head>
<body>
<div id="centered_content">
<div id="logo">
<img src="../material/ps_logo_grey.png" />
</div>
<div id="mainnavigation">
<ul>
<li><a href="../index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="works.html">works</a></li>
<li><a class="active" href="classics.html">classics</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div id="content">
<header>
<h1>headline</h1>
<h2>classics.</h2>
</header>
<div id="breadcrumb">
<ul>
<li>du bist hier: </li>
<li><a href="../index.html">»home</a></li>
<li><a href="classics.html">»classics</a></li>
</ul>
</div><!--breadcrumb_end-->
<h3>headline</h3>
<div id="slideshow">
<img src="" alt="" class="active" />
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
</div>
</div>
<div id="footer">
<ul>
<li><a href="#anker1">up</a></li>
<li><a href="">|</a></li>
<li><a href="">jobs</a></li>
<li><a href="">twitter</a></li>
<li><a href="">facebook</a></li>
<li><a href="">imprint</a></li>
<li class="right">© copyright 2010 </li>
</ul>
</div>
</div>
</body>
</html>
-klar, noch nicht valide, sehr unaufgeräumt... -aber vielleicht hat ja trotzdem jemand nen tip :)
css:
div.height100 {
height: 100%;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
position: relative;
overflow: auto;
margin-left: auto;
margin-right: auto;
}
#content p {
font: 14px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
padding-bottom: 25px;
color: #909090;
}
#teaser img {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
padding-top: 20px;
border-top: 1px dotted gray;
}
#content div.project img {
max-width: 100%;
}
#centered_content {
position: relative;
height: 100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding-top: 0;
}
#content {
background: white;
margin-top: 0;
padding-right: 20px;
padding-left: 20px;
}
#adress {
overflow: hidden;
margin-top: 20px;
}
#adress p.right a {
list-style-type: none;
color: #dadada;
text-decoration: none;
}
#adress p.right a:hover {
list-style-type: none;
color: #E37222;
text-decoration: none;
}
#subnavigation ul li a.active {
color: #E37222;
}
#content p.right {
overflow: auto;
}
#content p.left {
width: 260px;
float: left;
}
#adress p.left a {
list-style-type: none;
color: #dadada;
text-decoration: none;
}
#adress p.left a:hover {
list-style-type: none;
color: #E37222;
text-decoration: none;
}
#project p {
padding-bottom: 10px;
}
#mainnavigation {
background-color: white;
padding: 75px 20px 25px;
}
#mainnavigation ul li {
font-size: 15px;
list-style-type: none;
float: left;
padding-right: 13px;
color: grey;
}
#mainnavigation ul li a {
color: grey;
text-decoration: none;
}
#mainnavigation ul li a.active {
color: #E37222;
}
#mainnavigation ul li a:hover {
color: #E37222;
text-decoration: none;
}
#subnavigation {
background-color: white;
padding-top: 10px;
padding-bottom: 0;
padding-left: 13px;
font-size: 15px;
margin: 0;
}
#footer ul li.right {
float: left;
color: #dadada;
font-size: 11px;
margin-right: 0;
}
#subnavigation ul li {
list-style-type: none;
padding-bottom: 0;
margin-bottom: 0;
float: left;
}
#subnavigation ul li a {
color: #dadada;
text-decoration: none;
padding-right: 10px;
padding-bottom: 0;
margin-bottom: 0;
padding-left: 7px;
}
#subnavigation ul li a:hover {
color: #E37222;
text-decoration: none;
padding-right: 10px;
padding-bottom: 0;
margin-bottom: 0;
padding-left: 7px;
}
#centered_content img {
position: relative;
padding-top: 10px;
padding-bottom: 10px;
margin-right: auto;
margin-left: auto;
}
#logo {
float: right;
margin-right: 30px;
clear: left;
margin-bottom: 0;
padding-bottom: 0;
padding-top: 30px;
}
#content div.project {
margin-top: 0;
padding-top: 0;
}
header {
padding-top: 45px;
padding-bottom: 60px;
}
#breadcrumb {
padding-bottom: 20px;
}
#image img {
float: left;
overflow: auto;
padding-top: 0;
padding-right: 0;
margin-right: 25px;
}
#bio {
overflow: auto;
padding-top: 10px;
}
#breadcrumb ul li {
list-style-type: none;
color: #dadada;
font-size: 11px;
float: left;
margin-right: 5px;
}
#breadcrumb ul li a {
text-decoration: none;
color: #dadada;
font-size: 11px;
}
#breadcrumb ul li a:hover {
text-decoration: none;
color: #E37222;
font-size: 11px;
}
#footer {
background-color: white;
height: 60px;
margin-top: 5px;
font-size: 11px;
}
#footer ul {
list-style-type: none;
padding-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
#footer ul li a {
text-decoration: none;
color: gray;
float: left;
margin-right: 10px;
}
#footer ul li {
color: gray;
float: left;
margin-right: 10px;
}
#footer ul li a:hover {
text-decoration: none;
color: #E37222;
float: left;
}
#footer ul li a.last {
margin-right: 0;
}
#slideshow {
position: relative;
min-height: 100%;
}
#slideshow IMG {
width: 100%;
position: absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
border-bottom: 1px dotted gray;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
position: absolute;
}
#slideshow IMG.last-active {
z-index:9;
}
-würd mich auf jeden fall freuen, wenn mir jemand auf die spur helfen könnte...
lg!