hej.
jeg er igang med at lege lidt med en jq box slider, men selve box content holder overlayer min right div som er border , har prøvet lidt med z-index og position, men ikke hjulpet.
på forhånd tak.
mvh lasse
index.php
<!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>Untitled Document</title>
<!-- 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>
<!-- 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>
Dating! Site! Test!
</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>
Indlæg senest redigeret d. 05.09.2011 20:18 af Bruger #16514