Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've made some modifications to clean up your code. <strong>Forewarning:</strong> you will need to dumb this down, do not directly give this <em>assignment</em> to your instructor as-is unless they are clueless about anything but the visual output (and if they are leave that college immediately and become self-taught!). Do not rely heavily on the CSS level 2 <code>position</code> property, if they haven't taught you about the CSS level 1 <code>float</code> then you're going to suffer a potentially permanent inability to code CSS competently.</p> <p>If you want to learn how to use CSS correctly start with the basics...</p> <p><a href="http://www.jabcreations.com/web/css/nested-divisible-elements" rel="nofollow">http://www.jabcreations.com/web/css/nested-divisible-elements</a></p> <p>That being said, this does what you wanted, the page content scrolls while the gigantic bordered division element doesn't.</p> <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt; &lt;head&gt; &lt;title&gt;Assignment 1&lt;/title&gt; &lt;style type="text/css"&gt; /*&lt;![CDATA[*/ body { background: #afc2df; overflow: hidden; } #body { bottom: 0px; left: 0px; position: absolute; overflow: auto; right: 0px; top: 0px; } #body &gt; * { 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; } /*]]&gt;*/ &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="body"&gt; &lt;h1 style="font-weight: bold; font-family: impact;"&gt;Name&lt;/h1&gt; &lt;h2 style="font-weight: bold; font-family: impact;"&gt;Number&lt;/h2&gt; &lt;table summary="This summary text is read by screen readers, always provide a summary attribute on table elements."&gt; &lt;thead&gt;&lt;tr&gt;&lt;th colspan="2"&gt;WEB PAGE ELEMENTS&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt; &lt;tfoot&gt;&lt;tr&gt;&lt;th colspan="2"&gt;WEB PAGE ELEMENTS&lt;/th&gt;&lt;/tr&gt;&lt;/tfoot&gt; &lt;tbody&gt; &lt;tr&gt;&lt;th&gt;Html&lt;/th&gt;&lt;td class="candara"&gt;Marks beginning and ending of a web page (closing tags needed)&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;th&gt;Head&lt;/th&gt;&lt;td class="candara"&gt;Used to enclose elements not apart of the main page (closing tags needed)&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;th&gt;Title&lt;/th&gt;&lt;td class="candara"&gt;Included in the &amp;lt;head&amp;gt; section, appears in the title bar of the browser (closing tags needed)&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;th&gt;Body&lt;/th&gt;&lt;td class="candara"&gt;Includes content that is visible in the browser (closing tag needed)&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;th&gt;Meta&lt;/th&gt;&lt;td class="candara"&gt;Allows passage of information about the page to user agents(self-closing tag)&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="box1"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload