Question

[目前在：http://www.jsfiddle.net/tqtFg Michael Durrant] 我是css的新手，我正在尝试创建一个带有徽标和导航面板的网站。如果您最初访问该网站，则该面板显示在“topcontent”之外，实际上位于右下方，但如果您单击该徽标转到同一页面，该面板将显示在我希望的位置！< / p>

我的网站：http://acews.x10.mx

似乎第一次打开时没有初始化的东西，但我不知道是什么。这是我的HTML代码;

<div id="topcontent">
    <div id="top">
        <a href="index.html">
            <img src="logo.png">
        </a>
        <div id="navbar">
            <ul id="menubar">
                <li class="menuButton"><a href="index.html" class="home">Home</a></li>
                <li class="menuButton"><a href="about.html" >About ACE</a></li>
                <li class="menuButton"><a href="login.html" >Customer Login</a></li>
            </ul>
        </div>
    </div>

这是我的css代码;

    body {

}

/*Content page divider*/
#topcontent {
    /* margin: 50px auto; */
    height: 170px;
    margin-left:auto;
    margin-right:auto;
    background-image:url('backgroundcolor.png');
}

#top {
    height: 170px;
    width:  900px;
    margin-left:auto;
    margin-right:auto;
}

/* MenuBar */
#navbar {
margin-top:60px;
float:right;
}

ul#menubar {
/* margin:20px; */
list-style:none;
margin-left:auto;
margin-right:auto;
padding: 5px 10px 0 10px;

}

ul#menubar li {
display:inline;
font-family: calibri;
font-weight: bold;
margin-left:10px;
}

ul#menubar li a {
text-decoration:none;
text-align:center;
padding:5px 10px;
/* width:100px; */
color:#FFFFFF;
float:left;
font-size:26px;
}

.menuButton a:hover{
background-color:#618E00;
text-decoration: none;
    -webkit-border-radius: 5px;
}

Answer 1

为带徽标的链接添加ID：

    <a href="index.html" id="logo">
        <img src="logo.png">
    </a>

和CSS

#logo {float:left;}

与徽标的链接就像一行一样，如果你添加浮动就应该没问题。

CSS ID，类和布局

1 个答案: