3

これは問題の私のサイトです：LINK

ご覧のとおり、Firefoxでは私のロゴが右側に押し出されていますが、中央に配置する必要があります。たとえば、Chromeでうまく機能します。

Firefoxのみのスタイルシートを探してみましたが、これを正しく機能させる適切なCSS設定を見つけることができませんでした。

これが私がこれまでに持っているid名前で包まれた関連するHTMLコードです：container

<div id="nav">
  <ul id="index_cards">
    <li id="card-1">
        <h3><strong>Home</strong></h3>
    </li>
    <li id="card-2">
        <h3><strong>About/Contact</strong></h3>
    </li>
    <li id="card-4">
        <h3><strong>Portfolio</strong></h3>
    </li>
    <li id="card-5">
        <h3><strong>Services</strong></h3>
    </li>
  </ul>
</div>


<div id="header">
  <div id="logo">
    <img src="imgs/logo.png" name="ielogo" width="457" height="223" id="ielogo" />
  </div>
</div>

CSS：

#container {
  top:-73px;
  margin-top:-70px;
  min-height:100%;
  position:relative;
  display:block;
}

#header {
  margin-top:-30px;
  height:250px;
  background-image:url(../imgs/header-top.png);
  background-repeat:repeat-x;
  padding:10px;
}

#logo {
  margin:0 auto;
  width:457px;
  height:223px;
}
4

2 に答える 2

3

問題は画像にあり、これをcssに入れます

#logo img { display: block; }

http://jsbin.com/afuquq/3/

于 2012-07-26T21:23:19.153 に答える
0

改訂された回答：logo解決策は、をnavigationセクションに組み込み、 Webページに#header配置することposition:absolute;です。

HTMLフラグメント：

<div id="header"></div>

     <div id="container">

       <div id="nav">

          <ul id="index_cards">
             <li id="card-1">
                 <h3><strong>Home</strong></h3>

             </li>
             <li id="card-2">
                 <h3><strong>About/Contact</strong></h3>

             </li>
             <li id="card-4">
                 <h3><strong>Portfolio</strong></h3>

             </li>
             <li id="card-5">
                 <h3><strong>Services</strong></h3>

             </li>
          </ul>

          <div id="logo"></div>

       </div>

     <!-- continued-->

     </div>

CSS：

/* This section is modified */
#header {
    background-image:url(http://tubebackgrounds.co.uk/portfolio/imgs/header-top.png);
    background-repeat:repeat-x;
    position: absolute;
    width: 100%;
    height: 250px;
    margin-top: 40px;
}

/* This section is modified. */
#logo {
    background-image:url(http://tubebackgrounds.co.uk/portfolio/imgs/logo.png);
    background-repeat:no-repeat;
    margin:0 auto;
    width:457px;
    height:250px;
}

これらのフォントがロードされていない場合の個別の問題を補うためにmargin-top: -20px;、CSSセレクターに適用される追加の追加機能もあります。それでも、フォント統合は正しく対処する必要があります。#body@font-face

注：@font-face以下のjsFiddleは、セキュリティ設定のためにフォントをレンダリングしません。

参照：jsFiddle

/show/編集ページを表示するには、アドレスバーを使用せずに上記のjsFiddleにアクセスします。

于 2012-07-26T21:47:46.730 に答える