Note that there are some explanatory texts on larger screens.

plurals
  1. POTop of round rectangle not working
    text
    copied!<p>I'm trying to make an infinite round rectangle, but I cant seem to get the top to comply... heres what it looks like... <a href="http://animactions.ca/Animactions/accueil.php" rel="nofollow noreferrer">http://animactions.ca/Animactions/accueil.php</a></p> <p>You will notice the bottom of the round rect is fine, but Iv been trying for hours to figure out the top. Thanks</p> <p>sorry, the site upload had failed, now it is up</p> <p>picture of problem <a href="http://img511.imageshack.us/img511/6272/probleml.png" rel="nofollow noreferrer">http://img511.imageshack.us/img511/6272/probleml.png</a></p> <p>Html</p> <pre><code>&lt;div id="page_content"&gt; &lt;div id="top"&gt;&amp;nbsp;&lt;/div&gt; &lt;div id="middle"&gt; &lt;h1&gt;Site under construction&lt;/h1&gt; &lt;p&gt;Hello, this Web Site is not done yet, sorry.... &lt;/p&gt; &lt;/div&gt; &lt;div id="bottom"&gt;&amp;nbsp;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code>#top { background-position: center bottom; background: url('Images/RoundRect/top.png') no-repeat center bottom; height : 12px; padding : 0; margin: 10px auto 0 auto; width: 910px; } #middle { background-position: left top; padding: 0; margin: 0 auto 0 auto; width: 910px; height: 5em; background-repeat: repeat-y; background-image: url('Images/RoundRect/middle.png'); } #bottom { background-position: center top; background: url('Images/RoundRect/bottom.png') no-repeat center top; height : 12px; padding : 0; margin: 0 auto 10px auto; width: 910px; } </code></pre>
 

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