html图像位置强制窗口宽度太宽

Question

我正在尝试创建一个网页，其标题在整个页面宽度上重复，网站名称位于标题中心，徽标略微偏离网站名称。如果屏幕宽度太小而无法显示整个徽标，我只是希望它将徽标向右切除，否则将显示整个徽标（即显示器/窗口足够大。我不知道想要将图像浮动到右边。我希望它或多或少地绝对位于标题附近。

然而，我无法想办法做到这一点。我不能使用overflow-x或overflow-y（因为浏览器支持）和标记我目前只是用滚动条加宽窗口以容纳整个图像（见截图）。

这是屏幕截图

http://img691.imageshack.us/img691/3188/screenshot03062011.jpg

这是标记和CSS：

    <div id="header-wrap">
     <div id="header">
      <img src="title-card.png" />
      <img id="this-chick-logo" src="this-chick-logo.png" />
     </div>
    </div>

--

   body
   {
    background: #dfb1e4;
    padding: 0px;
    margin: 0px;
   }

   #header-wrap
   {
    background: url('header-bg.png') repeat-x;
    width: 100%;
    height: 291px;
   }

   #header
   {
    margin: 0 auto;
    width: 1000px;
    text-align: center;
    }

    #header img
    { 
    margin-top: 105px;
    }


   #header img#this-chick-logo
   {
    margin-top: -75px;
    margin-left: 680px;
    overflow: hidden;
   }

感谢。

Answer 1

添加

overflow: hidden;至#header-wrap

不要把它放在图像上。

Answer 2

overflow: hidden;需要添加到#header-wrap，并且可能会从img#this-check-logo中删除。此外，如果女孩喜欢向右推，其中一些在溢出时被切断，你不希望我一次向左移动几个像素直到你得到它的方式你喜欢它。如果你不介意一点切断就离开它，只添加overflow: hidden。