Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Nov 2006
    Posts
    11
    Member #
    14235
    I need some help with my CSS positioning on my page. My positioning doesn't seem to display as I'd expect. I'm trying to center the content vertically and horizontally in the browser. I created a div as a container to hold both the movie and div with contact info (movie_page_container) and put my position values:

    #movie_page_containter {
    position:absolute; left:50% ; top:50%;
    }

    #flashcontent {
    width: 700px;
    }

    #movie_contact_info {
    background-color: #EFEFEF;
    width: 650px;
    margin: 10px 0px 15px 0px;
    padding: 10px 10px 10px 10px;
    }

    Here's my HTML:
    Code:
    <link rel="styleSheet" href="css/style.css" type="text/css" />
    <style type="text/css">
    body {
    background-image: url(images/soup_bg.jpg);
    background-repeat: no-repeat;
    }
    </style>
    
    <body>
    <div id="movie_page_containter">
    <div id="flashcontent">
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="695" height="195">
            <param name="movie" value="flash/intro.swf" />
            <param name="quality" value="high" />
            <embed src="flash/intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="695" height="195"></embed>
          </object>
    </div>
    <div>
      <script type="text/javascript">
       var so = new SWFObject("flash/intro.swf", "CEM_Movie", "695", "195", "8", "#");
       so.addParam("align", "");
       so.write("flashcontent");
    </script>
    </div>
    
    <div id="movie_contact_info"> 
    <p class="text-1">For more information, contact:<br />
       Ted Fisch &bull; Director of Business Development &bull; Ph: 215-449-0344 &bull; email:
       <a href="mailto:ted.fisch@lraworldwide.com">ted.fisch@lraworldwide.com</a></p>
    </div>
    </div>
    
    </body>
    I attached a screen shot of what I'm seeing.
    http://www.graphicdesignforum.com/fo...tid=3256&stc=1
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member
    Join Date
    Apr 2005
    Location
    Hatfield, England
    Posts
    855
    Member #
    9790
    You are centering it in the wrong way...

    #movie_page_containter {
    position:absolute; left:50% ; top:50%;
    }

    This is telling the browser to display your containers top left hand corner smack in the middle of your page. This means that all content will be displayed in the bottom right hand side of your browser.

    I center my pages by using the following..

    .container {
    width:800px;
    margin-right:auto;
    margin-left:auto;
    }

    I have never tried to vertically center my page but i am pretty sure that if you specify a height along with auto for the margin then it should center that way as well.

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Alternatively, you can use the shortcut:
    Code:
    margin: 0 auto;

  5. #4
    Senior Member simpleurl's Avatar
    Join Date
    Jul 2006
    Location
    Leicester, UK.
    Posts
    150
    Member #
    13598
    Also if you want to make page centering work on earlier browsers (not many use them i know) then whatever elements you are centering e.g. #page_container. You put at the bottom of your css...

    Code:
    body{text-align: center}
    Also make sure that you align your text in the code before this

  6. #5
    Junior Member
    Join Date
    Aug 2006
    Posts
    11
    Member #
    13768
    I have never tried to vertically center my page but i am pretty sure that if you specify a height along with auto for the margin then it should center that way as well.
    Correct me if I'm wrong, but I'm pretty sure there is no way to do this in css within the current w3 specifications. Designers usually create elements with a fixed width and allow the content to flow downwards. The only common need for vertical centering is in tabular elements and that can already be done inside table cells without the need for css.

    The best solution I have seen for something like what you are trying to do is to use a grided frameset as such:
    Code:
    <frameset rows="*,550,*" cols="*,800,*" frameborder="NO" border="0" framespacing="0">
    
      <frame src="white.html" name="" scrolling="NO" noresize>
        <frame src="white.html" name="" scrolling="NO" noresize>
          <frame src="white.html" name="" scrolling="NO" noresize>
            <frame src="white.html" name="" scrolling="NO" noresize>
              <frame src="main.html" name="" scrolling="NO" noresize>
                <frame src="white.html" name="" scrolling="NO" noresize>  
                <frame src="white.html" name="" scrolling="NO" noresize>
                  <frame src="white.html" name="" scrolling="NO" noresize>
                    <frame src="white.html" name="" scrolling="NO" noresize>
                  
    </frameset>
    Specify the dimensions of the central frame in the "rows" and "cols" attribute.

    Of course, this solution creates the problem of slicing and seemlessly piecing together the background image accross separate frames...and also everything else that comes with framed-based navigation (like visible urls and static page titles).

    If you dont have any navigation to worry about (or non-repetative background images), this is probably the best solution because it will expand both horizontally and vertically as the user expands the size of the browser window.

    Check out:

    http://www.communitybackandneck.com

    If you do know of a way to do vertical centering in CSS, please let me know immediately as it will make my life 10 times easier.

    Hope this helps,
    Ross


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:22 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com