Databases
StackOverflow2013
Postsdbo
POGiving a fixed header a colour background
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGiving a fixed header a colour background
    text
    copied!<p>I would like to give my fixed header a coloured background. I have tried a few different ways, and I think there may be a simple answer but I just can't seem to find out what it is:</p> <p>How do I do this? </p> <p>HTML: </p> <pre><code>&lt;body&gt; &lt;div class="gridContainer clearfix"&gt; &lt;div id="LayoutDiv1"&gt;&lt;h1&gt;Hello&lt;/h1&gt;&lt;/div&gt; &lt;div id="LayoutDiv2"&gt;&lt;/div&gt; &lt;div id="LayoutDiv3"&gt;&lt;/div&gt; &lt;div id="LayoutDiv4"&gt;&lt;/div&gt; &lt;div id="LayoutDiv9"&gt;Goodbye&lt;/div&gt; &lt;div id="LayoutDiv10"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>CSS: </p> <pre><code>@charset "utf-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 5; dw-num-cols-tablet: 8; dw-num-cols-desktop: 10; dw-gutter-percentage: 25; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 87.36%; padding-left: 1.82%; padding-right: 1.82%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv3 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv4 { clear: none; float: left; margin-left: 4.1666%; width: 100%; display: block; } #LayoutDiv5 { clear: none; float: left; margin-left: 4.1666%; width: 100%; display: block; } #LayoutDiv6 { clear: none; float: left; margin-left: 4.1666%; width: 100%; display: block; } #LayoutDiv7 { clear: none; float: left; margin-left: 4.1666%; width: 100%; display: block; } #LayoutDiv8 { clear: none; float: left; margin-left: 4.1666%; width: 100%; display: block; } #LayoutDiv9 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv10 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv3 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv4 { clear: none; float: left; margin-left: 2.5641%; width: 100%; display: block; } #LayoutDiv5 { clear: none; float: left; margin-left: 2.5641%; width: 100%; display: block; } #LayoutDiv6 { clear: none; float: left; margin-left: 2.5641%; width: 100%; display: block; } #LayoutDiv7 { clear: none; float: left; margin-left: 2.5641%; width: 100%; display: block; } #LayoutDiv8 { clear: none; float: left; margin-left: 2.5641%; width: 100%; display: block; } #LayoutDiv9 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv10 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.2%; max-width: 1232px; padding-left: 0.9%; padding-right: 0.9%; margin: auto; } #LayoutDiv1 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv2 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv3 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv4 { clear: both; float: left; margin-left: 0; width: 18.3673%; display: block; } #LayoutDiv5 { clear: none; float: left; margin-left: 2.0408%; width: 18.3673%; display: block; } #LayoutDiv6 { clear: none; float: left; margin-left: 2.0408%; width: 18.3673%; display: block; } #LayoutDiv7 { clear: none; float: left; margin-left: 2.0408%; width: 18.3673%; display: block; } #LayoutDiv8 { clear: none; float: left; margin-left: 2.0408%; width: 18.3673%; display: block; } #LayoutDiv9 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } #LayoutDiv10 { clear: both; float: left; margin-left: 0; width: 100%; display: block; } } @charset "utf-8"; /* CSS Document */ #LayoutDiv1 { position: fixed; height: 50px; top: 0; width: 100%; z-index: 10000; background:#FFF; } #LayoutDiv2 { position: fixed; height: 50px; top: 50px; width: 100%; z-index: 10002; background:#FFF; } #LayoutDiv3 { margin-top: 135px; } #LayoutDiv9 { position: fixed; height: 60px; width: 100%; z-index:10006; background:#FFF; max-height: 100px; bottom: 60px; } #LayoutDiv10 { position: fixed; height: 60px; width: 100%; z-index:10008; background:#FFF; bottom:0px; max-height: 60px; } </code></pre>
 

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