Div`s // position absolute von Beat, 29.10.2010 21:55

Div`s // position absolute

Sealonegrfx 29.10.2010 21:28

design/layout

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!``

Beitrag melden

– Informationen zu den Bewertungsregeln

Div`s // position absolute
Beat Homepage des Autors 29.10.2010 21:55

design/layout
+1 Informationen zu den Bewertungsregeln
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...

Hast du das letzte mal auch einfach alles reingeschmissen ohne eine adäquate = nachvollziehbare Problembeschreibung zu liefern?

Wenn ja, dann ist das wirklich ein sehr liebes Forum.
Sniff, nur ich bin nicht so lieb ;(

Stell die Seite Online, damit man das Problem erkennen kann.

mfg Beat

--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Beitrag melden

+1
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Sealonegrfx: Div`s // position absolute