メインディビジョンの外側の装飾は、CSSを使用して不安定です...？

私はメインのコンテンツdivの外に、ウィンドウのサイズが小さい場合に隠れることになるの外にいくつかの装飾をしようとしています。メインディビジョンの外側の装飾は、CSSを使用して不安定です...？

私はしばらくの間考えて、と思っていましたが、それは次のマークアップが付いてきました。しかし問題は、私がパーセンテージマージンを使用したため、サイズ変更中にデコレーションが不安定で不安定になり、時にはコンテンツdivを踏むことさえあるということです。

ここでは、コードです：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <style> 
      body { 
       padding: 0px; 
       margin: 0px; 
       width: 100%; 
       height: 100%; 
       background-color: yellow; 
      } 
      div.content { 
       display: block; 
       width: 958px; 
       height: 400px; 
       background-color: #CCC; 
       margin: 0px auto; 
      } 
      div.wrap { 
       margin: 0px auto; 
       min-width: 958px; 
       max-width: 1058px; 
       overflow: hidden; 
       position: relative; 
       background-image: url(http://www.ephotobay.com/image/ooo-ml.png); 
       background-position: center; 
      } 
      div.left, div.right { 
       background-image: url(http://www.laserpros.com/images/site/HP_Circle_Logo_Vector1_small.jpg); 
       width: 50px; 
       display: block; 
       height: 50px; 
       bottom: 0px; 
       position: absolute; 
      } 
      div.left { 
       right: 479px; 
       margin-right: 50%; 
      } 
      div.right { 
       left: 479px; 
       margin-left: 50%; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="wrap"> 
      <div class="left"></div> 
      <div class="right"></div> 
      <div class="content"> 
       <-- Content 
      </div> 
     </div> 
    </body> 
</html>

だから、あなたはそれがより柔軟にするために、パーセントのマージンを使用せずに、周りの他の方法のために人を推薦することができ..？ありがとう！

EDIT：

これは、サイズ変更にGoogle Chromeで何が起こるかです：

This is what happens in Google Chrome on resize

出典

2012-05-06 Anonymous

ブラウザを再計算する必要があるため、親の幅に基づいたマージンが変化しますが、これは予想される動作です。

あなたは割合として最大幅、分幅とマージンを再生せずに、画面上の中央集中型のコンテンツを維持したい、と.wrapによって影響を受けるべきである任意の要素は存在しない場合ドキュメントフローの位置は、あなたがこのような何かを行うことができます：

div.wrap { 
      width: 1058px; 
      overflow: hidden; 
      position: absolute; 
      left: 50%; 
      top: 0; 
      margin-left: -529px; /* 1058/2 * -1 */ 
      background-image: url(http://www.ephotobay.com/image/ooo-ml.png); 
      background-position: center;     
     }

これは、あらゆる状況に水平にコンテンツを一元管理します。

希望します。

出典

2012-05-06 16:16:26 PanterA

良いアイデアをありがとう、私は将来それを試してみてもいいかもしれません:) 今私は1つの長い画像に両方の画像をまとめて、中央の位置に貼り付けることができました。 – Anonymous

クリアあなたの山車：

<div> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="clear"></div> 
    </div> 
    <style> 
    .clear{clear:both;} 
    </style>

出典

2012-05-06 13:57:56 FiveTools

..全く意味がありますか？ :) – Anonymous

メインディビジョンの外側の装飾は、CSSを使用して不安定です...？

答えて

関連する問題