HTML/CSS徽标放置问题

问题描述：

我想知道是否有人可以帮我解决这个（可能很容易）的问题，我有。我试图做的是将我的标志放在我的网站的左侧，但它的上方包含社交媒体链接的顶部和其他div中的网站菜单（右对齐）。我提供了一个我想要在这里实现的图像：http://i59.tinypic.com/155j7tt.jpg（蓝色图像是徽标的形状，我希望它看起来高于div）HTML/CSS徽标放置问题

我在使用getskeleton框架以防万一在所有。

目前的*两个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>

现在我的问题是在哪里/我怎么把我的代码，这样的标识可以浮动的两个div以上（也挂稍微低于他们在图片中看到）。

我所做的一切要么放在一个或另一个，但不是两个。

UPDATE：

为全屏幕版本的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;}

任何CSS这么远？ – 2014-09-22 15:27:27

在徽标上使用绝对定位 – APAD1 2014-09-22 15:27:28

@AdamSinclair CSS已添加。 – ACanadianCoder 2014-09-22 17:05:49

答

下面是使用绝对定位把它推及的顶部添加一个标志的方式社交媒体链接。当然，用你自己的标志替代。

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'); 
}

HTML/CSS徽标放置问题

相关推荐