我有一个小工具栏div位置:固定,因此它会随着用户滚动而移动.工具栏在一个更大的div内,但是我需要工具栏不滚出父div - 有什么办法可以做到这一点吗？
如果您不明白我的意思,请查看:http://flowmainserver.appspot.com/post (我希望爱心和其他按钮不会滚动出大图像div,因为它们会阻碍评论框)
有没有办法用css实现这个或者我需要javascript吗？谢谢!
首先,一些其他指针:
<!DOCTYPE>声明.(使用不同的<!DOCTYPE>声明可能需要您进行一些更改,包括addnig cellspacing="0" cellpadding="0"to <table>tags)<center>元素-而不是使用的组合margin:auto和text-align:center;.<div>放在内联级别元素中,<a>如下所示:<a href="/"><div class="title"></div></a>.相反,给你<a>一个display:block;CSS属性.
text-indent:-10000px;删除它.<link />有时不关闭<img>.选择其中一个,并使用适当的<!DOCTYPE>alt对属性<img />的标签,并rows和cols上<textarea>标签,以验证您的HTML文档.这将导致浏览器之间更加一致的行为和更好的可访问性.折腾一些<h1>... <h6>标题你在SEO上也很稳固.
至于你的问题......也许你只是把它放在评论的后面？
把它放在一个.html文件中:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base href="http://flowmainserver.appspot.com/" /> <!-- remove this when you put it online -->
<!-- Copyright Cal Smith 2010 $(window).height()-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">$(window)._scrollable();</script>
<link href="buttons.css" media="all" rel="stylesheet" type="text/css" />
<link href="main.css" media="all" rel="stylesheet" type="text/css" id="main_css" />
<title>flow | post title</title>
<script type="text/javascript">/*
$(window).scroll(function(){
if($(window).scrollTop() == $(document).height() - $(window).height()){
document.location = "http://www.google.com";
}
});
*/</script>
<style type="text/css">
html body {
text-align:center;
}
html body div.pageHolder {
margin:auto;
}
html body a.title {
text-indent:-10000px;
display:block;
}
html body table {
position:relative;
z-index:10;
background:url(imgs/dark_bg.png) repeat;
}
html body table table td {
padding-bottom:5px;
}
</style>
</head>
<body>
<div class="pageHolder" style="margin:auto;">
<a href="/" class="title">Flow</a>
<div class="directory">
<p class="categoryTitle">Post title<span class="categoryTitleBy"> 2 weeks ago by @<a href="#" class="categoryTitleByA">author url</a></span></p>
<div class="postDescription"></div>
<div class="heartOff" title="Click to heart">♥</div>
<div class="commentTab" onclick="$(window).scrollTo( $('#commentBoxTitle'), 380 ); $('#commentBox').focus();" title="Comments">Ξ </div>
<div class="postFull" style="background-image: url(example_full.png); height: 500px; width: 1300px;"></div>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<span class="commentBoxTitle" id="commentBoxTitle">Comment</span>
<textarea id="commentBox" class="commentBox"></textarea>
<div align="right"><div class="commentPostButton">Post</div></div>
</td>
<td>
<div class="commentsHolder">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/10587/xl.png?1280926926" class="commentUserPic" /></td>
<td><div class="commentBody">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/7825/xl.png?1278955396" class="commentUserPic" /></td>
<td><div class="commentBody">Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/10587/xl.png?1280926926" class="commentUserPic" /></td>
<td><div class="commentBody">Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.</div></td>
</tr>
<tr>
<td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/7825/xl.png?1278955396" class="commentUserPic" /></td>
<td><div class="commentBody">Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus.</div></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div class="footer">created by cal smith</div>
</div>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
12263 次 |
| 最近记录： |