0

我是 CSS 新手，但到目前为止我很喜欢它。但是，我的代码遇到了障碍。我快到了，但需要一些适当的指导。

我提供了我的网站，我试图将我的徽标放在导航的左侧。我希望网站内容居中，宽度为 960 像素，距离顶部 0 像素（相对于浏览器顶部）。我正在使用display: inline带有li选择器的 CSS 来尝试实现我的目标。

我也试图让内联导航与徽标相匹配。我还尝试使用a:hover导航上的 CSS 选择器来模仿徽标的顶部 4px 边框。我希望它margin-top: 0px在浏览器中。

这是我几乎正确的徽标/导航布局的链接：

http://multimediaxchange.com/vls/index.php?page=home

这是我的 CSS 代码：

.topbar {
    width:960px;
    height:87px;
    text-align:center;
}

.topbar-inner {
    width:960px;
    margin:0 auto 0 auto;
    text-align:center;
}

.logo {
    margin-top:0px;
    display:inline;
}

img {
    float:left;
    border: 0;
    padding: 0;
    margin: 0;
}

.menu {
    display:inline;
    margin-top:0px;
}

.menu > ul > li {
    display:inline-block;
    position:relative;
    border-top:4px solid #FFF;
    margin-right:0px;
    padding-top:40px;
    min-width:80px;
}

.menu > li {
    display:inline-block;
    list-style:none;
    margin-top:50px;
}

.menu li a {
    color: #000;
    display: block;
    text-decoration:none;
}

.menu li:hover {
    border-top-color: #039;
}

.menu li:hover a {
    color:#039;
}

body { 
    font-family:Arial, Helvetica, sans-serif; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px;
}

.content { 
    height:500px; 
    padding:0px 20px 20px 20px; 
    text-align:left; 
    font-size:12px; 
}

.footer { 
    border-top:1px solid #DFDFDF; 
    width:960px; 
    margin: 0 auto; 
    font-size:11px; 
    text-align:center; 
}

这是 HTML 代码：

<?php
// Load Setup document:
include('_config/setup.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title><?php echo $page_title; ?></title>
    <link rel="stylesheet" type="text/css" href="_css/styles.css">
</head>
<body>
    <div class="topbar">
        <div class="topbar-inner">
            <div class="logo"><img src="/vls/_images/mylogo.png" height="87" width="287"/></div>
            <!-- logo -->
            <div class="menu"><?php include('_template/nav_main.php'); ?></div>
            <!-- menu -->
        </div>
        <!-- topbar-inner -->
    </div>
    <!-- topbar -->
    <div class="bdy_hdr"><?php get_page_name($dbc, $pg); ?></div>                    
    <div class="content"><?php get_page_body($dbc, $pg); ?></div>
    <div class="footer"><?php include('_template/footer.php'); ?></div>
</body>
</html>

谢谢！

4

3 回答 3

3

一切正常，但您需要添加此属性 margin:0 auto; 不是 topbar-inner 类，而是 topbar 类，就像这样。所以改变现在

.topbar {
    width:960px;
    height:87px;
text-align:center;
}

至

.topbar {
    width:960px;
    height:87px;
text-align:center;
margin:0 auto;
}

在此处输入图像描述

于 2013-10-17T02:11:54.237 回答
0

将您的容器放入divs容器中是一个很好的做法，如下所示：

<div id="container">
    <div class="topbar">
        <div class="topbar-inner">
            <div class="logo">
                <img src="/vls/_images/mylogo.png" height="87" width="287"/>
            </div>
            <div class="menu">
                <?php include('_template/nav_main.php'); ?>
            </div>
        </div>
    </div>
    <div class="bdy_hdr">
        <?php get_page_name($dbc, $pg); ?>
    </div>                    
    <div class="content">
        <?php get_page_body($dbc, $pg); ?>
    </div>
    <div class="footer">
        <?php include('_template/footer.php'); ?>
    </div>
 </div>

然后在您的 CSS 中执行此操作：

.topbar{
margin:0 auto;
}

我建议你给一个widthto .bdy_hdr，.content然后.footer对它们做同样的事情，即：

.bdy_hdr,
.content,
.footer{
width:960px;
margin:0 auto;
}
于 2013-10-17T02:25:30.503 回答
0

秘密就在.topbar课堂上。删除text-align:center, 而是添加margin:0 auto. 应该是这样的：

.topbar {
    width:960px;
    height:87px;
    margin:0 auto;
}

text-align:center防止<ul>图像浮动后在剩余空间中居中，因此顶部边框看起来是无缝的。

将margin:0 auto整个 kaboodle 居中。

添加这一行：

.menu ul {
    margin:0;
}

它将位于浏览器的顶部。我对很多额外垃圾的评论仍然适用：)

编辑

这是您的页面，带有我正在谈论的“极简主义”标记和样式。初学者可能不知道一两个小技巧，但您应该很容易理解几乎所有内容。

基本上，只需切掉所有多余的 div，您就可以更快地解决问题，更轻松地定位元素，拥有更轻的页面（以字节为单位），并且通常为您的解决方案添加一些优雅。

这次重建完成了原来所做的一切，只占了一半的空间。

HTML：

<body>
    <div class="topbar">
        <img src="logo.png" height="87" width="287"/>
        <ul class='menu'>
            <!-- Not great practice to stagger </li> like this,
                 but a good way to avoid rogue padding. -->
            <li><a href="index.php?page=home">Home</a>
            </li><li><a href="index.php?page=staffing">Staffing</a>
            </li><li><a href="index.php?page=jobs">Jobs</a>
            </li><li><a href="index.php?page=training">Training</a>
            </li><li><a href="index.php?page=gsa">GSA</a>
            </li><li><a href="index.php?page=why_us">Why Us</a>
            </li><li><a href="index.php?page=clients">Clients</a>
            </li><li><a href="index.php?page=contact">Contact</a></li>
        </ul>
    </div>
    ...the rest of your page...
</body>

CSS：

body {
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
}

.topbar {
    width:960px;
    height:87px;
    margin:0 auto;
}

.topbar img {
    float:left;
    border: 0;
}

ul.menu {
    margin:0 0 0 287px;
    padding:0;
}

ul.menu li {
    display:inline-block;
    position:relative;
    border-top:4px solid #FFF;
    list-style:none;
    padding-top:40px;
    min-width:80px;
}

ul.menu li a {
    color: #000;
    display: block;
    text-decoration:none;
}

ul.menu li:hover {
    border-top-color: #039;
}

ul.menu li:hover a {
    color:#039;
}
于 2013-10-17T02:17:54.277 回答