文章/答案/技术大牛

发布

问三要素的放置
EN

Stack Overflow用户

提问于 2013-10-09 10:18:53

回答 1查看 149关注 0票数 0

我有这个css样式和html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="css/style.css" rel="stylesheet" type="text/css">
        <body>
            <header class="header">
                <div id="header-wrapper">
                    <div id="box-left">
                        <div id="top-menu-left"></div>
                        <nav class="menu-left">
                            <ul id="main-nav">
                                <li><a href="http://webdesignerwall.com">Home</a>
                                </li>
                                <li><a href="http://themify.me">Themify</a>
                                </li>
                                <li><a href="http://icondock.com">IconDock</a> 
                                </li>
                                <li><a href="http://ndesign-studio.com">N.Design</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="logo"></div>
                    <div id="box-right">
                        <div id="top-menu-right"></div>
                        <nav class="menu-right">
                            <ul id="main-nav">
                                <li><a href="http://webdesignerwall.com">Home</a>
                                </li>
                                <li><a href="http://themify.me">Themify</a>
                                </li>
                                <li><a href="http://icondock.com">IconDock</a> 
                                </li>
                                <li><a href="http://ndesign-studio.com">N.Design</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <div id="content-wrapper">
                <div id="content" class="clearfix">
                        <h2 align="center">Sielsko Anielsko</h2>
W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu! Richard McClintock, wykładowca łaciny na uniwersytecie Hampden-Sydney w Virginii, przyjrzał się uważniej jednemu z najbardziej niejasnych słów w Lorem Ipsum – consectetur – i po wielu poszukiwaniach odnalazł niezaprzeczalne źródło: Lorem Ipsum pochodzi z fragmentów (1.10.32 i 1.10.33) „de Finibus Bonorum et Malorum”, czyli „O granicy dobra i zła”, napisanej właśnie w 45 p.n.e. przez Cycerona. Jest to bardzo popularna w czasach renesansu rozprawa na temat etyki. Pierwszy wiersz Lorem Ipsum, „Lorem ipsum dolor sit amet...” pochodzi właśnie z sekcji 1.10.32.</div>
            </div>
        </body>
</html>

* {
    padding: 0;
    margin: 0;
}

.header {
    height: 200px;
    width: 100%;
    background-color: #261501;
}

.clearfix {
    clear: both;
}

#header-wrapper {
    height: 200px;
    width: 100%;
}

#box-left {
    height: 100%;
    width: 42%;
    float: left;
}

#top-menu-left {
    height: 155px;
    width: 450px;
}

#box-right {
    height: 100%;
    width: 42%;
    float: left;
}

#top-menu-right {
    height: 155px;
    width: 450px;
}

.logo {
    height: 250px;
/*  width: 300px;*/
    width: 16%;
    float: left;
    background:#ffffff url('../images/logo.png') no-repeat center center;
    -webkit-border-radius: 0px 0px 10px 10px;
    border-radius: 0px 0px 10px 10px;
    -webkit-box-shadow:  0px 1px 8px 0px rgba(0, 0, 0, 0.4);
    box-shadow:  0px 1px 8px 0px rgba(0, 0, 0, 0.4);
}

#site-logo {
}

/* navigation */

.menu-left {
    height: 45px;
    width: 100%;
    background: #fff;
    z-index: -1;
}

.menu-right {
    height: 45px;
    width: 100%;
    background: #fff;
    z-index: -1;
}

#main-nav ul {
margin: 0px;
padding: 0px;
}

#main-nav li {
list-style-type: none;
display: inline;
margin: 0 5px 0 5px;
}

#main-nav li a {
color: #000;
text-decoration: none;
}

#main-nav li a.active, #main-nav a:hover {
text-decoration: underline;
color: #D9CD60;
}

问题是，正确的菜单略有重叠的中心元素的标志，任何变化的页边距或z-索引并没有产生预期的效果，或使一个错误的地方，我找不到原因。

小提琴手：jsfidle

我在贴出问题后找到了一个解决办法，但我不确定它是否正确。现在，另一个小问题的菜单位置，我需要左和右菜单放置更近的标志。琴键看上去不错，但在本地复制菜单上可以下注。

//最后编辑

页脚在包装和内容方面的定位--当我将页脚设置为停留在底部时--它被内容隐藏了，我想将脚注设置为粘贴在页面底部

编辑

修正了内容的放置，但是页脚现在在上面。

#content {
    padding-top: 380px;
}

#tresc {
    text-align: center;
    padding: 10px;
    width: 1180px;
    background: #fff;
    -webkit-box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 auto;
}

修正了页脚问题

//编辑

有人知道如何制作适合移动设备的菜单吗？

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-10-09 11:06:36

如果要管理菜单和徽标之间的空间，请执行以下操作：

从所有三个元素中删除float:left。
将display: inline-block添加到所有三个元素中。
确保父元素(#header-wrapper)具有text-align: center

然后，通过更改margin属性.logo，您可以将其与菜单分开。

然而，display: inline-block有一个小问题。它将创造小差距之间的标志和菜单，在您的情况下，将导致正确的菜单进入新的线。要修复它，请确保这三个元素的开始标记和结束标记之间没有空格，如下所示：

(...)
</div><div class="logo">

而不是这个

(...)
    </div><!-- here is a newline and a tab which both are white-spaces -->
    <div class="logo">

编辑

根据你上一次关于页脚的更新

您将.wrapper高度设置为100%，这意味着它占用了窗口的所有高度。然后.bg div的高度设置为500px。因此，如果浏览器窗口小于500px加上页眉的200px，那么页脚就会被包装器吃掉。我无法确切解释为什么会发生这种情况，但是要解决这个问题，您所要做的就是将页脚放入包装器中。

这是固定的小提琴：http://jsfiddle.net/s3snc/8/。

此外，为了避免进一步的问题，您应该将头放在包装器中。如果包装器意味着是height: 100% (与body, html { height: 100% }组合)，那么必须是身体的直接和唯一的子节点。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19269270

复制

相似问题

问三要素的放置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三要素的放置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三要素的放置
EN