3

私はこれを機能させようとしていたが、期待どおりに機能させることにさえ近づいていないため、現在、例として示すコードはありません。NDAのため、画像を表示できません。だから私ができる最善を説明します。

基本的に：

  1. div内にロゴ画像があります。divにはmargin：0autoがあります。そのため、ブラウザの中央に配置されます。

  2. 背景が透明な「矢印」のpng画像があり、ブラウザの右側にフラッシュする必要があります。

  3. キャッチは、ブラウザウィンドウをどれだけ広くしても、矢印の先端がロゴの右側の隣にとどまり、矢印の尾がブラウザの右側に面一になるようにする必要があるということです。

  4. ページのコンテンツも中央に配置されます。この情報が必要になった場合に備えて。

基本的に、ブラウザの幅に合わせて矢印のサイズを変更する必要がありますが、矢印の先端が常にロゴを指していることを確認してください。

私のすべての試みはdivを大きくしすぎて、ロゴが中央に配置されずに左端までフラッシュされてしまいます。

矢印が2つの画像にスライスされている可能性があることは理解していますが、それでも、これを実際に機能させる方法についてはまだ混乱しています。それは可能ではないと考え始めました。

これが説明する画像です。上矢印の矢印の使い方がわかれば、下矢印を取得できると確信しています。矢印の先端はページによって異なる場所にある可能性があるため、下の矢印はわずかに異なります。

サンプルデザイン

最終更新：Maxからのアドバイスを使用

注：この投稿の時点で、すべての最新バージョンであるchrome、firefox、safariでのみテストしました。他のバージョンやIEでどのような問題が発生するかわかりません。

HTML

 <div class="header-wrapper">

  <div class="header">
   <img src="images/logo.png" />
  </div>
  <div class="arrow-wrapper">
   <div class="arrow-tail"></div>
  </div>
 </div>

CSSコード

.header-wrapper{
    position:relative;
    width:100%;
    overflow:hidden;
}

.header {

   position: relative;
    z-index: 10;
    height: 69px;
    margin: 0 auto;
}

.arrow-wrapper {
    z-index: 5;
    background:url(../images/arrow_tip.png) no-repeat top left;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 18px;
    padding: 0 0 0 120px; 
    height:23px;
    margin-left:140px;
}

.arrow-tail{
    background:url(../images/arrow_tail.png) repeat-x top left;
    height:23px;
    width:100%;
}
4

1 に答える 1

3

私があなたを正しく理解した場合、これは解決策になる可能性があります：http: //jsfiddle.net/WazcT/3/

HTML：

<div class="main">
  <div class="header"></div>
  <div class="arrow_container">
    <div class="arrow">&larr;&dash;&dash;</div>
  </div>
</div>

CSS：

.main{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.header{
    position: relative;
    opacity: 0.5;
    z-index: 10;
    width : 400px;
    height: 100px;
    margin: 0 auto;
    background: #ccc;
}

.arrow_container {
    z-index: 5;
    background: #88b7d5;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 10px;
    padding: 10px 0 10px 200px;     
}

.arrow{
    padding: 10px;
    background: #eee;
    font-size: 32px;
}
​
于 2012-06-26T21:48:07.773 に答える