Question

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

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

<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 {
    float: left; /* floats logo to left */
}

div#header-nav {
    float:right; /* had to remove width of 100% so nav can accept float */
    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('http://kieransenior.co.uk/images/tab_left.png') no-repeat left top;
}

div#header-nav a {
    display:block;
    background: url('http://kieransenior.co.uk/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;
}

如果您希望它显示为第二个示例，您可能需要手动居中徽标和导航，因为我不确定是否可以在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;
}

滑动门中心

2 个答案: