没有重叠

Question

我想设计一个带有徽标的网站，如下所示。

有一个包含标题的div标记，但正如您所看到的，标识高度超过了标题的高度。我提到的虚线显示了网站的主要部分。但是，标题颜色跨越并覆盖屏幕的宽度。

我使用过＆＃34; position：relative＆＃34;对于徽标，但标题中的导航将无法正确定位。

如果你能帮我解决这个问题，我将非常感激。

以下是代码：

HTML：

<body>
<div id="header-container">
    <header>
        <nav>nav</nav>
    </header>
    <div id="header-logo"> logo in header </div>
</div>


    <div class="divider"></div>
    <aside id="left">leftside</aside>
    <aside id="right">rightside</aside>
    <footer>footer</footer>


</body>

CSS：

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(../images/mainpage-background.jpg);
}

#header-container {
    background-color: #E1E1E1;
    height: 115px;
}

header {
    width: 756px;
    border: thin solid #000000;
    margin-right: auto;
    margin-left: auto;
}

#header-logo {
    position: relative;
    width: 128px;
    height: 188px;
    border: thin solid #E93538;
    background-color: #C92C2F;
    float: left;
}

enter image description here

Answer 1

由于您明确说明了图像的高度和宽度，因此需要确保图像的内容与高度匹配。

更改标题容器高度以匹配或匹配您的徽标：

#header-container {
    background-color: #E1E1E1;
    height: 115px;
}

#header-logo {
    position: relative;
    width: 128px;
    height: 115px; /* To match the container */
    border: thin solid #E93538;
    background-color: #C92C2F;
    float: left;
}

#header-logo img{
   width: 100%; /*since you have only added dimensions to your container not the image itself, just to be sure.*/
}

修改假设你有一张图片。

Answer 2

你想要的是一个导航包装器：

没有重叠

我重新设计了CSS，因为我发现从头开始更容易：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
header{
    background-color: #3f3f3f;
    height: 80px;
}

.logo{
    background: red;
    width: 185px;
    float: left;
    height: 90px;

}
.header-wrap{
    width: 70%;
    margin: 0 15%;
    height:100%;
}

nav{
    height: 100%;
    float: left;
}

.wrapper{
    margin-top: 20px;
    width:80%;
    margin-left: 10%;
    margin-right: 10%;
}

HTML：

 <header>

    <div class="header-wrap">
    <div class="logo">Logo</div>
    <nav>
        nav
    </nav>
 </div>
 </header>

<div class="wrapper">
    <h1>Some test header</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

如果你想在实现它之前看到它，请看这个JSFiddle： http://jsfiddle.net/ywq1a3uj/

与网站重叠

如果你想要它以便徽标略微重叠内容，你需要使用绝对位置然后在内容中添加一个边距，这是标题的高度，请参见此处：

http://jsfiddle.net/p1n6aouz/

header{
    background-color: #3f3f3f;
    height: 80px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.featured{
    width:100%;
    margin-top: 80px;
}


<div class="featured">
        <img src="http://lorempixel.com/output/technics-q-c-1920-480-9.jpg">
    </div>

Answer 3

我会使用这个http://www.w3schools.com/cssref/pr_pos_z-index.asp。如果您的导航位于顶层，则可能会看到滑过欢迎横幅。

将header-banner中的这些属性更改为按比例缩小，应该自动调整大小。

width: (WW)px;
height: (HH)px;

超高的图像的div标签

3 个答案:

没有重叠

与网站重叠