ページレイアウトの問題のいくつかの問題

私のページを私が望むようにレイアウトするのにはいくつか問題があります。私のページ上の2つの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;}

出典

2012-02-13 Rich.Carpenter

あなたは自分のメニューの問題のためにhttp://jsfiddle.net –

素敵な読み取りにそのコードのすべてを投げる必要があります：HTTP CSSでこれを試してみてください、それを中央に

<!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>

：//matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support – Yoshi

あなたは余裕を使用して#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

@ Yoshi：私を修正し、そのリンクを投稿してくれてありがとう。私はあなたのコメントupvoted私の答えはうまくいけば正しいように更新しました。 –

ありがとうございました。この情報はまさに私が必要としていたものです。 –

あなたのPHPタグの周りの空白を取り除く。

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

出典

2012-02-13 17:26:04 seanbreeden

実際にこの時点で何も追加していないのは、template_header.phpインクルードの後のすべてをコメントアウトできます。他のインクルードファイルは空です。 template_header.phpですべてが現れています。 –

ページレイアウトの問題のいくつかの問題

答えて

関連する問題