Geek Answers Handbook

Vertical centered website with shadow.

Yesterday I asked about a website with a shadow, but now I have made a better example and want to ask again.

I need:

  • Vertical centered website;
  • Shadow on a block of content with a variable height;
  • A horizontal scrollbar should only appear when the browser window is smaller than the content block (and not the shadow block);
  • Everything should remain in accordance with the background of the body.

Now it looks great, except for moving <div>when you make the browser window smaller. This is probably due to different widths <div>.

Can this be fixed?

http://www.uniground.net/test/

http://jsfiddle.net/NaSwF/17/

+2
source share
2 answers

css- #content :

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

( div div) .

conent div () ( ); , , div div, .

+1

  • #global_wrapper {} max-width:;, 1000 .
  • , .setwidth {} . min-width:; #global_wrapper.
  • , . bean .
  • , margin-top:; .., -. , , . #global_wrapper {margin-left: 50px;}, - - ( , ). ​​
  • <h1> .contentbox_top,
  • , .
  • . menu_current : hover. css.
  • #logo, , margin-top:;
  • #footer {position: absolute; bottom: 0px;}, #global_wrapper {height: 96px;}
  • , . , . . , 100% . . , 700 ;)
  • , , ...

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

<!DOCTYPE html PUBLIC "-//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>
    <base href="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: #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;}
    </style>
</head>
<body>
    <div id="global_wrapper">
        <div id="top_level">
            <div class="setwidth_2">
                <div id="logo">Das Ist Meine Logo Hier</div>
                <div id="main_menu">
                    <ul><li class="menu_current"><a href="">Home</a></li><li><a href="">Production</a></li><li><a href="">Contact</a></li><li><a href="">About</a></li></ul>
                </div>
            </div>
        </div>
        <div id="content_area">
            <div class="setwidth">
                <div class="contentbox_top"><h1>Home</h1></div>
                <div class="contentbox_center_wrapper">
                    <div class="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>
                <div class="contentbox_bottom"></div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="setwidth_2 tar">
            &copy; 2001
        </div>
    </div>
</body>
</html>
+1

More articles:


All Articles