Overlapping div tag background image not showing
Im working on a project with 2 other guys for an internship. Were trying to create a html web app that ideally will look as close to this layout as possible
Ipad twitter app
My friend is using jquery to create draggable and resizable div tags and I am working on the looks.
At the moment I am trying to create a new div tag inside the draggable div tag. However the text in the new div tag is overlapping the previous div tags text and the background color of the new div is not showing through. I have been playing around with z index to no avail.
Any help would be appreciated
<html>
<head>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<link rel="stylesheet"
type="text/css" href="testcss.css" />
</head>
<style>
#ipad { width: 1024; height: 768;}
#draggable { width: 150px; height: 768px; padding: 0.5em;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ axis: "x" },{containment: "#ipad"});
});
</script>
<div id="ipad">
<div id="draggable"class="ui-widget-content">
<div="topbar">
<p> topbar </p>
</div>
<p>Drag me around</p>
</div>
</div>
</html>
Here is the CSS file
body{
background-color:black;
}
div#ipad{
/* fallback */
background-color: #2F2727;
background-image: url(images/radial_bg.png);
background-position: center center;
background-repeat: no-repeat;
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* Safari 4-5, Chrome 1-9 */
/* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
/* Opera cannot do radial gradients yet :( */
}
div#draggable{
z-index:1;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.08, rgb(110,110,110)),
color-stop(0.18, rgb(135,135,135))
);
background-image: -moz-linear-gradien开发者_运维技巧t(
center top,
rgb(110,110,110) 8%,
rgb(135,135,135) 18%
);
}
div#topbar{
margin-top:300px;
z-index:2;
}
Start by correcting some errors in the HTML code:
- You shold have a doctype tag.
- The style and script tags should be in the head tag.
- You don't have any body tag.
<div="topbar">should be<div id="topbar">
Then you have something that works as expected: http://jsfiddle.net/RgGdc/
加载中,请稍侯......
精彩评论