CSS not applying
Okay so on my homepage http://www.stat-me.com i have a link that when pressed activates some jquery.
I have css on it saying margin-bottom:517px; yet it does not affect it
It is the link with the text XXXXXXXXXXXX and if you go to the actual page you will see that it sticks to the bottom left corner under the transparent bar down there
Sorry but because i am a new user i cant post the code because it has hyperlinks in it but you can go to the link above and click view source and you will see it.
Basicly if you click news feed it appears that is what i want to happen to the login script once clicked on the XXXXXXXXX link
<?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>
开发者_C百科 <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>
<span> tags are inline elements. For a margin to be applied to it, you also need display: block;
The thing is that the element that has a margin of 517px is in fact a span. That means it's an inline element. If you replace the span tags for div tags then the margin works, pushing the bottom downwards or give the span a display:block property in the css, meaning it will now be affected by the margin. Inline means if doesn't have structural properties by itself, it will just sit inside it's parent container.
Not sure if that's what you wanted, in case you want it though. But give it a try.
Try display:block; on the span.
加载中,请稍侯......
精彩评论