CSS не применяется - PullRequest
Новая
       0

CSS не применяется

2 голосов
/ 23 июня 2010

Хорошо, на моей домашней странице http://www.stat-me.com у меня есть ссылка, которая при нажатии активирует некоторые jquery.

У меня есть css на нем, говоря margin-bottom:517px;, но это не влияет на него

Этоэто ссылка с текстом XXXXXXXXXXXX, и если вы перейдете на реальную страницу, то увидите, что она прилипает к левому нижнему углу под прозрачной панелью внизу.

Извините, но я новый пользователь и не могуопубликуйте код, потому что он содержит гиперссылки, но вы можете перейти по ссылке выше и щелкнуть «Просмотреть исходный код», и вы увидите его.

В основном, если вы нажмете на ленту новостей, появится сообщение, что я хочу, чтобы это произошлоскрипт входа в систему после нажатия на ссылку 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%">&nbsp;</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>      
      &copy; 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 !&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...April 21 - 12:00 AM -  PM MESSAGING NOW AVALIBLE !&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></font></marquee>
    </td>
  </tr>
</table>

</div>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 23 июня 2010

Дело в том, что элемент с полем в 517 пикселей фактически является промежутком.Это означает, что это встроенный элемент.Если вы замените теги span для тегов div, то поле сработает, переместив нижнюю часть вниз или присвоив свойству span свойство display:block в css, что означает, что теперь оно будет зависеть от поля.Встроенный означает, что если он не имеет структурных свойств сам по себе, он просто будет находиться внутри своего родительского контейнера.

Не уверен, что это то, что вы хотели, на тот случай, если вы этого хотите.Но попробуй.

1 голос
/ 23 июня 2010
Теги

являются встроенными элементами. Чтобы наложить маржу, вам также необходимо display: block;

0 голосов
/ 23 июня 2010

Попробуйте display:block; на промежутке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...