Center an object on screen after removing an iframe

Question

I've got a centered p that I use to hold my embedded live stream object and an iframe for the chat like so

Unhidden chat

Now, I have a JQuery call that hides the chat, <a id="hidechat" onClick="$('#chat_embed').hide();" href="#">[Hide Chat]</a>

But that ends up with the stream box pulled way off to the left Hidden chat

I'd love to have the chat re-align itself in the center of the screen without the ugly box on the right. I've tried setting a float:left; but the text below it wraps around and generally breaks the entire layout.

Is this possible with my current layout?

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;
    }

Embed code:

<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>

Both the `object` and `iframe` tags have fixed dimensions. CSS may help. Any chance of seeing your code in action? — approxiblue, Jul 16 '12 at 03:24
Sure, you can check it out at [tronasaurus.com](http://www.tronasaurus.com/) — David B, Jul 16 '12 at 03:24
Simply add `text-align: center` to `p.streamblock`. Also, consider changing your show/hide links' href to `javascript:void(0);`. Details here: http://stackoverflow.com/questions/134845/href-tag-for-javascript-links-or-javascriptvoid0. — approxiblue, Jul 16 '12 at 03:53

score 1 · Accepted Answer · answered Jul 16 '12 at 03:34

New HTML Markup ->

<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>

New CSS markup ->

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;
}

I used the console to edit your HTML and make these changes on the fly. The above (when used exactly as I've given) will produce the desired result.

Worked great, thank you. What was the crucial mistake I was making? — David B, Jul 16 '12 at 13:34
needed a container to align the content within; using P's you can't align an `object` — Ohgodwhy, Jul 16 '12 at 13:51

score 0 · Answer 2 · answered Jul 16 '12 at 04:43

0

Hey now you can do this as like this

.streamblock > a{
float:right; 
margin-right:xx; // required to your design 
}

answered Jul 16 '12 at 04:43

Rohit Azad Malik

31,410
17
69
97

Center an object on screen after removing an iframe

2 Answers2