推拉门定心

Question

我很快就创建了一个sliding doors example，但我正在将它合并到我的标题中。页眉的格式应该是一个固定高度的页眉，左边有一个标志，右边有滑动门导航按钮。标题的背景应该跨越浏览器的整个宽度，但是实际的标题（即右侧的标题徽标和导航）应该是大约 900 像素的固定宽度并居中。

关于如何实现这一目标的任何想法？我尝试了以下方法：

<div id="header-outer">
    <div id="header-container">
        <a id="logo" href="<?php echo get_option('home'); ?>/"></a>

        <div id="header-nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

以及以下 CSS：

div#header-nav {
    float:left;
    width:100%;
    background:rgb(33,33,33);
    font-size:90%;
    line-height:normal;
    margin-top:90px;
}

div#header-nav ul {
    margin:0;
    padding:0;
    list-style:none;    
}

div#header-nav ul li {
    float:left;
    margin:0 2px 0 2px;
    padding:0 0 0 4px;
    background: url('images/tab_left.png') no-repeat left top;
}

div#header-nav a {
    display:block;
    background: url('images/tab_right.png') no-repeat right top;
    padding:5px 10px 4px 6px;
    text-decoration:none;
    color:#333;
}

div#header-outer {
    background: rgb(33,33,33);
    height:100px;
    display:block;
    clear:both;
}

div#header-container {
    text-align:center;
    margin:0 auto;
    width:900px;
    padding:0;
}

Answer 1

只是想了解您的问题。

你想让它这样显示吗...

---------|--------------------------------------------------|---------
         |                                                  |
         |  Logo                                Navigation  |
         |                                                  |
---------|--------------------------------------------------|---------

或者像这样……

---------|--------------------------------------------------|---------
         |                                                  |
         |                 Logo  Navigation                 |
         |                                                  |
---------|--------------------------------------------------|---------

如果您在第一个示例之后，那么使用以下 css 应该很容易...

＃标识 { 向左飘浮; /* 将 logo 向左浮动 */ } div#header-nav { 浮动：对； /* 必须删除 100% 的宽度，以便导航可以接受浮动 */ 背景：RGB（33,33,33）； 字体大小：90%； 行高：正常； 边距顶部：90px； } div#header-nav ul { 边距：0； 填充：0； 列表样式：无； } div#header-nav ul li { 向左飘浮; 边距：0 2px 0 2px； 填充：0 0 0 4px； 背景： url('http://kieransenior.co.uk/images/tab_left.png') no-repeat left top; } div#header-nav { 显示：块； 背景： url('http://kieransenior.co.uk/images/tab_right.png') no-repeat right top; 填充：5px 10px 4px 6px； 文字装饰：无； 颜色：#333; } div#header-outer { 背景：RGB（33,33,33）； 高度：100px； 显示：块； 明确：两者； } div#header-container { 文本对齐：居中； 边距：0 自动； 宽度：900 像素； 填充：0； }

如果您希望它像第二个示例一样显示，您可能必须手动将徽标和导航居中，因为我不确定是否可以在 CSS 跨浏览器中这样做。但我可能错了，请随时纠正我。

希望对你有帮助。

Answer 2

对不起，我最后回答了我自己的问题。我不确定它有多正确。这是我想出的：

    <div id="header-container">
        <div id="header">
            <div id="header-logo"><a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('stylesheet_directory') ?>/images/logo.png" /></a></div>
            <ul>
                <li id="active"><a href="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>

还有以下 CSS：

div#header {
    float:right;
    width:100%;
    font-size:85%;
    line-height:normal;
    background: rgb(33,33,34) url('images/top_bg.png') repeat-x;
}

div#header-logo {
    margin:0 auto;
    width:900px;
}

div#header-logo a {
    float:left; 
}

img {
    border:0;
    float:left;
}

div#header ul {
    margin:0 auto;
    width:900px;
    padding:60px 0 0 0;
    float:right;
    list-style:none;    
}

div#header ul li {
    float:left;
    margin:0 2px 0 2px;
    padding:0 0 0 4px;

}

div#header ul li a {
    display:block;
    font-weight:bold;
    padding:5px 10px 7px 6px;
    text-decoration:none;
    color:#ddd;
    margin:0;
}

div#header ul li#active {

    background: url('images/tab_left.png') no-repeat left top;
}

div#header ul li#active a {
    color:#333;
    background: url('images/tab_right.png') no-repeat right top;
}

div#header ul li a:hover {
    color:#fff; 
    background: url('images/nav_back.png') no-repeat center bottom;
}

div#header-container {
    background: rgb(33,33,33);
    margin:0;
    padding:0;
    width:100%;
    height:40px;
}