Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Desperately need help with coding!

    Hey guys, I've got a problem that's driving me crazy. I'm very much a beginner at html and css, and I'm working with a new myspace page (I know, ugh, right? lol) anyway, I've placed a youtube video player and a twitter badge on the about me section, but I need them centered (right now they're aligned to the left) and I can't for the life of me figure out how to center them. Could someone help me? Here's the codes:

    Youtube Player:

    <div style="text-align:center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="413" width="746">
    <param name="allowScriptAccess" value="never" />
    <param name="allowNetworking" value="internal" />
    <param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFN8rzXRW1XEP9tONpEL8bd_ZSzS_xa_lpE=" />
    <param name="wmode" value="transparent" />
    <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/cp/vjVQa1PpcFN8rzXRW1XEP9tONpEL8bd_ZSzS_xa_lpE=" height="413" width="746" wmode="transparent" />
    </object></div>

    Then right under it I wanted to place TWO twitter badges next to each other for two different accounts, and I only have one placed because I'm not sure how to center and have them next to each other with a slight space inbetween... here's the code for the first:

    <div style="float: middle" align="middle" "width:176px;text-align:center"><embed src="http://twitter.com/flash/twitter_badge.swf" flashvars="color1=16738047&type=user&id=41767959" quality="high" width="176" height="176" name="twitter_badge" align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><a style="font-size: 10px; color: #FF66FF; text-decoration: none" href="http://twitter.com/TaylorsCircle"></a></div>

    Then like I said, I'd like to place another twitter badge next to this one on the right, both centered in the section. ANY suggestions or ideas would be greatly appreciated!

    Thanks so much!

  • #2
    New Coder
    Join Date
    Jun 2009
    Location
    Merced
    Posts
    36
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hi,

    I think you might want to try using the general align property, not the text-align one, like this:

    Code:
    <div style="align:center;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="413" width="746">
    <param name="allowScriptAccess" value="never" />
    <param name="allowNetworking" value="internal" />
    <param name="movie" value="http://www.youtube.com/cp/vjVQa1PpcFN8rzXRW1XEP9tONpEL8bd_ZSzS_xa_lpE=" />
    <param name="wmode" value="transparent" />
    <embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/cp/vjVQa1PpcFN8rzXRW1XEP9tONpEL8bd_ZSzS_xa_lpE=" height="413" width="746" wmode="transparent" />
    </object></div>
    When using the float property, the only values you can attach to it are left, right, none, and inherit. There is no middle or center value for the float property. For the twitter badges you might want to try this:

    Code:
    <div style="align:center; width:176px; text-align:center;"><embed src="http://twitter.com/flash/twitter_badge.swf" flashvars="color1=16738047&type=user&id=41767959" quality="high" width="176" height="176" name="twitter_badge" align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><a style="font-size: 10px; color: #FF66FF; text-decoration: none" href="http://twitter.com/TaylorsCircle"></a></div>&nbsp;<div style="align:center; width:176px; text-align:center;"><embed src="http://twitter.com/flash/twitter_badge.swf" flashvars="color1=16738047&type=user&id=41767959" quality="high" width="176" height="176" name="twitter_badge" align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><a style="font-size: 10px; color: #FF66FF; text-decoration: none" href="http://twitter.com/TaylorsCircle"></a></div>
    I hope this helps! Good Luck!

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi 021414

    Thank you so much for responding... I tried out this updated code you provided me with, but unfortunately it's still on the left of the about me section, unmoved

    Any other suggestions? I would have thought what you stated would work to, when I saw it I was excited because I hadn't tried this angle, but it's still unchanged.

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Add to the players div style:

    margin-left:auto;margin-right:auto;

    As far as your badges; place each one in a div. Float one right and one left. Place a div container around both. Then you can play with the divs to get the separation you want.

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much for the response rhartjr... unfortunately that didn't do it either, unless I have it entered wrong, here's what I have:

    <div style="align:center;margin-left:auto;margin-right:auto;">

    Is that a correct statement? Jeez, I had no idea centering an item in a div would be this difficult!

  • #6
    New Coder
    Join Date
    Jun 2007
    Posts
    79
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I believe that in order to center a div with margin: auto you will need to define a width for the element you are trying to center. Something like

    Code:
    <div style="align:center; width: 940px; margin-left:auto; margin-right:auto;">
    That might do it. Let me know if it does.



    Mike

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Muckiem14 View Post
    I believe that in order to center a div with margin: auto you will need to define a width for the element you are trying to center. Something like

    Code:
    <div style="align:center; width: 940px; margin-left:auto; margin-right:auto;">
    That might do it. Let me know if it does.



    Mike
    doh! You're right, I'm still new to this stuff and still have many of those doh! (pop myself on the head) moments when I overlook something like that.

    This should take care of the twitter badges, you can play with the width to get the seperation you want:


    Code:
    <div style="width:400px;margin-left:auto;margin-right:auto">
    
    
    <div style="float:right;width:176px;text-align:center"><embed src="http://twitter.com/flash/twitter_badge.swf" 
    
    flashvars="color1=16738047&type=user&id=41767959" quality="high" width="176" height="176" name="twitter_badge" 
    
    align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" 
    
    pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><a style="font-size: 10px; color: #FF66FF; text-decoration: 
    
    none" href="http://twitter.com/TaylorsCircle"></a></div>
    
    <div style="float:left;width:176px;text-align:center"><embed src="http://twitter.com/flash/twitter_badge.swf" 
    
    flashvars="color1=16738047&type=user&id=41767959" quality="high" width="176" height="176" name="twitter_badge" 
    
    align="middle" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" 
    
    pluginspage="http://www.macromedia.com/go/getflashplayer" /><br><a style="font-size: 10px; color: #FF66FF; text-decoration: 
    
    none" href="http://twitter.com/TaylorsCircle"></a></div>
    
    </div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •