hi,
ich möchte auf meiner startseite eine jquery slideshow einbinden. das problem ist aber, das nur ein smaler streifen des bildes angezeigt wird und auch nur ein einziges bild, obwohl mehrere bilder eingebunden sind. außerdem sollen die bilder in der höhe immer bildschirmfüllend sein, aber die werden immer zu groß angezeigt.
hier mal der html code
und die css
danke schon mal für eure mühe
ich möchte auf meiner startseite eine jquery slideshow einbinden. das problem ist aber, das nur ein smaler streifen des bildes angezeigt wird und auch nur ein einziges bild, obwohl mehrere bilder eingebunden sind. außerdem sollen die bilder in der höhe immer bildschirmfüllend sein, aber die werden immer zu groß angezeigt.
hier mal der html code
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>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>artdreamers</title>
<!-- slider -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>
<!-- ende slider -->
<link href='http://fonts.googleapis.com/css?family=Puritan:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="content">
<div id="slider">
<ul>
<li><img src="bilder/7.jpg" /></li>
<li><img src="bilder/8.jpg" /></li>
<li><img src="bilder/9.jpg" /></li>
<li><img src="bilder/10.jpg" /></li>
</ul>
</div><!-- slider -->
</div> <!-- content -->
</div> <!-- container -->
<div id="menu">
<div id="slidemenu">
<div class="titel"><a href="#">shootings</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="titel"><a href="#">grafikdesign</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
<div class="links"><a href="#">name</a></div>
</div>
</div>
</body>
</html>und die css
HTML:
html, body
{
font-family: 'Puritan', arial, serif;
width:100%;
height:100%;
background-color:#ffffff;
margin: 0;
padding: 0;
overflow: hidden;
}
img
{
border:0;
}
#menu
{
position:fixed;
top:250px;
padding:25px;
width:100px;
height:auto;
background-color:#FFF;
opacity:.7;
z-index:100;
}
#slidemenu
{
color:#333;
}
.links
{
margin-left:25px;
font-size:14px;
line-height:1.5;
}
.links a:link
{
color:#333;
text-decoration:none;
}
.links a:active
{
color:#33cc33;
text-decoration:none;
}
.links a:hover
{
color:#33cc33;
text-decoration:none;
}
.links a:visited
{
color:#333;
text-decoration:none;
}
.titel
{
margin-top:10px;
}
.titel a:link
{
color:#333;
text-decoration:none;
}
.titel a:active
{
color:#33cc33;
text-decoration:none;
}
.titel a:hover
{
color:#33cc33;
text-decoration:none;
}
.titel a:visited
{
color:#333;
text-decoration:none;
}
#container
{
width:100%;
height:100%;
margin: 0;
padding: 0;
position:relative;
text-align:left;
background:#fff;
z-index:1;
}
#content
{
z-index:2;
}
#slider ul, #slider li,
{
margin: 0;
padding: 0;
list-style:none;
z-index:3;
}
#slider li
{
width:100%;
height:100%;
margin: 0;
padding: 0;
overflow:hidden;
z-index:4;
}
#prevBtn,
{
display:block;
vertical-align:middle;
position:absolute;
left:50px;
z-index:1000;
}
#nextBtn
{
display:block;
position:absolute;
right:50px;
vertical-align:middle;
z-index:1000;
}danke schon mal für eure mühe
