CODEWITHSUNDEEP
jquerycss
CryOfFaclon
CryOfFaclon

Reputation: 249

css and jquery issue

i'm working on a layout for my dads company and now i need to make a slider between their recent contracts... And next to it there are buttons with their expertise etc. And if you press one of the buttons it should slide to a list with their expertises.

But the expertise-slide won't work well and i've just found out that the slides that shouldn't be showed are just behind the the rest of the text Confused (Check under the footer when you have just openend the page) Can anyone help me?

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>IDIS | International Development Innovation Service</title>
    <link href="css.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    var step = 1;
    var slide = "";
    var interval;
    $(document).ready(function(){
      interval = setInterval("change()", 5000);
    });
    /*if(slide !== "")
    {
     $("#" + slide).mouseleave(function(){
        $("#" + step).slideDown("slow");
        $("#" + slide).slideUp("slow");
        interval = setInterval("change()", 15000);
     });
    }*/
   expertise = function()
    {
       clearInterval(interval);
       $("#4").slideDown("slow");
       $("#" + step).slideUp("slow");
       slide = "4";
    };
    change = function()
    {
       var oldstep = step;
       step++;
       if(step === 4)
       {
        step = 1;
       }
       $("#" + step).slideDown("slow");
       $("#" + oldstep).slideUp("slow");
    };
</script>
  </head>
  <body>
   <div class="content">
   <!-- HEADER -->
      <div class="textchoice"><a href="#">Fran&ccedil;ais</a> - <a href="#">English</a></div>
      <div class="headertekst">
        <div class="logo"></div>
        <div id="slogan">Challenging Changes</div>
        <div id="name">International Development Innovation Services</div>
      </div>
      <!--  MENU BAR-->
      <div class="bar">
        <div class="menubar">
          <ul>
            <li><a href="#" onclick="expertise()">EXPERTISE</a></li>
            <li><a href="#">GEOGRAPHIC AREAS</a></li>
            <li><a href="#">VIEW ALL</a></li>
          </ul>
        </div>
        <!-- SLIDER 1 -->
        <div class="slider" id="1">
          <div class="img">
            <img src="images/Tawaz (1).jpg" width="85" height="64"/><br />
            2012
          </div>
          <div class="contractstekst" id="1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut.
          </div>
          <div class="title">
            CONTRACTS
          </div>
         </div>

          <!-- SLIDER 2 -->
        <div class="slider" id="2">
          <div class="img">
            <img src="images/Tawaz (1).jpg" width="85" height="64"/><br />
            2011
          </div>
          <div class="contractstekst">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut.
          </div>
          <div class="title">
            CONTRACTS
          </div>
         </div>

          <!-- SLIDER 3 -->
        <div class="slider" id="3">
          <div class="img">
            <img src="images/Tawaz (1).jpg" width="85" height="64"/><br />
            2010
          </div>
          <div class="contractstekst">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut.
          </div>
          <div class="title">
            CONTRACTS
          </div>
         </div>

          <!-- EXPERTISE -->
        <div class="img">
            <img src="images/Tawaz (1).jpg" width="85" height="64"/><br />
            2010
          </div>
          <div class="contractstekst">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut.
          </div>
          <div class="title">
            EXPERTISE
          </div>
         </div>
        <!-- HIER BEGINT DE TEKST IN HET WITTE VAK -->
      <div class="witvak">
        <div class="witvakmenu">
          <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PEOPLE</a></li>
            <li><a href="#">PARTNERS</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>
        </div>
        <!-- HIER KOMT DE CONTENT -->
        <div class="witvakcontent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at sapien arcu, condimentum pulvinar elit. Suspendisse sed lacus at sapien sollicitudin vulputate. Phasellus sem nunc, venenatis at egestas nec, egestas vitae nisi. Etiam eu ante mauris, sed vulputate felis. Duis euismod eros in tortor gravida ut scelerisque ante condimentum. Vivamus id orci quis elit convallis tempor. Suspendisse elit nulla, posuere vel ullamcorper vel, accumsan a sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vestibulum, elit quis feugiat posuere, sem urna laoreet nisi, rutrum fermentum leo nunc a ligula. Curabitur tristique neque nec arcu pulvinar aliquet. Sed non commodo metus. Phasellus fermentum vestibulum interdum. Donec id nulla elit, at pharetra lacus. Proin ac neque quis velit commodo venenatis sed quis nunc. Sed nec diam augue. Duis at lectus nunc.
        </div>
      </div>
      <!-- DE FOOTER-->
      <div class="footer">
        Krombrakenstraat 19  B-2460 Kasterlee  Belgium  |  [email protected]  |  tel.: (+32) 478/644 609
      </div>
   </div>
  </body>
