Перемещение таблицы на фоне CSS

Я попытался позиционировать # box1 под # table1 Я пытаюсь переместить его, но он не перемещается. Что я делаю не так. Я новичок в css.Перемещение таблицы на фоне CSS

Edit: я положил в моем HTML

<!DOCTYPE html> 
     <html lang="en"> 
     <head> 
    <title>Assignment 1</title> 
    <meta charset="utf-8"> 
    <style> 

    html{ 
     background: #afc2df; 
     } 
    #box1{ 

     position fixed; 
     border: 120px; 
     border-style: groove; 
     border-radius:35px; 
     width: 505px; 
     length: 75px; 
     margin-left: 85px; 
     z-index: 5; 

     } 
     this is the table I want to move 

    #table1{ 

     position fixed; 
     background: #00FFFF; 
     margin-left: 118px; 
     top: 160px; 
     z-index: 6; 
      } 

    </style> 
    </head> 


    <body> 

    <b></b><h1><b><i><font face="impact" color="red">Name</font> </i></b></h1> 

    <b></b><h2><b><i><font face="impact" color="red">Number</font> </i></b></h2> 

    <table border="3" id="table1"> 
      <tbody><tr> 
       <th colspan="2">WEB PAGE ELEMENTS</th> 


      </tr> 
      <tr> 
       <th>Html</th> 
       <td><font face="Candara" color="black">Marks beginning and ending of a web page (closing tags needed)</font></td> 

      </tr> 
      <tr> 
       <th>Head</th> 
       <td><font face="Candara" color="black">Used to enclose elements not apart of the main page (closing tags needed)</font></td> 

      </tr> 
      <tr> 
       <th>Title</th> 
       <td><font face="Candara" color="black">Included in the &lt;head&gt; section, appears in the title bar of the browser (closing tags needed)</font></td> 

      </tr> 
      <tr> 
       <th>Body</th> 
       <td><font face="Candara" color="black">Includes content that is visible in the browser (closing tag needed)</font></td> 

      </tr> 
      <tr> 
       <th>Meta</th> 
       <td><font face="Candara" color="black">Allows passage of information about the page to user agents(self-closing tag)</font></td> 

      </tr> 
     </tbody></table> 





    <div id="box1"></div> 






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

это CSS вместе с моим HTML поблагодарить вас за вашу помощь я действительно хочу, чтобы получить хорошее в этом и помощь ценится

источник

2013-09-24 Tyler Pierog

У вас есть HTML-код для этого? :) –

Не могли бы вы поделиться своим html? – lefoy

@lefoy Я добавил свой html –

Я внес некоторые изменения для очистки кода. Предупреждение: вам не нужно это делать, не давайте прямо присваивать этому задание вашему инструктору как есть, если они не знают ничего, кроме визуального вывода (и если они покинут колледж немедленно и станут самоучкой !). Не полагайтесь в основном на уровень CSS 2 position, если они не научили вас уровню CSS 1 float, тогда вы будете иметь потенциально постоянную неспособность грамотно кодировать CSS.

Если вы хотите узнать, как использовать CSS правильно начать с основ ...

http://www.jabcreations.com/web/css/nested-divisible-elements

Это, как говорится, это делает то, что вы хотите, свитки содержимое страницы, в то время как гигантский каймой элемент разделения не делает.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Assignment 1</title> 
<style type="text/css"> 
/*<![CDATA[*/ 
body 
{ 
background: #afc2df; 
overflow: hidden; 
} 
#body 
{ 
bottom: 0px; 
left: 0px; 
position: absolute; 
overflow: auto; 
right: 0px; 
top: 0px; 
} 
#body > * 
{ 
margin: 10px; 
} 
#box1 
{ 
border: 250px; 
border-style: groove; 
border-radius:35px; 
margin-left: 85px; 
position fixed; 
top: 20px; 
width: 70%; 
z-index: 5; 
} 
/*this is the table I want to move */ 

table 
{ 
height: 900px; 
background: #0ff; 
margin-left: 118px; 
} 
.candara 
{ 
font-color: #000; 
font-family: Candara; 
} 
/*]]>*/ 
</style> 
</head> 

<body> 

<div id="body"> 
<h1 style="font-weight: bold; font-family: impact;">Name</h1> 

<h2 style="font-weight: bold; font-family: impact;">Number</h2> 

<table summary="This summary text is read by screen readers, always provide a summary attribute on table elements."> 
<thead><tr><th colspan="2">WEB PAGE ELEMENTS</th></tr></thead> 
<tfoot><tr><th colspan="2">WEB PAGE ELEMENTS</th></tr></tfoot> 
<tbody> 
<tr><th>Html</th><td class="candara">Marks beginning and ending of a web page (closing tags needed)</td></tr> 
<tr><th>Head</th><td class="candara">Used to enclose elements not apart of the main page (closing tags needed)</td></tr> 
<tr><th>Title</th><td class="candara">Included in the &lt;head&gt; section, appears in the title bar of the browser (closing tags needed)</td></tr> 
<tr><th>Body</th><td class="candara">Includes content that is visible in the browser (closing tag needed)</td></tr> 
<tr><th>Meta</th><td class="candara">Allows passage of information about the page to user agents(self-closing tag)</td></tr> 
</tbody> 
</table> 

</div> 

<div id="box1"></div> 

</body> 
</html>

источник

2013-09-24 22:59:21 John

Перемещение таблицы на фоне CSS

ответ

Смежные вопросы