我有这个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-index 的任何更改都没有产生预期的效果或在某处出错,我找不到原因。
jsfiddle:jsfiddle
我在发布我的问题后找到了解决方法,但我不确定它是否正确。现在菜单位置的另一个小问题我需要将左右菜单放在更靠近徽标的位置。jsfiddle 看起来不错,但在本地复制菜单上下来
//最后一次编辑
当我将页脚设置为底部时,页脚在包装器和内容方面的定位被内容隐藏,我想将页脚设置为粘在页面底部
编辑
修复了内容的位置,但页脚现在在上方
#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;
}
修复了页脚问题
//编辑
有人知道如何使这些菜单适合移动设备吗?