Guten Tag liebe Community,
Mein Problem ist folgendes :
Ich habe mir den "Jquery Nivo Slider" heruntergeladen und alles nach dieser Anleitung befolgt.
Es funktioniert auch alle soweit, nur soll der "Nivo Slider" über die gesamte Breite gehen also width:100%;
Ebenfalls ist dort noch ein Fehler vorhanden da die 2 Beispielbilder sich komisch überlappen.
Aber seht am besten selbst :
http://www.my-alina.de/anpassung/1/Sitrion.html
Hier nochmals die Codes :
Head:
Code
<link rel="stylesheet" type="text/css" href="Sitrion.css" /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />Body :
HTML
<div id="Headerslider"> <div id="slider" class="nivoSlider"> <img src="images/Sitrio-Beispiel1.png" alt="" /> <img src="images/Sitrio-Beispiel2.png" alt="" /> </div> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'fade', // 'random' oder Übergangseffekte auflisten z.B: 'fold,fade,sliceDown' animSpeed: 500, // Geschwindigkeit des Übergangseffektes pauseTime: 5000, // Zeit wie lange jedes Bild angezeigt wird });});</script></div>Css :
CSS
/* * jQuery Nivo Slider v2.7.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:287px;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
width:100%;
display:none;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}