0

だから私はウェブページのフッターを作ろうとしています。ここに私が持っているものがあります: そのまま

私が欲しいのは（私はそれを実証するために最善を尽くしました）： することが

（画像が長すぎるので画像が小さすぎるようです。よろしければブラウザで拡大してください。）

次に、HTML 構造を次に示します。

<div id="footer">
    <table id="info">
        <tr>
            <td colspan="3">You're here: 
            <div id="where"></div></td>
        </tr>

        <tr>
            <th>
<div id="additional-links">
<ul class="nobullet">
            <li><a href="">Intro</a></li>
                <li><a href="">Hiring</a></li>
                <li><a href="">Collab</a></li>
                <li><a href="">Credits</a></li>
                
                <div id="shared">
                    <span style="color: #fff;">|</span>
                    <a href=""><img src="fl.jpg" alt="facebook"></a>
                    <a href=""><img src="tl.jpg" alt="twitter"></a>
                    <a href=""><img src="tml.png" alt="tumblr"></a>
                    <span style="color: #fff;">|</span>
                </div>
            </ul>
</div>
</th>
        </tr>
        
        <tr>
            <td colspan="3">&copy;2013
            </td>
        </tr>
    </table>
</div>

次に、対応する CSS:

div {
    padding: 0;
    margin: 0;
    text-align: center;
}

#footer {
    width: 100%;
    height: 15%;
    background-color: #dcd9ca;
}

#info {
    text-align: center;
    width: 100%;
    min-height: 100%;
}

.nobullet li {
    display: inline;
}

.nobullet li a {
    text-decoration: none;
    color: brown;
}

#shared {
    float: right;
    position: relative;
}

#shared img{
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

私の質問は次のとおりです。どうすれば変更を加えることができますか?

私は自分自身を明確にしたことを願っています。

4

2 に答える 2

1

テーブル構造を使用しないでくださいという@vishalkinのコメントに同意します。そうしたとしても、HTML が無効になる問題があります。#shared div を ul の親にすることはできません。これを li でラップする必要があります。

これがjsfiddle.netの私のソリューションです。

HTMLは次のとおりです。

<div id="footer">
    <p>You're here:</p>
    <div id="footerLinks">
        <ul id="links">
            <li><a href="">Intro</a></li>
            <li><a href="">Hiring</a></li>
            <li><a href="">Collab</a></li>
            <li><a href="">Credits</a></li>
        </ul>
        <ul id="shared">
            <li>| <a href=""><img src="" alt="facebook"/></a></li>
            <li><a href=""><img src="" alt="twitter"/></a></li>
            <li><a href=""><img src="" alt="tumblr"/></a> |</li>
        </ul>
    </div>
    <p>&copy;2013</p>
</div>

CSSは次のとおりです。

body { background: #060; width: 1024px; }

div { padding: 0; margin: 0; text-align: center; }

#footer { width: 100%; text-align: center; background-color: #dcd9ca; position: relative; }

#footer ul,
#footer li { margin: 0px; padding: 0px; }

#footerLinks { position: relative; }

#links { list-style: none; display: inline; width: auto; }

#links li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ }

#links li > a { display: block; width: 150px; text-decoration: none; color: brown; text-align: center; font-weight: bold; }

#shared { position: absolute; top: 0px; right: 75px; /* your margin from the right */ list-style: none; color: #fff;}

#shared li { display: inline-block; *display: inline; *zoom: 1; /* IE7 fix */ }

#shared img { border: 0px; width: 24px; height: 24px; vertical-align: middle; }

私はあなたのためにいくつかの余分なものを投げました：

  • ソーシャル メディアの画像に枠線 0 を付けます。一部のブラウザでは、画像がリンク内にある場合、巨大な青い境界線が表示されます
  • テキスト領域だけを占有するのではなく、フッター リンクをよりアクセスしやすくするために、フッター リンクをブロックしました。
  • 私の jsfiddle では、ソーシャル メディア リンクの右側のパディングを示すためだけに、ボディに幅と色を付けました。
于 2013-10-10T18:42:16.003 に答える
0

両方の問題を解決するには、共有 div を絶対配置にすることができます。

<div id="additional-links">
    <div id="shared">
        <span style="color: #fff;">|</span>
        <a href=""><img src="fl.jpg" alt="facebook"></a>
        <a href=""><img src="tl.jpg" alt="twitter"></a>
        <a href=""><img src="tml.png" alt="tumblr"></a>
        <span style="color: #fff;">|</span>
    </div>
    <ul class="nobullet">
        <li><a href="">Intro</a></li>
        <li><a href="">Hiring</a></li>
        <li><a href="">Collab</a></li>
        <li><a href="">Credits</a></li>
    </ul>
</div>

以下の 150px 設定を変更することで、共有リンクの右端からの距離を調整できます。

#additional-links {
    position: relative;
}

#shared {
    position: absolute;
    right: 150px;
}

それが役立つことを願っています。

于 2013-10-10T18:22:29.190 に答える