好的,在我的主页上http://www.stat-me.com
我有一个链接,当按下时会激活一些jquery。
我有css说它margin-bottom:517px;
但它不影响它
这是与文字XXXXXXXXXXXX
的链接,如果您转到实际页面,您会看到它粘在透明栏下方的左下角
很抱歉,因为我是新用户,我无法发布代码,因为它中有超链接,但您可以转到上面的链接并单击查看源,您将看到它。
基本上,如果您点击新闻Feed,则会在点击XXXXXXXXX
链接后显示我想要发生在登录脚本上的内容
<?php
session_start();
if (isset($_SESSION['id'])){
header ('Location: dock.php');
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stat - Me</title>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="http://www.stat-me.com/images/sm_shortcut.jpg" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.stat-me.com/images/sm_shortcut.jpg" type="image/x-icon" />
<script src="js/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// run the function below once the DOM(Document Object Model) is ready
$(document).ready(function() {
// trigger the function when clicking on an assigned element
$(".toggle").click(function () {
// check the visibility of the next element in the DOM
if ($(this).next().is(":hidden")) {
$(this).next().show(); // slide it down
} else {
$(this).next().hide(); // hide it
}
});
});
</script>
<style type="text/css">
<!--
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color: #F00;
}
a:visited {
/* Applies to all visited links */
text-decoration: none;
color: #F00;
}
a:hover {
/* Applies to links under the pointer */
text-decoration: underline;
color: #F00;
}
a:active {
/* Applies to activated links */
text-decoration: underline;
color: #282828;
}
img{
border-style:none;
}
.topbar {
background-color: #282828;
height: 45px;
width: 100%;
position: fixed;
left: 0px;
top: 0px;
}
.bottombar {
background-color: #282828;
height: 45px;
width: 100%;
position: fixed;
left: 0px;
bottom: 0px;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
/*margin-bottom:5px; */
z-index:444;
/*padding-bottom: 20px;*/
}
.login {
color: #F00;
text-align:center;
}
.hiddenDiv{
display:none;
height: 22.5px;
width: auto;
position: fixed;
bottom: 44px;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
z-index:444;
}
#news_feed_img{
height: 25px;
width: auto;
position: fixed;
right: 0px;
bottom: 47px;
filter:alpha(opacity=85);
-moz-opacity:0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
/*margin-bottom:5px; */
z-index:444;
/*padding-bottom: 20px;*/
}
/* BELOW CSS BELONGS TO LOG IN JQ */
.secondehiddendiv{
display:none;
margin-top:40px;
margin-left:480px;
}
.chat-bubble {
background-color:#242424;
border:2px solid #F00;
line-height:1.3em;
margin:10px auto;
padding:10px;
position:relative;
text-align:center;
width:217px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:0 0 5px #888888;
-webkit-box-shadow:0 0 5px #888888;
}
.chat-bubble-arrow-border {
border-color: transparent transparent #F00 transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:163px;
left:179px;
}
.chat-bubble-arrow {
border-color: transparent transparent #242424 transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:160px;
left:179px;
}
.log_in_img{
margin-left:117px;
}
/*END OF LOG IN CSS*/
-->
</style>
</head>
<body bgcolor="#FF8C8C">
<div class="topbar">
<table width="100%">
<tr>
<td width="50%">
<a href="http://www.stat-me.com/"><img src="http://www.stat-me.com/images/logo_bar.png" alt="Stat-Me.com" width="202" height="45" /></a>
</td>
<td width="19%"> </td>
<td width="11%" class="login"><a href="#">LOG IN</a></td>
<td width="20%"><table align="right" cellpadding="5" cellspacing="5">
<tr>
<form action="http://www.stat-me.com/member_search.php" method="post" name="main-search" id="main-search">
<td><input name="searchb" type="hidden" value="true" />
<input type="text" name="search" size="22" value="" /></td>
<td><input type="image" src="http://www.stat-me.com/images/search_mag.png" alt="search" /></td>
</form>
</tr>
</table></td>
</tr>
</table>
</div>
<div align="center">
<img src="images/INDEX-QUESTIONARE.png" border="0" align="middle" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="23,143,385,384" href="fregister.php" alt="click here to register" />
<area shape="rect" coords="432,142,781,391" href="fabout.php" alt="What is stat me . com" />
</map>
</div>
<div class="bottombar">
<div align="center" style="color:#F00"><p>
© Stat-Me.com Copyright 2010. All Rights Reserverd.
</p></div>
</div>
<span class="toggle" style="display:block; margin-bottom:517px;">
<a href="#">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a>
</span>
<div class="secondehiddendiv">
<div class="chat-bubble">
<h1 style="color:#F00">LOG IN!</h1>
<form name="login" method="post" action="scripts/login_parse.php">
<table style="margin-left:-5px; text-align:right; color:#F00;">
<tr>
<td>Email:</td>
<td><input name="email" type="text" size="17" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input name="pword" type="text" size="17" /></td>
</tr>
</table>
<div class="log_in_img">
<input type="image" src="http://www.stat-me.com/images/log_in_jq.png" alt="LOG IN" />
</div>
</form>
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>
</div>
<span class="toggle" style="margin-left:40%; margin-bottom:30%;">
<div id="news_feed_img">
<a href="#" style="cursor:pointer;">
<img src="http://www.stat-me.com/images/bar_news_feed.png" alt="News Feed" width="98" />
</a>
</div>
</span>
<div class="hiddenDiv" style="border-top:#F00 3px solid; border-left:#F00 3px solid; border-right:#F00 3px solid; border-bottom:#F00 3px solid; background-color:#484848; width:92.2%;">
<table width="90%">
<tr>
<td>
<marquee scrolldelay="157"><font color="#FF0000"><b>June 21 - 12:00 AM - PM Messaging Re-Enabled! ...June 17 - 12:00 AM - New LOOK !!!! ...April 21 - 12:00 AM - FRIENDS FUNCTIONALITY WORKING ! ...April 21 - 12:00 AM - PM MESSAGING NOW AVALIBLE ! </b></font></marquee>
</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分:1)
&LT;跨度&GT;标签是内联元素。要申请保证金,您还需要display: block;
答案 1 :(得分:1)
事实是,具有517px边距的元素实际上是一个跨度。这意味着它是内嵌元素。如果您为span
标记替换div
标记,则边距有效,向下推动底部或在css中为范围提供display:block
属性,这意味着它现在会受到边距的影响。内联意味着如果它本身没有结构属性,它只会位于它的父容器中。
不确定这是否是你想要的,万一你想要它。但试一试。
答案 2 :(得分:0)
在跨度上尝试display:block;
。