Jump to content

jquery box slide css problem, overlay


lasse48

Recommended Posts

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

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.