CSSボタンの位置付けは、サイズ変更時に変更を続ける

CSSボタンに大きな問題があります...私の画面サイズは1366x768です。ブラウザでズームアウトするか、より大きな画面を表示するまで、その位置は問題ありません。CSSボタンの位置付けは、サイズ変更時に変更を続ける

誰でも助けてくれますか？問題と

サイト：

例の左ボタン：http://riotpointscodes.info/region.html

出典

2012-03-26 dvLden

あなたの穴のHTMLマークアップは非常に悪いです:( – sandeep

あなたのボタンの位置を決定する必要がありますが、あなたの完全なアーキテクチャについて考える必要があります。 –

を今日仕事で退屈し、あなたのグラフィックはかなりクールだったので....ここでは私の友人です：あなたの問題は絶対的である

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Riot Points Codes</title> 
     <link rel="SHORTCUT ICON" href="http://agessy.com/favicon.png" /> 
     <style type="text/css"> 
      body { 
       background: url("http://riotpointscodes.info/images/background.jpg") no-repeat scroll center top #070b14; 
       margin: 0; 
       padding: 0; 
      } 
      #wrapper { 
       width: 895px; 
       height: 493px; 
       position:relative; 
       top:180px; 
       margin:0 auto; 
       background: url('region_files/paper.jpg') no-repeat top center; 
      } 

      .choice { 
       background: url("region_files/map.png") no-repeat scroll 0 0 transparent; 
       height: 212px; 
       left: 50%; 
       margin-left: -259px; 
       position: absolute; 
       top: 43px; 
       width: 517px; 
      } 

      .logo { 
       left: 50%; 
       margin-left: -205px; 
       position: absolute; 
       top: -135px; 
      } 
      #lol-custom-buttons { 
       position: absolute; 
       bottom: 107px; 
       left: 0px; 
       width: 100%; 
       height: 90px; 
       text-align:center 
      } 
      .play-free-link { 
       height: 90px; 
       width: 251px; 
       background-repeat: none; 
       color: #ECC873; 
       display: inline-block; 
      } 

      .play-free-link.one { 
       background-image: url("http://riotpointscodes.info/images/1n.png"); 
      } 

      .play-free-link.one:hover { 
       background-image: url("http://riotpointscodes.info/images/1h.png"); 
      } 

      .play-free-link.two { 
       background-image: url("http://riotpointscodes.info/images/3n.png"); 
      } 

      .play-free-link.two:hover { 
       background-image: url("http://riotpointscodes.info/images/3h.png"); 
      } 
      .play-free-link.three { 
       background-image: url("http://riotpointscodes.info/images/2n.png"); 
      } 

      .play-free-link.three:hover { 
       background-image: url("http://riotpointscodes.info/images/2h.png"); 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div class="logo"><img src="region_files/logo.png"></div> 
      <div class="choice"></div> 
      <div id="lol-custom-buttons"> 
       <a class="play-free-link one" href="http://riotpointscodes.info/"></a> 
       <a class="play-free-link two " href="http://riotpointscodes.info/"></a> 
       <a class="play-free-link three" href="http://riotpointscodes.info/"></a> 
      </div> 
     </div> 
    </body> 
</html>

出典

2012-03-26 19:20:06

さらに最適化はイメージスプライトを使用することです。 –

皆様、特にTimWickstromのおかげで）乾杯！魅力のように動作します。 – dvLden

あなたは文書本体にabsolutleyあなたのボタンを配置している

position: absolute; 
top: 475px; 
width: 251px;

置き、あなたの紙の上に配置されたコンテナ内のすべてのボタンと相対的または絶対的に位置を設定し、ボタンの配置で再生します。

出典

2012-03-26 18:45:12

絶対配置を使用する場合は、アンカーポイントが必要です。アンカーポイントは、position:relativeが定義されたHTMLツリー上の最初の要素です。要素が見つからない場合、BODYタグはアンカーポイントになります。

ラッパーには物が入っているので、BODYではなくブラウザのサイズが変更されても、すべてを内部に保持するにはアンカーポイントが必要です。

出典

2012-03-26 18:47:08

CSSボタンの位置付けは、サイズ変更時に変更を続ける

答えて

関連する問題