Question

我在按照我想要的方式布置页面时遇到了一些麻烦。我的页面上有两个div之间的差距，以及我无法弄清楚如何居中的css菜单。任何帮助将不胜感激......

仅供参考，template_header.php是此时唯一包含任何内容的模板。

这是代码......

* index.php *

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body >
        <?php include './templates/template_header.php'; ?>
        <div id="pageBody">
            <?php 
                include './templates/template_contextmenu.php';
                include './templates/template_content.php'; 
                include './templates/template_sidebar.php';
            ?>
        </div>
        <div id="pageFooter">
            <?php include './templates/template_footer.php'; ?>
        </div>
    </body>
</html>

* template_header.php *

<div class="banner" >
    <img class="bannerImage" src="./graphics/FullLogo2.png" height="216" />
</div>
<div id="menu">
    <ul>
        <li></li>
        <li><a href="index.php">Home</a></li>
        <li><a href="products.php">Products</a></li>
        <li><a href="info.php">Information</a></li>
        <li><a href="contact.php">Contact</a></li>
        <li><a href="about.php">About</a></li>
    </ul>
</div>

* style.css *

header, footer, aside, nav, article, section  {
    display: block;}

body {
    margin: 0px;
    padding: 0px;}

div.banner {
    background-image:url("./graphics/BannerBG_220.png") ;
    background-repeat:repeat-x;
    height:13.5em;
    border:solid;
    border-width:thin;
    margin: 0;
    padding: 0;}

.bannerImage {
    display: block;
    margin-left: auto;
    margin-right: auto;}

#menu{
    position:relative;
    display:block;
    margin-left:auto;
    margin-right:auto;
    height:2.25em;
    font-size:1.25em;
    font-weight: 500;
    background:transparent url(./graphics/navbackground2.png) repeat-x ;
    font-family:Arial,Verdana,Helvitica,sans-serif;}

#menu ul {
    padding:0;
    list-style-type:none;
    width:auto;}

#menu ul li {
    display:block;}

#menu ul li a {
    display:block;
    float:left;
    color:#e5e5e5;
    text-shadow: 2px 2px 2px #3d3d3d;
    text-decoration:none;
    padding: .4em 1.5em .2em 1.5em;
    height: 2.25em;
    background:transparent url(./graphics/MenuDivider.png) no-repeat top right;}

#menu ul li a:hover, #menu ul li a.current {
    background: url(./graphics/NavBackgroundOn.png) repeat-x;}

Answer 1

您将无法使用margin来居中#menu：0自动没有宽度。您可以使用javascript测量链接的宽度，然后将所有链接宽度的总和设置为#menu的宽度。你会看到一个短暂的延迟，但它会起作用。

至于白色间隙，使用Firebug进行检查会显示不需要的边距或填充物的来源。

Answer 2

摆脱php标签周围的空白。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body >
    <?php include './templates/template_header.php'; ?>
    <div id="pageBody"><?php 
            include './templates/template_contextmenu.php';
            include './templates/template_content.php'; 
            include './templates/template_sidebar.php';
        ?></div>
    <div id="pageFooter"><?php include './templates/template_footer.php'; ?></div>
</body>
</html>

要使其居中，请在css中尝试：

  #pageFooter { margin-left:auto; margin-right:auto; }

几页页面布局问题

2 个答案: