文章/答案/技术大牛

发布

社区首页 >问答首页 >几个页面布局问题

问几个页面布局问题
EN

Stack Overflow用户

提问于 2012-02-13 17:21:02

回答 2查看 103关注 0票数 0

我很难按照我想要的方式把我的页面整理好。我的页面上出现了两个div之间的空白，还有一个css菜单，我想不出如何居中。任何帮助都将不胜感激..。

FYI，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;}

php

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-02-13 17:26:01

如果没有宽度，您将无法使用边距:0 auto对#菜单进行居中。您可以使用javascript度量链接的宽度，然后将所有链接宽度之和设置为#菜单的宽度。你会看到一个短暂的延迟，但它会起作用的。

至于空白，使用Firebug的检查将显示不想要的边距或填充来自何处。

票数 1

Stack Overflow用户

发布于 2012-02-13 17:26:04

去掉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; }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9264909

复制

相似问题

问几个页面布局问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问几个页面布局问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问几个页面布局问题
EN