垂直居中的网站与阴影

时间：2011-08-09 09:08:20

标签： html css

我昨天问了一个有阴影的网站，但现在我做了一个更好的例子，想再问一次。

我需要：

  • 垂直居中的网站;
  • 内容块上的阴影可变高度;
  • 只有当浏览器窗口小于内容块（不是阴影块）时，才会出现水平滚动条;
  • 一切都必须与身体背景保持一致。

现在看起来很好，除了移动<div>时，当你缩小浏览器窗口时。这可能是由不同的<div>宽度引起的。

可以修复吗？

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

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

2 个答案:

答案 0 :(得分：1)

尝试将#content的css标记替换为：

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

现在，白色部分（内容div及其顶部和底部div）不会移位。

你可能会发现conent div border和text（padding）之间的距离太小（即零像素）;为了解决这个问题，我建议不要使用padding属性，而是将文本放在内容div中的另一个div中，而是使用一定的余量。

答案 1 :(得分：1)

备注

  • #global_wrapper {}有max-width:;，因为您的图片是1000px宽
  • 如您所见，我喜欢使用.setwidth {}方法进行此类布局。但是，在这种情况下，我还将min-width:;添加到#global_wrapper。
  • 这是一个棘手的布局，有更好的方法来处理这个问题。但那会重新削减它。
  • 我还做了一些例子，你可以使用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％，阴影始终可见。注意：无论如何，今天的所有分辨率都要大于700px;）
  • 我希望你明白，我从头开始重新创建你的完整代码......

现场演示：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>
相关问题
最新问题