html - 位于导航和标题顶部的徽标

Question

我对正在处理的（响应式）网站的标题/导航有一个概念，但不幸的是，我无法弄清楚如何以一种可以在响应式布局中工作的方式在 HTML/CSS 中实现我想要的。

这是我要实现的概念：

本质上，徽标需要位于导航左右两半的中间，并与标题 div 重叠。

Answer 1

尝试这个

http://jsfiddle.net/abbood/9yhHE/

（我用我创建的随机图像替换了您的徽标图像）以使导航栏看起来好像是一种颜色..只需确保 s 和 s 之间的边框为零并且没有间距..你很高兴去

html

<div id="imgContainer" />
<table>
    <tr>
        <th>left header text</th>
        <th>right header text</th>      
    </tr>
    <tr>
        <td>
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>
        </td>
        <td class="right">
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>   
        </td>
    </tr>
</table>

css

#header {
    height: 3em;
    min-width: 40em;
}


table {
    width: 100%;
    min-width: 40em;
}

ul {
    list-style:none;
}

ul li {
    display: inline-block;
}

table tr th:first-child {
    text-align: left;
    padding-right:1em;
}

table tr th:nth-child(2) {
    text-align: right;
    padding-left:1em;
}

table ul {
    padding-left: 0;
    padding-right:0;
}



table tr:nth-child(2) td:nth-child(1) {
    text-align: right;
    padding-right: 3em;
}
td.right {
    text-align: left;
    padding-left: 3em;
}


#imgContainer {
    width: 100%;
    min-width: 40em;
    background-image: url(http://s8.postimage.org/49ywsfsqp/logo.png);
    background-position: center;
background-repeat: no-repeat;
}

注意：我制作了基本结构..我将导航栏项目之间的样式和间距留给了您（这很容易）..但是应该遵循基本结构

更新 只需让徽标出现在顶部..（通过 z-index + abs 定位做到这一点）

这是更新的http://jsfiddle.net/abbood/9yhHE/2/

html

<div id="imgContainer">
    <img  src="http://s8.postimage.org/49ywsfsqp/logo.png" />
</div>
<table>
    <tr>
        <th>left header text</th>
        <th>right header text</th>      
    </tr>
    <tr>
        <td>
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>
        </td>
        <td class="right">
            <ul>
                <li>nav item</li>
                <li>nav item</li>
                <li>nav item</li>
            </ul>   
        </td>
    </tr>



</table>

css

#header {
    height: 3em;
    min-width: 40em;
}


table {
    width: 100%;
    min-width: 40em;
    background-color: yellow;
}

ul {
    list-style:none;
}

ul li {
    display: inline-block;
}

table tr th:first-child {
    text-align: left;
    padding-right:1em;
}

table tr th:nth-child(2) {
    text-align: right;
    padding-left:1em;
}

table ul {
    padding-left: 0;
    padding-right:0;
}



table tr:nth-child(2) td:nth-child(1) {
    text-align: right;
    padding-right: 3em;
}
td.right {
    text-align: left;
    padding-left: 3em;
}

#imgContainer {
        min-width: 40em;
        position: absolute;
        width: 100%;

}

#imgContainer > img{
    width: 50px;
    height: 50px ;
    z-index: 1; 
    display: block;
    margin: 0 auto;

}

Answer 2

在我的脑海中，我可以想到三种方法来做到这一点：

1. 使用不同尺寸的不同图像并将它们放置在以不同分辨率显示/隐藏的不同层中
2. 拥有一个元素（, 等）并将徽标作为该元素的背景图像，您可以在不同分辨率的背景之间切换
3. 拥有一个包含所有徽标大小的精灵图像，并使用 css background-position 或通过使用边距和溢出属性来更改它的位置。

您也可以参考现有网站。可以在这里找到一个很好的响应式站点库：http: //mediaqueri.es