如何停止我的列表与我的 header 图片重叠?
How do i stop my list overlapping my header image?
我有一个正在建设的网站,我正在使用 Skeleton CSS,一切都响应迅速并且运行良好。
我在正确的位置有一个菜单栏(列表),但是当我调整大小时,它似乎与我的 header 图片重叠,有人知道我该如何阻止它吗?
此处示例:http://www.cosworth-europe.co.uk/test/indextest.html
请缩小浏览器大小。
HTML:
<div id="top"><center><img src="images/header.png" style="max-width:100%;"></center></div>
<header id="header" class="site-header" role="banner">
<div id="header-inner" class="container sixteen columns over">
<hgroup class="one-third column alpha">
</hgroup>
<nav id="main-nav" class="two thirds column omega">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="news.html">News</a>
</li>
<li>
<a href="dealers.html">Dealers</a>
</li>
<li>
<a href="products.html">Products</a>
</li>
<li>
<a href="http://www.cosworth-europe.co.uk/shop">Buy Online</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
CSS:
#top {background-image: url(../images/header-gradient.gif);
background-repeat: repeat-x;
max-width:100%;
height:110px;}
#header {margin-top: -5px; margin-bottom: 30px;}
h1 a { text-indent: -9999px; }
#site-title { padding-top: 10px;}
#main-nav {
position:absolute;
right:120px;
bottom:0px;
}
#main-nav ul, #main-nav li {display: inline; padding: 7px;}
#main-nav a {text-decoration:none; color: black;}
这是因为你的导航是绝对定位的。根据您希望它发生什么,我可能会在正确的位置添加一些媒体查询。
我可能会将 header 图像向左移动一点,然后将导航栏向右移动 - 不过,这只会在一定尺寸之前有效,之后您将需要不同的导航栏布局.
您应该使用媒体查询来根据不同的尺寸来处理元素的定位方式。您正在使用 position: absolute 用于固定导航栏的#main-nav,无论屏幕大小如何。
示例:
CSS:
#main-nav {
position: absolute;
right: 120px; /* Default */
}
@media only screen and (max-width: 700px) {
body {
#main-nav {
position: absolute;
right: 50px; /* Will apply when the screens width is smaller than 700px */
}
}
}
我有一个正在建设的网站,我正在使用 Skeleton CSS,一切都响应迅速并且运行良好。
我在正确的位置有一个菜单栏(列表),但是当我调整大小时,它似乎与我的 header 图片重叠,有人知道我该如何阻止它吗?
此处示例:http://www.cosworth-europe.co.uk/test/indextest.html
请缩小浏览器大小。
HTML:
<div id="top"><center><img src="images/header.png" style="max-width:100%;"></center></div>
<header id="header" class="site-header" role="banner">
<div id="header-inner" class="container sixteen columns over">
<hgroup class="one-third column alpha">
</hgroup>
<nav id="main-nav" class="two thirds column omega">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about-us.html">About Us</a>
</li>
<li>
<a href="news.html">News</a>
</li>
<li>
<a href="dealers.html">Dealers</a>
</li>
<li>
<a href="products.html">Products</a>
</li>
<li>
<a href="http://www.cosworth-europe.co.uk/shop">Buy Online</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
CSS:
#top {background-image: url(../images/header-gradient.gif);
background-repeat: repeat-x;
max-width:100%;
height:110px;}
#header {margin-top: -5px; margin-bottom: 30px;}
h1 a { text-indent: -9999px; }
#site-title { padding-top: 10px;}
#main-nav {
position:absolute;
right:120px;
bottom:0px;
}
#main-nav ul, #main-nav li {display: inline; padding: 7px;}
#main-nav a {text-decoration:none; color: black;}
这是因为你的导航是绝对定位的。根据您希望它发生什么,我可能会在正确的位置添加一些媒体查询。
我可能会将 header 图像向左移动一点,然后将导航栏向右移动 - 不过,这只会在一定尺寸之前有效,之后您将需要不同的导航栏布局.
您应该使用媒体查询来根据不同的尺寸来处理元素的定位方式。您正在使用 position: absolute 用于固定导航栏的#main-nav,无论屏幕大小如何。
示例:
CSS:
#main-nav {
position: absolute;
right: 120px; /* Default */
}
@media only screen and (max-width: 700px) {
body {
#main-nav {
position: absolute;
right: 50px; /* Will apply when the screens width is smaller than 700px */
}
}
}