Почему моя область содержимого не перемещается, даже когда я оформляю ее в CSS? - PullRequest
Новая
       22

Почему моя область содержимого не перемещается, даже когда я оформляю ее в CSS?

0 голосов
/ 05 марта 2012

Я создаю личный блог, который люди могут загружать и редактировать, но область контента всегда находится на одном и том же месте - под панелью инструментов - даже когда я установил левое значение на 195 пикселей.Извините, если это немного загромождено и трудно читать, но вот мой код: 

<html>
<head>
<title>[Your Name]'s Blog</title>
<style type="text/css">
div.selector
{
  position: fixed;
  top: 0;
  left: 0;
  width: 189px;
  height: 100%;
  background: #0000FF;
}
</style>
<style type="text/css">
div.scroll
{
top:10;
left:195;
border:double;
border-color:#000000;
background-color:#FFFFFF;
width:500px;
height:900px;
overflow-y:scroll;
overflow-x:hidden;
}
</style>
<style type="text/css">
div.flow 
{
  display:inline;
}
</style>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
</head>
<body>
<div class="selector">
<div>
<div>
<button onclick ="javascript:ShowHide('Me')" href="javascript:;" >Show/Hide Image</button>

<div class="mid" id="Me" style="DISPLAY: none" >
<img src="[Your Image Link]" alt="[Your Name]"/><br/>
</div>
</div>
<div>
<form method="get" action="http://www.youtube.com/results?search_query=" target="new">
<input type="text"   name="q" size="25"
maxlength="255" value="Search youtube" onfocus="this.value==this.defaultValue?this.value='':null"/>
<input type="submit" value="Search Youtube" />
</form>
</div>
<form method="get" action="http://www.google.com/search">
<div>
<input type="text"   name="q" size="25"
 maxlength="255" value="Google Search" onfocus="this.value==this.defaultValue?this.value='':null"/>
<input type="submit" value="Google Search" />
</div>
</form>
</div>
</div>



<div class="scroll">
<h1><center>[Your Name]'s Blog</center></h1>
<p>Note: Paragraphs are in between &lt;p&gt; and &lt;/p&gt;. Subheadings are in between &lt;h2&gt; and &lt;/h2&gt;.</p>
</div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 05 марта 2012

Я вижу две проблемы. Во-первых, если в зависимости от вашего типа документа, не считая отряда, номера будут игнорироваться: 

top:10;
left:195;

должно быть: 

top:10px;
left:195px;

Кроме того, top и left применяются только к элементу с position абсолютным, фиксированным или относительным. Я не вижу признаков того, что этот элемент является одним из них.

0 голосов
/ 05 марта 2012

Верхнее и левое объявления ничего не сделают, потому что они работают только тогда, когда элемент позиционируется не как «статический» - «относительный» или «абсолютный».

Вы хотите либо добавить 

margin-left: 195px;

Или 

position: relative;

Кроме того, вам не нужно заключать каждое объявление в отдельный тег <style>.

...