Databases
StackOverflow2013
Postsdbo
POCSS import or multiple CSS files
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS import or multiple CSS files
    text
    copied!<p>I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. </p> <p>I have created a test page: </p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;The Recipe Site&lt;/title&gt; &lt;link rel='stylesheet' href='/css/main.css'&gt; &lt;link rel='stylesheet' href='/css/site_header.css'&gt; &lt;!-- Let google host jQuery for us, maybeb replace with their api --&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/js/main.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="site_container"&gt; &lt;div id="site_header"&gt;&lt;?php include_once($r-&gt;base_dir . "inc/site_header.inc.php"); ?&gt;&lt;!-- Include File, Update on ajax request. --&gt;&lt;/div&gt; &lt;div id="site_content"&gt; Some main content. &lt;/div&gt; &lt;div id="site_footer"&gt;&lt;?php include_once($r-&gt;base_dir . "inc/site_footer.inc.php"); ?&gt;&lt;!-- Include File, Update on ajax request. --&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>File: /css/main.css</strong></p> <pre><code>/* Reset Default Padding &amp; Margin */ * { margin: 0; padding: 0; border: 0; } /* Set Our Float Classes */ .clear { clear: both; } .right { float: right; } .left { float: left; } /* Setup the main body/site container */ body { background: url(/images/wallpaper.png) repeat; color: #000000; text-align: center; font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; } #site_container { background-color: #FFFFFF; height: 100%; margin-left: auto; margin-right: auto; text-align: left; width: 100%; } /* Some style sheet includes */ /* @import "/css/site_header.css"; */ /* Default Font Sizes */ h1 { font-size: 2.2em; } h2 { font-size: 2.0em; } h3 { font-size: 1.8em; } h4 { font-size: 1.6em; } h5 { font-size: 1.4em; } p { font-size: 1.2em; } /* Default Form Layout */ input.text { padding: 3px; border: 1px solid #999999; } /* Default Table Reset */ table { border-spacing: 0; border-collapse: collapse; } td{ text-align: left; font-weight: normal; } /* Cause not all browsers know what HTML5 is... */ header { display:block;} footer { display:block;} </code></pre> <p><strong>and now the file: /css/site_header.css:</strong></p> <pre><code>#site_header { background-color: #c0c0c0; height: 100px; position: absolute; top: 100px; width: 100%; } </code></pre> <p>Problem:</p> <p>When I use the above code, the site_header div does not have any formatting/background. When I remove the link line from the HTML doc for site_header.css and instead use an @import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div. </p> <p>Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine...</p> <p>So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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