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

Question

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

这是我要实现的概念:

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

Answer 1

试试这个

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

(我用我创建的随机图像替换了您的 Logo 图像) 使导航栏看起来好像是一种颜色..只需确保 s 和 the 的边框为零且中间没有间距..就可以了

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;
}

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

更新 只需要让 Logo 出现在顶部..(通过 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;

}