Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>NOTES</strong></p> <ul> <li><code>#global_wrapper {}</code> has <code>max-width:;</code>, because your image is 1000px wide</li> <li>As you can see, I like to use .setwidth {} method for such layouts. However, in this case, I added <code>min-width:;</code> to <code>#global_wrapper</code> as well.</li> <li>Its a tricky layout and there are better ways of handling this. But that would bean re-cutting it.</li> <li>I also made some examples, where you ca use <code>margin-top:;</code> etc methods, to position something. In generally, you can do it only, when the outer containers dimensions are static. Meaning <code>#global_wrapper {margin-left: 50px;}</code> to set something to center -- is very very wrong (since body is dimensions are not static, but dynamic.)</li> <li>I added <code>&lt;h1&gt;</code> tag to <code>.contentbox_top</code>, so you can put the current pages title on top of the content</li> <li>Technically, the contentbox assembly is made pretty flexible, so you can use it more then once on your page.</li> <li>Since I redid your full code. I also added the menu_current and :hover feature. You can fully edit them from css.</li> <li>Added a <code>#logo</code>, as an example on where you can use <code>margin-top:;</code></li> <li>You will run into problems with <code>#footer {position: absolute; bottom: 0px;}</code> so I gave you an alternative method with <code>#global_wrapper {height: 96px;}</code></li> <li>The contentbox areas shadow cannot be hide, because you cut the hole thing wrong. And yes with more better boxing it could be achieved, you will still have top and bottom shadows.. That will look weird. So currently the layout works 100% with the shadows visible always. NOTE: All today's resolutions are bigger then 700px on with anyways ;)</li> <li>I hope you understand, that I recreated your full code from ground up.....</li> </ul> <p><strong>Live demo: <a href="http://kopli.pri.ee/stackoverflow/6993792.php" rel="nofollow">http://kopli.pri.ee/stackoverflow/6993792.php</a></strong></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&gt; &lt;head&gt; &lt;title&gt;Vertical centered website with shadow - Kalle H. Väravas answer&lt;/title&gt; &lt;base href="http://www.uniground.net/test/" /&gt; &lt;style&gt; html, body {margin: 0px; padding: 0px; height: 100%;} html, body, div, th, td, span, a {font-family: Arial, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;} body {background: #C7C7C7 url('head_bg.png') top repeat-x;} h1, h2, h3, h4 {margin: 0px; padding: 0px;} .setwidth, .setwidth_2 {margin: 0px auto; color: inherit; line-height: inherit; font-size: inherit; font-weight: inherit;} .setwidth {width: 700px;} .setwidth_2 {width: 656px;} .tal {text-align: left;} .tac {text-align: center;} .tar {text-align: right;} #global_wrapper {background: url('main_background.jpg') center top no-repeat; height: 96%; margin: 0px auto; max-width: 1000px; min-width: 702px;} #top_level {background: url('head_bg.png') top repeat-x; height: 179px;} #logo {font-size: 30px; margin-top: 20px; display: inline-block; padding: 3px; background: #000000; color: #FFFFFF;} #main_menu {margin-top: 20px;} #main_menu ul {list-style-type: none; margin: 0px; padding: 0px;} #main_menu ul li {margin: 0px; padding: 0px; display: inline-block; background: #000000; margin-right: 10px;} #main_menu ul li a {padding: 5px; display: inline-block; text-decoration: none; color: #FFFFFF; text-transform: uppercase;} #main_menu ul li:hover {background: #FF93FF;} #main_menu ul li:hover a {color: #FFFFFF;} #main_menu ul li.menu_current {background: #FF00FF;} #main_menu ul li.menu_current a {color: #FFFFFF;} #content_area {} .contentbox_top, .contentbox_center_wrapper, .contentbox_bottom {margin: 0px auto; width: 700px;} .contentbox_top {background: url('content_top.jpg') center no-repeat; height: 52px;} .contentbox_top h1 {font-size: 18px; font-weight: bold; display: inline-block; float: right; margin-right: 50px; margin-top: 25px;} .contentbox_center_wrapper {background: url('content_shadow.png') center repeat-y;} .contentbox_center {background: #FFFFFF; width: 636px; margin: 0px auto; padding: 10px;} .contentbox_bottom {background: url('content_bottom.png') center no-repeat; height: 44px;} #footer {background: #333333; color: #C0C0C0; padding: 10px 0px; font-weight: bold; font-size: 14px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="global_wrapper"&gt; &lt;div id="top_level"&gt; &lt;div class="setwidth_2"&gt; &lt;div id="logo"&gt;Das Ist Meine Logo Hier&lt;/div&gt; &lt;div id="main_menu"&gt; &lt;ul&gt;&lt;li class="menu_current"&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=""&gt;Production&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="content_area"&gt; &lt;div class="setwidth"&gt; &lt;div class="contentbox_top"&gt;&lt;h1&gt;Home&lt;/h1&gt;&lt;/div&gt; &lt;div class="contentbox_center_wrapper"&gt; &lt;div class="contentbox_center"&gt; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. &lt;/div&gt; &lt;/div&gt; &lt;div class="contentbox_bottom"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;div class="setwidth_2 tar"&gt; &amp;copy; 2001 &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </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