SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    563
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to center the div ?

    Hello,

    I have a div in which a flash animation is played. When the flash animation is not there then the div is centered and if the flash animation is added the div aligns left. How to keep it centered in the page ?

    Thanks.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Um, could you post some code? HTML and CSS, we don't need the Flash.

    Are you looking in Firefox? I always had the opposite problem: with Flash enabled my boxes were centered, but with NoScript blocking, the boxes moved left (since it was only with NoScript I didn't bother worrying).

  3. #3
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    563
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Um, could you post some code? HTML and CSS, we don't need the Flash.

    Are you looking in Firefox? I always had the opposite problem: with Flash enabled my boxes were centered, but with NoScript blocking, the boxes moved left (since it was only with NoScript I didn't bother worrying).
    Hi,

    html code:
    Code:
    <div id="cuber"><a href="adobe.com">get flahs player</a></div>
    css code:
    Code:
    #cuber
    {
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
            margin:0 auto;
    }
    Pretty simple but without flash it works, with flash it does'nt. Working in no browser including IE ad FF.

    Thanks.

  4. #4
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://kb2.adobe.com/cps/159/tn_15909.html

    I'd say easier to just use <center> and have the HTML code center it instead of using CSS.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Code:
    #cuber
    {
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
            margin:0 auto;
    }
    I actually don't see why it would ever center in FF: when using margins to center blocks, you MUST state a less-than-100% width! Right now, your automargins should be ignored by all browsers all the time. Something else is making it centered when there's Flash in it. I'll bet when there's Flash available, that div gets turned into an <object> tag... do you have CSS for an <object> tag which is centered?

    I'd say easier to just use <center> and have the HTML code center it instead of using CSS.
    Not easier for me, but to those for whom it is easier, know that it (<center> tag) has been deprecated for about 10 years. That and I have this thing about using a markup language to set styles on a page : )

    Thanks for posting the Adobe link. Yet another bullet in my arsenal when I need Reasons Why Adobe Sucks And Hates Web Standards : ) Shame on them!

  6. #6
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    563
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Angry

    Quote Originally Posted by Stomme poes View Post
    Code:
    #cuber
    {
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
            margin:0 auto;
    }
    I actually don't see why it would ever center in FF: when using margins to center blocks, you MUST state a less-than-100% width! Right now, your automargins should be ignored by all browsers all the time. Something else is making it centered when there's Flash in it. I'll bet when there's Flash available, that div gets turned into an <object> tag... do you have CSS for an <object> tag which is centered?


    Not easier for me, but to those for whom it is easier, know that it (<center> tag) has been deprecated for about 10 years. That and I have this thing about using a markup language to set styles on a page : )

    Thanks for posting the Adobe link. Yet another bullet in my arsenal when I need Reasons Why Adobe Sucks And Hates Web Standards : ) Shame on them!
    Margin is working when flash is NOT there. But it fails when flash is there. Also center tag is also not working. I have tried all that. In the end i have now created a table and placed the div inside it and that seems to be working perfectly in IE but in FF the table is going in background and the flash animation is coming above the table hence hiding its borders and its a 2px on the left.

    CSS is good but sub-standard browsers, weird flash objects and what not makes it way too bad. Its really a time wasting tactic to make css based layout i have seen. I should be doing table based layouts until css is perfect in all browsers.

    Thanks.

  7. #7
    Non-Member
    Join Date
    Apr 2010
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    You can give align center bcos when you put the flash in given div than it will take align left than you have to give the align center to the div.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Margin is working when flash is NOT there.
    It should not. Therefore, you have something else going on in your code (in a parent element or someone) that we cannot see.

    Build an empty page and throw in a div and give it automargins but no width and it will not center. CSS follows particular rules. If it's centering without Flash then some other part of your code is doing the centering.

    Trust me on this.

    *edit another thing to consider is, divs are blocks but objects are special inlines (like images) unless the CSS somewhere is making the object a block. Like inlines, an object can be centered when text-align: center is added to its parent element.

    You can give align center
    Like the <center> tag, the align attribute is also deprecated. Deprecated doesn't mean it won't work in a browser; it means the W3C recommends against its use and it will be considered an error when you validate.

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Do you have a live example somewhere that we can look at? If your data is sensitive, it can be a dummy example page (text changed to lorem ipsum for example).


Bookmarks

Posting Permissions

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