Sealonegrfx: Div`s // position absolute

Beitrag lesen

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">&raquo;home</a></li>  
		<li><a href="classics.html">&raquo;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">&copy; 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!