lasse48 Posted September 5, 2011 Share Posted September 5, 2011 hi. I started to play around with a JQ box slider, but the box keeps the content over my right div which is the border, have tried a little with z-index and position, but not helped. thanks in advance. lasse index.php http://www.lassejensenbang.dk/frame_multi_windows/ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Legeplads18</title> <meta name="copyright" content="Copyright (C) www.legeplads18.dk, 2011. All rights reserved."> <meta name="author" content="www.legeplads18.dk"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="PRAGMA" content="no-cache"> <link rel="shortcut icon" href="favicon.ico" > <!-- JAVASCRIPT --> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ //Initialize //Set the selector in the first tab $(".container .TabMenu span:first").addClass("selector"); //Basic hover action $(".container .TabMenu span").mouseover(function(){ $(this).addClass("hovering"); }); $(".container .TabMenu span").mouseout(function(){ $(this).removeClass("hovering"); }); //Add click action to tab menu $(".container .TabMenu span").click(function(){ //Remove the exist selector $(".selector").removeClass("selector"); //Add the selector class to the sender $(this).addClass("selector"); //Find the width of a tab var TabWidth = $(".TabContent:first").width(); if(parseInt($(".TabContent:first").css("margin-left")) > 0) TabWidth += parseInt($(".TabContent:first").css("margin-left")); if(parseInt($(".TabContent:first").css("margin-right")) >0) TabWidth += parseInt($(".TabContent:first").css("margin-right")); //But wait, how far we slide to? Let find out var newLeft = -1* $("span").index(this) * TabWidth; //Ok, now slide $(".AllTabs").animate({ left: + newLeft + "px" },1000); }); }); </script> <!-- JAVASCRIPT --> <!-- CSS --> <style type="text/css"> body, html { margin:0; padding:0; width:100%; height:100%; z-index: 1; } html, body, .container { height: 100%; min-height: 100%; width:100%; overflow:hidden; top:0px; left:0px; background: #222; } .selector { background: url(img/selector.png); } .hovering { background: url(img/selector.png); opacity: 0.5; } .container .TabMenu { position: relative; top: 0px; left: 0px; z-index: 10; } .container .TabMenu span { display: inline-block; height: 77px; margin: 0px; padding:0px; } .container .ContentFrame { width: 800px; left: 0px; overflow:hidden; color: #fff; float:left; } .container .ContentFrame .AllTabs { position: relative; left:0px; width: 2500px; overflow:hidden; z-index: 2; } .container .ContentFrame .AllTabs .TabContent { width:800px; margin-right:20px; text-align: justify; float:left; overflow:hidden; } .TabMenu { background: url(img/slideTabbg_middel.png); background-repeat:repeat-x; } .TabMenu_top_left { background: url(img/slideTabbg_left.png); background-repeat:no-repeat; width: 7px; height:77px; float:left; } .TabMenu_top_right { background: url(img/slideTabbg_right.png); background-repeat:no-repeat; width: 7px; height:77px; float:right; } .Content_middel_left { background: url(img/Content_middel_left.png); background-repeat:no-repeat; background-size: 100%; width: 7px; height:100%; float:left; } .Content_middel_right { background: url(img/Content_middel_left.png); background-repeat:no-repeat; background-size: 100%; width: 7px; height:100%; float:right; z-index: 5; } .TabMenu_footer { bottom: 0px; left: 0px; z-index: 10; width: 100%; height:9px; float:left; background: url(img/slideTabbg_middel_footer.png); background-repeat:repeat-x; position: fixed; } .TabMenu_footer_left { background: url(img/slideTabbg_middel_footer_left.png); background-repeat:no-repeat; height:9px; width: 6px; float:left; } .TabMenu_footer_right { background: url(img/slideTabbg_middel_footer_right.png); background-repeat:no-repeat; width: 6px; height:9px; float:right; } img#bg { width:7px; height:100%; } .Contentcenter{ position: relative; width: 800px; overflow:hidden; align:center;margin:0 auto; } </style> <link href="css/site_1.css" rel="stylesheet" type="text/css"> <!-- CSS --> </head> <body> <div class="container"> <div class="TabMenu"> <div class="TabMenu_top_left"></div> <span> <img src="img/contact.png" /> </span> <span> <img src="img/ipod.png" /> </span> <span> <img src="img/drive.png" /> </span> <div class="TabMenu_top_right"></div> </div> <div class="Content_middel_left"><img src="img/Content_middel_left.png" alt="" border="0" id="bg" /></div> <div class="Contentcenter"> <div class="ContentFrame"> <div class="AllTabs"> <div class="TabContent"> <p> <?php include("site_1.php"); ?> </p> </div> <div class="TabContent"> <p> Videos! Site! Test! </p> </div> <div class="TabContent"> <p> Webcams! Site! Test!<br/> <img src="img/UNDER_CONSTRUCTION.png" height="248" width="327" alt="" border="0"/> </p> </div> </div> </div> </div> <div class="Content_middel_right"><img src="img/Content_middel_left.png" alt="" border="0" id="bg" /></div> <div class="TabMenu_footer"> <div class="TabMenu_footer_left"></div><div class="TabMenu_footer_right"></div> </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/246473-jquery-box-slide-css-problem-overlay/ Share on other sites More sharing options...
cssfreakie Posted September 5, 2011 Share Posted September 5, 2011 you might want to consider instead of using those empty divs left and right to use a padding left and right of 7 px on the middle div. Saves mark up and makes more sense if you look at the boxmodel. Link to comment https://forums.phpfreaks.com/topic/246473-jquery-box-slide-css-problem-overlay/#findComment-1265714 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.