1

私が抱えているこの（おそらく簡単な）問題を誰かが助けてくれるかどうか疑問に思っていました。私がやろうとしているのは、ロゴをサイトの左側に配置することですが、上の 1 つにソーシャル メディア リンクを含む 2 つの div と、もう 1 つの div にある Web サイト メニュー (右側に配置) の上に配置することです。ここで達成しようとしているものの画像を提供しました: http://i59.tinypic.com/155j7tt.jpg (青い画像はロゴの形状であり、div の上にどのように表示するかを示しています)

まったく役立つ場合に備えて、getskeleton フレームワークを使用しています。

現在、上位 2 つの div のコードは次のとおりです。

    <div class="bars social">
      <div class="container">
        <div class="sixteen columns right">
            <img src="_img/social/facebook.png" alt="Facebook"> <img src="_img/social/twitter.png" alt="Twitter"> <img src="_img/social/youtube.png" alt="Youtube">
        </div>
      </div>
    </div>

    <div class="container">
      <div class="sixteen columns right">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </div>
    </div>

今私の質問は、ロゴがこれらの2つのdivの上に浮かぶようにコードをどこに/どのように配置するかです(また、写真に見られるように、それらの少し下にぶら下がっています)。

私が行うことはすべて、どちらか一方の上に配置しますが、両方には配置しません。

アップデート：

フルスクリーン バージョンの CSS は次のとおりです。

.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.container .sixteen.columns { width: 940px; }
.bars {backgound-color:#FFF;}
.right {text-align:right;}
.bars.social {background-color:#101116; color:#FFF; height:29px; padding-top:4px; border-bottom:2px solid #063;}
4

1 に答える 1

0

絶対配置を使用してロゴを追加し、ソーシャル メディア リンクの上に押し上げる方法を次に示します。もちろん、独自のロゴに置き換えてください。

http://jsfiddle.net/bzoc9vbj/

#logo {
    width:64px;
    height:64px;
    position: absolute;
    top:0;
    left:0;
    background-image:url('https://asciinema.org/assets/bitcoin-logo-48563026498d25219c7e2ec2b978184b.png');
}
于 2014-09-22T15:29:19.017 に答える