www.webdeveloper.com
Results 1 to 11 of 11

Thread: Almost ashamed to ask... vertical centering with CSS

  1. #1
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101

    Almost ashamed to ask... vertical centering with CSS

    Hi!
    It's been ages since I've done any CSS (2 years, to be exact). Back then, I remember it was quite complicated to position an element vertically centered on the page. I also remembered there are quite a lot of hacks and workarounds.
    Right now, I've tried like four of them, and none of them works.
    I have an object (it's actually an object. A swf) with a fixed width and a fixed height. I want to position it right in the middle of the page, vertically and horizontally. Of course, I want it centered for small resolutions, as well as for 27" screens.
    Up to now, I was able to center it horizontally (and surprisingly, the only thing that worked was to set the text-align property of the body tag to "center". The margins and such didn't work at all).

    So, is it me, or is there really a problem with vertical alignment and CSS ? I've done it already, several times, and I never had any trouble with it. I tried it with a simple div (without my swf object), and it works, but as soon as I put the swf in it, all vertical alignement is jammed. The thing gets aligned at the top of the window. Why is it so ? Is there a really good hack out there ?

    Here is my code, for what it's worth... I took an old code of mine, that's still perfectly working on the website it's on.


    HTML Code:
    <style type="text/css">
    <!--
    body {
    text-align:center;
    }
    
    #bloc {
    position:absolute;
    width: 950px;
    height: 550px;
    }
    
    #horizontal {
    
    background-color:transparent;
    
    visibility:visible;
    
    display:block;
    
    position:absolute;
    
    top:50%;
    
    left:0;
    
    width:100%;
    
    height:1px;
    
    overflow:visible;
    
    }
    
    #center {
    
    visibility:visible;
    
    margin-left:-475px;
    
    position:absolute;
    
    top:-225px;
    
    left:50%;
    
    width:950px;
    
    height:550px;
    
    z-index:1;
    
    
    }
    
    -->
    </style>
    </head>
    <body bgcolor="#666666">
    <noscript>
    <div id="horizontal">
    
    <div id="center"> 
    
    <div id="bloc"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="950" height="550" id="bureaunew-s15" >
    	<param name="allowScriptAccess" value="sameDomain" />
    	<param name="allowFullScreen" value="false" />
    	<param name="movie" value="bureaunew-s15.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#666666" />	<embed src="bureaunew-s15.swf" quality="high" bgcolor="#666666" width="950" height="550" name="bureaunew-s15" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
    	</object>
    </div>
    </div>
    </div>
    </noscript>
    </body>
    </html>
    Thanks for all suggestions !

  2. #2
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    Hello Ness_du_Frat,
    Have a look at this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	background: #666;
    }
    #horizontal {
    	width: 1px;
    	height: 50%;
    	float: left;
    	background: none;
    	margin: 0 0 -275px; /* half of bloc's height */
    }
    #bloc {
    	height: 550px;
    	width: 950px;
    	clear: left;
    	margin: 0 auto;
    	position: relative;
    }
    </style>
    </head>
    <body>
    <div id="horizontal"></div>
        <div id="bloc">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="950" height="550" id="bureaunew-s15" >
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="false" />
                <param name="movie" value="bureaunew-s15.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#666666" />	
                <embed src="bureaunew-s15.swf" quality="high" bgcolor="#666666" width="950" height="550" name="bureaunew-s15" align="middle" 
                allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
            </object>
        <!--end bloc--></div>
    </body>
    </html>

  3. #3
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Yeah, I've been trying this one too, and it doesn't work.
    My swf is now aligned at top=0 and left=0, top left corner of the page...

    Edit : and BTW, the half of 550 is 275, and not 225 as I wrote it... ^^; It was almost 3 am when I wrote the post, and you can definitely tell ^^
    Last edited by Ness_du_Frat; 02-28-2010 at 04:26 AM.

  4. #4
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Anyone for this question ?

  5. #5
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Ok, so here is the html file, if anyone wants to have a look... I must say I haven't tried to center it since my last post, I'm working so much on the flash file that I didn't really have time to check it. It's really a pity that none of the vertical centering codes I've found work with my problem... I don't understand why it's so, and I'm very surprised that a swf (object) would not work as an image or a div or any other objects. I have the impression I did something wrong, but I can't find it...
    http://zarkan.org/test/jeu.html

  6. #6
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    Quote Originally Posted by Ness_du_Frat View Post
    . I have the impression I did something wrong, but I can't find it...
    You do not have a DocType, you do not have a wellformed document and you did not follow the example I gave you.

    http://validator.w3.org/check?verbos...est%2Fjeu.html

  7. #7
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    So, actually I did follow your example and it didn't work. But you're right about the doctype, it's the one automatically given by flash when you publish your animations, and it's a real mess. I'll try with a clean file and I'll come back to give you some news.

    Edit : just tried it, and it works, at least partially. I get a scrollbar where I shouldn't get one, because my swf is much smaller than the browser window, and no margins are specified. But thanks for your help, the doctype was the issue. I would have solved it eventually, because I didn't plan on keeping such a messy html file, but I'm really gratefull for your help, I won't have to bother with this issue anymore (I have lots of issues to work with already).
    Last edited by Ness_du_Frat; 03-06-2010 at 01:00 PM.

  8. #8
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    So, actually I did follow your example and it didn't work.
    But it really does work. At least in FF3.x IE8 and IE7.
    If it doesn't work, it's being implemented wrong.

    Have a look - http://nopeople.com/test/Jeu.html

  9. #9
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    I did a copy / paste of your code. So it's not implemented wrong (at least I don't think so) I'm using FF 3.6. I also tried on Safari, it's the same, I get the scrollbar. Other than that, the object is centered, so it's fine, it's just this stupid scrollbar appearing where it shouldn't.
    And as I said, your solution works, but it gives me a scrollbar. It's when I tried it earlier with my messed up html file that it didn't work.
    I can hide the scrollbar with overflow:hidden, but I'd rather not to. Do you have a scrollbar too, or is it just me ?

  10. #10
    Join Date
    Feb 2010
    Location
    Alaska
    Posts
    39
    Here's a screencap with FireFox 3.6 on the left monitor and IE8 on the right.

  11. #11
    Join Date
    Aug 2004
    Location
    Switzerland
    Posts
    1,101
    Thanks, I'll have a look at that. I don't get the scrollbar on your version, so I have to check to see what's wrong. Thanks a lot !

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles