AW: Hilfe bei jQuery und easyslide 1.5 ...
Hallo,
ich habe den easyslider jetzt am Start, nur bekomme ich ihn nicht richtig positioniert. Ich kann mit margin-left zwar nach links rücken, aber mit margin-top rückt auch der Header mit runter (das ist noch sowas, was ich nicht richtig verstehe - korrekte div-Verwaltung usw. Des weiteren ist mein Footer irgendwie weg.
Zur Erläuterung:
Sidebar Left und Main Content sollen je nach Inhalt mitwachsen.
Wäre schön, wenn mir jemand helfen könnte:
Danke & Gruß, Mint
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Wahler Ofenbau - Ofensetzermeister</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<a href="index.html" id="logo" class="noText" title="www.wahler-ofenbau.de">Wahler-Ofenbau</a>
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
<ul id="subnavi">
<li><a href="start.html" class="start noText">Start</a></li>
<li><a href="produkte.html" class="produkte noText">Produkte</a></li>
<li><a href="philosophie.html" class="philosophie noText">Philosophie</a></li>
<li><a href="ueber-uns.html" class="ueber-uns noText">Über uns</a></li>
<li><a href="referenzen.html" class="referenzen noText">Referenzen</a></li>
<li><a href="kontakt.html" class="kontakt noText">Kontakt</a></li>
</ul>
</div>
</div> <!-- end of header -->
<div id="content-main-container"></div>
<div id="content-main">
<div id="content-var">
<div id="sidebar1">
<p1>TesttextTesttextTesttextTesttextTesttextTesttextvTesttextTesttextTesttextTesttextTesttextTesttextTesttextTesttextTesttextTesttextTesttext</p1>
</div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
charset "UTF-8";
/* CSS Document */
* {margin:0; padding: 0; border: 0; }
html {background:url(../images/Header_links.jpg) repeat-x transparent;}
#body1 {
}
div#container {width:1021px; margin:0 auto; }
div#header {width:1021px; height:312px;background:url(../images/bg-header.jpg) 0 0 no-repeat; position:relative; }
div#header a#logo { width: 346px; height: 244px; display:block; position:absolute; top:37px; left: 25px; }
.noText { text-indent: -9999px; color:#111; font-size:1px; overflow:hidden;}
p1 {
font-weight:normal;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}
div#header ul#subnavi { list-style:none; }
div#header ul#subnavi li a { height: 32px; display:block; background:url(../images/subnavi.jpg) no-repeat; position:absolute; top:280px }
div#header ul#subnavi li a.start { width: 73px; background-position:0 0; left:367px;}
div#header ul#subnavi li a.produkte { width: 97px; background-position:0 -32px;left:440px;}
div#header ul#subnavi li a.philosophie { width: 114px; background-position:0 -64px;left:536px;}
div#header ul#subnavi li a.ueber-uns { width: 121px; background-position:0 -96px;left:650px;}
div#header ul#subnavi li a.referenzen { width: 113px; background-position:0 -128px;left:771px;}
div#header ul#subnavi li a.kontakt { width: 102px; background-position:0 -160px;left:883px;}
div#header ul#subnavi li a:hover,
div#header ul#subnavi li.active a {background:none; }
div#content-main-container {width:980px; background:url(../images/content_oben.jpg) no-repeat; margin: 0 auto; }
div#content-var {width:980px; background:url(../images/content_mitte.jpg) repeat-y; margin: 0 auto; }
div#sidebar1 {width: 250px; height:100%; top: 339px; padding-left: 20px; paddig-top: 10px; }
.class1 {font-family:Verdana, Geneva, sans-serif; font-size:12px, color:#FFF; }
div#content-main {width: 980px; background:url(../images/content_unten.jpg) no-repeat; margin: 0 auto; }
div#footer { width:980px; background:url(../images/footer.jpg) no-repeat; margin: 0 auto; }
/* Easy Slider */
#slider {
margin-left: 380px;
}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:600px;
height:240px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
/* // Easy Slider */
