2

ウェブサイトに問題があります。チャットを開くボタンを作成しました。ただし、このボタンは、すべてのブラウザーおよび画面モニターで適切な場所にとどまるわけではありません。ブラウザのズームが原因で、ボタンが思いどおりに表示されません。

これは私のページです: http://www.assemblyia.org.br/site/webtv/

CHATボタンは、この写真のようにボックスのすぐ後にある必要があります: http://imageshack.us/photo/my-images/20/cssfix.jpg/

しかし、他のブラウザでは、ボタンが左右に移動します。これが私のcssです：

<style>

* { /* trying to RESET CSS */
  margin: 0;
  padding: 0;
  list-style: none;
  vertical-align: baseline;
}

#tab /* the button CHAT */{
  min-width: 50px;
  min-height: 19px;
  max-width: 50px;
  max-height: 19px;
  position: absolute;
  right: 27%;
/*float: left;*/
  top: 350px;
  display: block;
  cursor: pointer;
  background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
  color: white;
}

#panel /* the panel */ {
  min-height: 367px;
  position:absolute;
  left: 1355px;
  top: 171px;
  background-color: #D4D4D4;
  max-height: 367px;
  min-width: 0; /*new line*/
}

#panel .content /* for the chat */ {
  min-width: 100px;
  text-align: center;
  /*margin-right:300px;*/
  margin-right: auto;
  max-width: 100px;
}

#close /* for the little red X after opening the chat */ {
  position: absolute;
  left: 1758px;
  top: 168px;
  background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonclose1.png');
  text-decoration: none;
}

#share /* for facebook sharing after opening the chat */ {
  position: absolute;
  left: 1656px;
  top: 540px;
  font-size: 10px;
  font-family: Verdana,sans-serif;
}

</style>

どうも..

4

2 に答える 2

1

これを使って

#tab {
min-width: 50px;
min-height: 19px;
max-width: 50px;
max-height: 19px;
position: absolute;
right: 50px;
top: 350px;
display: block;
cursor: pointer;
background-image: url('http://www.assembleia.org.br/site/wp-content/uploads/2013/01/buttonchat.png');
color: white;
}
于 2013-01-16T06:29:31.760 に答える
0

使用位置：相対的。親ラッパー div の属性を変更し、次のように #tab CSS を変更します。

  • 追加位置: 絶対;
  • 上から上に変更: 50%;
  • 右から右に変更: 25px;

これは Firebug を使用してテストされており、目的の効果が得られるはずです。

于 2013-01-16T06:03:42.690 に答える