Jquery slider - One2xs Forum

Lid · Topicstarter

Berichten: 1.644
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 18 sep 2018

27 aug 2012, 18:51

Hallo,

Ik ben een layout aan het maken voor het verhuur van een huisje maar nu vallen er een aantal problemen voor, heb ook al een tijdje niet gebased.

Nu wil ik graag rhinoslider inbouwen tussen mijn menu en mijn content

Ik heb al wat geprobeerd maar kom er niet uit

Mijn background moet links zijn en de rechter kant opvullen met een andere afbeelding en daar onder een background colour.

Verder kan ik de layout wel verder aanpassen

Screen van nu:

Screen van rhinoslider slecht ingebouwd:

Hoe die moet:

Mijn css:

Spoiler tonen

/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#588deb url(images/background.jpg) repeat-x; font: 11px normal 

Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:660px; margin:0 auto;} /* width= de breedte van je layout, margin 0 = aantal pixels vanaf de bovenkant en 

auto betekend gecentreerd.*/
#header {background: url(images/header.png); width: 660px; height: 66px; margin: 0;}
#header h1 {font-size: 30px; color:#f1f1f0; margin:0; padding:120px 0 0 100px; } /* we zetten de h1 achter #header zodat de 

h1 waarde allen voor die div toepasbaar is.*/
#menu {background: url(images/menu.png); width: 660px; height: 45px; margin: 0;}
#menuitems {text-align: center; padding-top: 3px;} /*nu komt het in het midden en 3px vanaf de bovenkant.*/
#menuitems a {font-size: 11px; color: #f1f1f0; text-decoration: none;} /*met de a kunnen we de waarde van de linken bepalen 

voor de menuitems*/
#menuitems a:hover { color: #cedfe8;}/*de kleur voor als je met je muis over de link gaat*/
#content {background: url(images/content.png); width: 660px; margin: 0; overflow:hidden;} /*hieraan geven we geen height mee 

omdat deze moet "meerekken" met de inhoud van je site. De overflow zorgt hiervoor.*/
#left { width: 195px; margin: 10px 0 0 50px; float:left;}
#right { width: 580px; margin: 10px 0 0 30px; float:left;} /*let op dat de width + de margins van zowel left als right totaal 

niet meer zijn dan de breedte van je layout, anders komt de laatste div eronder ipv ernaast.*/
#footer {background: url(images/footer.png); width: 660px; height: 19px; margin: 0;}
#top {background: url(images/top.png); width: 660px; height: 18px; margin: 0;}
#footer h2 {font-size: 9px; color:#f1f1f0; text-align: center; padding-top: 2px; margin: 0;}/*de margin is hier nodig om de 

footer op zijn plaats te houden*/
#container2 {width:660px; margin:0 auto;} /* width= de breedte van je layout, margin 0 = aantal pixels vanaf de bovenkant en 

auto betekend gecentreerd.*/

Mijn index.html

Spoiler tonen

<!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=iso-8859-1" />
<title>Titel van je site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">

 <div id="header">
 </div>
 
  <div id="menu">
  <div id="menuitems">
  <a href="#">home</a> | <a href="#">link 2</a> | <a href="#">link 3</a> | <a href="#">enzovoorts</a>
  </div></div>
        <div id="top"></div>

   <div id="content">
hoi</br>hoi</br>hoi
   </div>
        <div id="footer"></div>
   <div style="clear:both"></div>
   



</body>
</html>

Mijn index.html met wat gepruts met rhinoslider

Spoiler tonen

<!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=iso-8859-1" />
<title>Titel van je site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">

 <div id="header">
 </div>
 
  <div id="menu">
  <div id="menuitems">
  <a href="#">home</a> | <a href="#">link 2</a> | <a href="#">link 3</a> | <a href="#">enzovoorts</a>
  </div></div>
<html>
    <head>
        <meta charset="utf-8">
        <title>Rhinoslider 1.05</title>
        <link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
        <script type="text/javascript" src="js/mousewheel.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $(#slider).rhinoslider({
                    controlsPlayPause: false,
                    autoPlay: true,
                    pauseOnHover: false
                });
            });
        </script>
        <style type="text/css">
            body { background-color:#000; }
            
            #slider {
                width:600px;
                height:250px;
                
                /*IE bugfix*/
                padding:0;
                margin:0;
            }
            
            #slider li { list-style:none; }
            
            #page {
                width:600px;
                margin:50px auto;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <ul id="slider">
                <li><img src="img/slider/01.jpg" alt="" /></li>
                <li><img src="img/slider/02.jpg" alt="" /></li>
                <li><img src="img/slider/03.jpg" alt="" /></li>
                <li><img src="img/slider/04.jpg" alt="" /></li>
                <li><img src="img/slider/05.jpg" alt="" /></li>
            </ul>
        </div>
    </body>
</html>
        <div id="top"></div>

   <div id="content">
hoi</br>hoi</br>hoi
   </div>
        <div id="footer"></div>
   <div style="clear:both"></div>
   



</body>
</html>

Hopelijk dat iemand me verder kan helpen