</html>

and the css

body {
background-color:#eef6e9;
background-image:url('images/background.png');
background-position:center top;
background-repeat: no-repeat;
}
.content {
width: 1240px;
margin: 0px auto;
}
a {
text-decoration: none;
}
a:link {
color:#000000;
}
a:hover {
color:#82c225;
}
a:visited {
color:#000000;
}




/* HEADER */
.headertekst {
font-family: bimini;
width: 1240px;
margin: 0px auto;
}

#slogan {
display: inline-block;
margin-left: 377px;
margin-top: 10px;
font-size: 44px;
}
#name {
display: inline-block;
margin-top: 7px;
margin-left: 270px;
font-size: 25px;
}

.textchoice {
font-family: Trebuchet MS;
margin-top: 3px;
margin-right: 164px;
float:right;
}
.logo {
margin-top: 9px;
margin-left: 188px;
background-image:url('images/logo.png');
width: 158px;
height: 145px;
float: left;
}



/*CONTRACTS BAR*/
.bar {
width: 1002px;
height: 124px;
margin: 18px 124px 0px 124px;
float: left;
background-image:url('images/contracts_bar.png');
background-repeat:y-repeat;
}
.menubar {
float: left;
width: 270px;
height: 124px;
font-family: bimini;
text-align: right;
color: white;
margin-left: -50px;
margin-top: -17px;
font-size: 21px;
line-height: 40px;
}
.menubar ul {
list-style-type: none;
}
.menubar a {
text-decoration: none;
}
.menubar a:link {
color:#FFFFFF;
}
.menubar a:hover {
color:#82c225;
}
.menubar a:visited {
color:#FFFFFF;
}
.slider {
float: left;
height: 124px;
width: 675px;
margin-left: 64px;
}
/* IDS VAN SLIDERS */

#2 {
display:none;
}
#3 {
display:none;
}
#4 {
display:none;
}
.img {
float: left;
margin-top: 21px;
height: 124px;
width: 89px;
text-align:right;
font-family: bimini;
color:white;
font-size: 21px;
}
.img img{
border-style: solid;
border-color: white;
border-width: 2px;
}
.contractstekst {
color: white;
float: left;
font-family: Trebuchet MS;
font-size: 13px;
margin-left: 31px;
margin-top: 15px;
width: 400px;
height: 100px;
}
.title {
color: white;
float: left;
font-family: bimini;
font-size: 29px;
margin-left: 20px;
margin-top: 23px;
text-align: right;
width: 40px;
}



/*WITVAK*/
.witvak {
width: 1002px;
background-color:#FFFFFF;
float: left;
margin-left: 124px;
}
.witvakmenu {
width: 220px;
float: left;
text-align: right;
font-family: bimini;
font-color: black;
font-size: 21px;
line-height: 40px;
}
.witvakmenu ul {
list-style-type: none;
}
.witvakmenu a {
text-decoration: none;
}
.witvakmenu a:link {
color:#000000;
}
.witvakmenu a:hover {
color:#82c225;
}
.witvakmenu a:visited {
color:#000000;
}
.witvakcontent {
font-family: Trebuchet MS;
margin-top: 27px;
font-size: 15px;
float: left;
width: 675px;
margin-left: 64px;
padding-bottom: 20px;
}




/*FOOTER*/
.footer {
background-color:#0c651a;
text-align: center;
font-family: Trebuchet MS;
width: 1002px;
height: 24px;
margin-left: 124px;
color: white;
font-size: 14px;
float: left;
}

Here's a demo: http://legendofthesamurai.gamecoll.com/idis/ Thanks in advance

Upvotes: 0

Views: 77

Answers (1)

CryOfFaclon
CryOfFaclon

Reputation: 249

I believe I've found the bug :p it was just because of script couldn't find the CSS ids (I think this would be the reason).

Upvotes: 1

Related Questions