幾頁的頁面佈局問題

我遇到了一些麻煩讓我的頁面按我想要的方式佈置。我的頁面上顯示出兩個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;}

來源

2012-02-13 Rich.Carpenter

你應該只是把所有的代碼變成了http://jsfiddle.net – 2012-02-13 17:23:13

很好讀你的菜單問題：HTTP ：//matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support – Yoshi 2012-02-13 17:27:57

您將無法居中#menu使用保證金：0汽車沒有的寬度。您可以使用javascript來測量鏈接的寬度，然後將所有鏈接寬度的總和設置爲#menu的寬度。你會看到一個短暫的延遲，但它會工作。

至於白色的差距，用Firebug檢查會告訴你不需要的邊距或填充來自何處。

來源

2012-02-13 17:26:01

這是不正確的，菜單不能沒有寬度居中。（ref：http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support） – Yoshi 2012-02-13 17:29:01

@Yoshi：感謝您糾正我併發布該鏈接。我已經提高了您的評論更新了我的答案，以便它有希望是正確的。 – 2012-02-13 17:36:49

感謝負載，你們兩個。這些信息正是我所需要的。 – 2012-02-13 18:32:15

擺脫你的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; }

來源

2012-02-13 17:26:04 seanbreeden

您可以在template_header.php包含後實際註釋掉所有內容，因爲這是唯一包含此處實際添加內容的內容。其他包含文件是空的。目前一切正在template_header.php中發生。 – 2012-02-13 17:44:35

幾頁的頁面佈局問題

回答

相關問題