Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Vertical Centered Website With Shadow

Post a Comment
I asked yesterday about a website with shadow, but now I made a better example and want to ask again. I need: Vertical centered website; Shadow on content block with variable heig

Solution 1:

try replacing the css-markup of #content with:

#content{
    width:656px;
    margin:0px22px;
    background:#fff;
}

Now, the white parts (the content div and its top and bottom divs) won't shift.

You might find the distance between the conent div border and the text (the padding) too small (i.e. zero pixels); To address that, I suggest not using the padding property, but placing the text in yet another div inside the content div, with a certain margin instead.

Solution 2:

NOTES

  • #global_wrapper {} has max-width:;, because your image is 1000px wide
  • As you can see, I like to use .setwidth {} method for such layouts. However, in this case, I added min-width:; to #global_wrapper as well.
  • Its a tricky layout and there are better ways of handling this. But that would bean re-cutting it.
  • I also made some examples, where you ca use margin-top:; etc methods, to position something. In generally, you can do it only, when the outer containers dimensions are static. Meaning #global_wrapper {margin-left: 50px;} to set something to center -- is very very wrong (since body is dimensions are not static, but dynamic.)
  • I added <h1> tag to .contentbox_top, so you can put the current pages title on top of the content
  • Technically, the contentbox assembly is made pretty flexible, so you can use it more then once on your page.
  • Since I redid your full code. I also added the menu_current and :hover feature. You can fully edit them from css.
  • Added a #logo, as an example on where you can use margin-top:;
  • You will run into problems with #footer {position: absolute; bottom: 0px;} so I gave you an alternative method with #global_wrapper {height: 96px;}
  • 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 ;)
  • I hope you understand, that I recreated your full code from ground up.....

Live demo: http://kopli.pri.ee/stackoverflow/6993792.php

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Vertical centered website with shadow - Kalle H. Väravas answer</title><basehref="http://www.uniground.net/test/" /><style>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: #C7C7C7url('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_menuul {list-style-type: none; margin: 0px; padding: 0px;}
                        #main_menuulli {margin: 0px; padding: 0px; display: inline-block; background: #000000; margin-right: 10px;}
                            #main_menuullia {padding: 5px; display: inline-block; text-decoration: none; color: #FFFFFF; text-transform: uppercase;}
                            #main_menuulli:hover {background: #FF93FF;}
                                #main_menuulli:hovera {color: #FFFFFF;}
                            #main_menuulli.menu_current {background: #FF00FF;}    
                                #main_menuulli.menu_currenta {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_toph1 {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: 10px0px; font-weight: bold; font-size: 14px;}
    </style></head><body><divid="global_wrapper"><divid="top_level"><divclass="setwidth_2"><divid="logo">Das Ist Meine Logo Hier</div><divid="main_menu"><ul><liclass="menu_current"><ahref="">Home</a></li><li><ahref="">Production</a></li><li><ahref="">Contact</a></li><li><ahref="">About</a></li></ul></div></div></div><divid="content_area"><divclass="setwidth"><divclass="contentbox_top"><h1>Home</h1></div><divclass="contentbox_center_wrapper"><divclass="contentbox_center">
                        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. 
                    </div></div><divclass="contentbox_bottom"></div></div></div></div><divid="footer"><divclass="setwidth_2 tar">&copy; 2001
        </div></div></body></html>

You may like these posts

Post a Comment for "Vertical Centered Website With Shadow"