Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS & HTML Square Background
    primarykey
    data
    text
    <p>Can anyone guide me, How can I create a 'almost' square background in CSS? </p> <p>I want to get the brown background and have text on it with the error bullets and how to create the dotted yellow on the top right in CSS?</p> <p>My working progress is here: </p> <p>HTML:</p> <pre><code>&lt;body&gt; &lt;div id="contentContainer"&gt; &lt;div id="setBackground"&gt; &lt;div id="header"&gt; &lt;span class="style1"&gt;This is LOGO &lt;/span&gt; &lt;hr /&gt; &lt;div id="body_block"&gt; &lt;p class="intro"&gt;Introduction&lt;/p&gt; &lt;h1&gt; Back &lt;/h1&gt; Click Here &lt;h2&gt; Next &lt;/h2&gt; Click Here &lt;p&gt;More about Web Design:&lt;/p&gt; &lt;p&gt;• Bla bla bla... .&lt;/p&gt; &lt;p&gt;Contact:&lt;/p&gt; &lt;p&gt;• Bla bla bla...&lt;/p&gt; &lt;div id="footer"&gt; &lt;!--hr class="footer"/--&gt; &lt;p&gt;&amp;copy; Copyright 2013 &lt;a href=""&gt;sample.com &lt;/a&gt;| &lt;a href=""&gt;More Site &lt;/a&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>CSS:</p> <pre><code>@charset"UTF-8"; /* CSS Document */ hr { clear:both; border: 0; height:12px; width:100%; background-color: #993300; } .intro { color: #1e2a74; font-size:16px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; } #footer { background-color:#6994AF; clear: both; color: #FFFFFF; font-size: 0.8em; margin: 0; padding: 0; font-family:Arial, Helvetica, sans-serif; } #footer p { border-top: 1px solid #83CDE1; margin: 0; padding: 15px 0; text-align: left; } #footer a { text-align:right; } .style1 { font-size: 24px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; background-color: #FFFFFF; } </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.
 

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