samson.oba.77 0 Newbie Poster

I tried different jquerry sliders from the internet. Some work but only as full background while i want the slider containend in a div "<div class="banner"> ".
Im now using unslider from unslider.com, while the sliding works the images totally leak out of the div container.How can I change this ? thx . Down youll see my html and css code.

<!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>
    <title>Slider2</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//unslider.com/unslider.min.js"></script>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <header><h1>Deine Pizzeria</h1>
    </header>
    <section id="underheadersection">


        <div id="underheadersectionPic1"> g</div>
        <div class="banner">
    <ul>
        <li><img alt="slideimage" src="picFold/opt111.jpg" /></li>
        <li><img alt="slideimage" src="picFold/pic11.jpg" /></li>
        <li><img alt="slideimage" src="picFold/pic12.jpg" /></li>
    </ul>
</div> 
    </section>
    <section id="maincontainer"><div class="resize"></div>
        <section id="upleft" class="navilinks"><a href="index.html">Home</a>
        </section>
        <section id="upright" class="navilinks"><a href="speisen.html">Speisemen&uuml</a> 
        </section>
        <section id="downleft" class="navilinks"><a href="kontakt.html">Kontakt</a>
        </section>
        <section id="downright" class="navilinks"><a href="anfahrt.html">Anfahrt</a>
        </section>
        <section id="centralcontainer">
             <div class="resize2">
                <img src="pizzapic2.png" width="2000" height="1131" border="0" usemap="#map" />
                <map name="map">
                <area shape="poly" coords="635,311,706,204,879,90,1029,67,1335,157,1447,284,1499,408,1513,564,1502,830,1405,958,1243,1073,1098,1112,906,1081,768,1032,616,859,540,705,531,650,533,561,606,359" href="pizzagenerator.html" />
                </map>
            </div>
        </section>

    </section>
 <script>
 $(function() {
    $('.banner').unslider();
}); 
 </script>
</body>

</html>




html,body {height:100%;margin:0%;background:red;}
header{height:10%;width:100%;background:green;border:black;text-align:center;margin:0%;font-family:geneva;}
section{}
nav{}

#underheadersection{position:relative;height:30%;width:100%;background:blue;border:thick black;}
#underheadersectionPic1{height:100%;width:46%;margin-left:2%;margin-right:2%;float:left;background-image:url("picFold/opt111.jpg");background-size:contain;}
#underheadersectionPic2{height:100%;width:46%;margin-left:2%;margin-right:2%;float:left;background-image:url(pic12.jpg);background-size:contain;}
#maincontainer{position:relative;top:0%;left:0%;border:black max-height:60%;width:100%;background:yellow;clear:both;}
#centralcontainer{}
#upleft{position:absolute;top:0%;left:0%;border:black;text-align:center;margin:1% 0% 0% 1%;}
#upright{position:absolute;top:0%;right:0%;border:black;text-align:center;margin:1% 1% 0% 0%;; }
#downleft{position:absolute;bottom:0%;left:0%;border:black;text-align:center;margin:0% 0% 1% 1%;%; }
#downright{position:absolute;bottom:0%;right:0%;border:black;text-align:center;margin:0% 1% 1% 0%;%; }
.navilinks{font-size:130%;font-family:cursive;border:thick black;}
.resize img{max-width:100%; height:auto;}
.resize2 img{position:relative;top:auto;left:25%; width: 50%;height:auto;}


.banner { position:relative; overflow:scroll;background-size:contain; }
.banner li { list-style: none; }
.banner ul li { float: left; }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.