jquery box slide css problem, overlay

lasse48 · 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>

cssfreakie · 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.

Sign In

jquery box slide css problem, overlay

Recommended Posts

lasse48

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information