0

p埋め込まれたライブ ストリーム オブジェクトとチャット用の iframe を保持するために使用する中心があります。

非表示のチャット

今、JQueryチャットを非表示にする通話があり、 <a id="hidechat" onClick="$('#chat_embed').hide();" href="#">[Hide Chat]</a>

しかし、それはストリームボックスが左に引っ張られてしまいます 非表示のチャット

右側の見苦しいボックスをなくして、チャットを画面の中央に再配置してもらいたいです。a を設定しようとしましたfloat:left;が、その下のテキストが折り返され、通常はレイアウト全体が壊れます。

これは私の現在のレイアウトで可能ですか?

CSS:

    p
    {
        margin-left:auto;
        margin-right:auto;
        margin-bottom:1%;
        background-color:#121212;
        max-width:53%;
        max-height:75%;
        padding-top:25px;
        padding-left:25px;
        padding-right:25px;
        padding-bottom:25px;
    }
    p.streamblock
    {
        padding-top:25px;
        padding-left:25px;
        padding-right:25px;
        padding-bottom:25px;
        max-width:1000px;
    }

埋め込みコード：

<object type="application/x-shockwave-flash" height="378" width="620" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=mychannel" bgcolor="#000000">
    <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
    <param name="flashvars" value="hostname=www.twitch.tv&channel=mychannel&auto_play=true&start_volume=25" />
</object>
<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=tronasaurusx&amp;popout_chat=true" height="378" width="350"></iframe>
4

2 に答える 2

1

新しい HTML マークアップ->

<div class="streamblock">
  <!-- Twitch.tv embed code -->
<a href="#" onclick="$('#chat_embed').show();$('#showchat').hide();$('#hidechat').show();" id="showchat" style="display: inline;">[Show Chat]</a>
    <a href="#" onclick="$('#chat_embed').hide();$('#hidechat').hide();$('#showchat').show();" id="hidechat" style="display: none;">[Hide Chat]</a><br>
    <p class="objContainer">
  <object width="620" height="378" style="margin: 0px auto;" type="application/x-shockwave-flash" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=tronasaurusx" bgcolor="#000000">
    <param name="allowFullScreen" value="true">
    <param name="allowScriptAccess" value="always">
    <param name="allowNetworking" value="all">
    <param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf">
        <param name="flashvars" value="hostname=www.twitch.tv&amp;channel=tronasaurusx&amp;auto_play=true&amp;start_volume=25">
      </object>
     <!-- End Twitch.tv embed code -->
 <!-- Twitch.tv chat code -->
 <iframe width="350" scrolling="no" height="378" frameborder="0" style="display: none;" id="chat_embed" src="http://twitch.tv/chat/embed?channel=tronasaurusx&amp;popout_chat=true"></iframe>
 <br>
 <!-- End Twitch.tv chat code -->
  </p>
</div>

新しい CSS マークアップ->

div.streamblock{
  margin: 0px auto; 
  text-align: center; 
  max-width:1100px;
}
p{
  background-color: #121212;
  color: #FFFFFF;
  font-family: "Palatino Linotype",Tahoma,Serif;
  margin-bottom: 1%;
  margin-left: auto;
  margin-right: auto;
  max-height: 75%;
  padding: 25px;
  text-indent: 10px;
}

コンソールを使用して HTML を編集し、これらの変更をその場で行いました。上記（私が与えたとおりに使用した場合）は、望ましい結果をもたらします。

于 2012-07-16T03:34:14.070 に答える
0

ちょっと今、あなたはこのようにこれを行うことができます

.streamblock > a{
float:right; 
margin-right:xx; // required to your design 
}
于 2012-07-16T04:43:35.713 に答える