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 14 of 14
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Need help centering content PLEASE

    I've looked everywhere online on how to do this and while I've seen many ways that work with different browsers.. or hacks that work with all browsers I have yet to accomplish how to vertically align my page in the middle so it will allways be centered no matter what your resolution is. The html I have doctored was the generated through photoshop's save for web using slices and what not. Can someone please show me how in my html? Thankyou so much.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title>Briana Purser Photography</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    
    #Table_01 {
    	position:absolute;
    	margin-top:0;
    	left:0px;
    	top:0px;
    	width:1242px;
    	height:637px;
    }
    
    #briana-01 {
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:1242px;
    	height:6px;
    }
    
    #briana-02 {
    	position:absolute;
    	left:0px;
    	top:6px;
    	width:73px;
    	height:97px;
    }
    
    #briana-03 {
    	position:absolute;
    	left:73px;
    	top:6px;
    	width:141px;
    	height:97px;
    }
    
    #briana-04 {
    	position:absolute;
    	left:214px;
    	top:6px;
    	width:1028px;
    	height:76px;
    }
    
    #briana-05 {
    	position:absolute;
    	left:214px;
    	top:82px;
    	width:667px;
    	height:26px;
    }
    
    #briana-06 {
    	position:absolute;
    	left:881px;
    	top:82px;
    	width:64px;
    	height:25px;
    }
    
    #briana-07 {
    	position:absolute;
    	left:945px;
    	top:82px;
    	width:67px;
    	height:25px;
    }
    
    #briana-08 {
    	position:absolute;
    	left:1012px;
    	top:82px;
    	width:65px;
    	height:25px;
    }
    
    #briana-09 {
    	position:absolute;
    	left:1077px;
    	top:82px;
    	width:88px;
    	height:25px;
    }
    
    #briana-10 {
    	position:absolute;
    	left:1165px;
    	top:82px;
    	width:77px;
    	height:555px;
    }
    
    #briana-11 {
    	position:absolute;
    	left:0px;
    	top:103px;
    	width:1px;
    	height:5px;
    }
    
    #briana-12 {
    	position:absolute;
    	left:1px;
    	top:103px;
    	width:80px;
    	height:19px;
    }
    
    #briana-13 {
    	position:absolute;
    	left:81px;
    	top:103px;
    	width:133px;
    	height:5px;
    }
    
    #briana-14 {
    	position:absolute;
    	left:881px;
    	top:107px;
    	width:284px;
    	height:1px;
    }
    
    #Logo {
    	position:absolute;
    	left:0px;
    	top:108px;
    	width:1px;
    	height:85px;
    }
    
    #briana-16 {
    	position:absolute;
    	left:81px;
    	top:108px;
    	width:1076px;
    	height:501px;
    }
    
    #briana-17 {
    	position:absolute;
    	left:1157px;
    	top:108px;
    	width:8px;
    	height:529px;
    }
    
    #briana-18 {
    	position:absolute;
    	left:1px;
    	top:122px;
    	width:80px;
    	height:19px;
    }
    
    #briana-19 {
    	position:absolute;
    	left:1px;
    	top:141px;
    	width:80px;
    	height:17px;
    }
    
    #briana-20 {
    	position:absolute;
    	left:1px;
    	top:158px;
    	width:80px;
    	height:19px;
    }
    
    #briana-21 {
    	position:absolute;
    	left:1px;
    	top:177px;
    	width:80px;
    	height:17px;
    }
    
    #briana-22 {
    	position:absolute;
    	left:0px;
    	top:193px;
    	width:1px;
    	height:413px;
    }
    
    #briana-23 {
    	position:absolute;
    	left:1px;
    	top:194px;
    	width:80px;
    	height:412px;
    }
    
    #briana-24 {
    	position:absolute;
    	left:0px;
    	top:606px;
    	width:80px;
    	height:31px;
    }
    
    #briana-25 {
    	position:absolute;
    	left:80px;
    	top:606px;
    	width:1px;
    	height:3px;
    }
    
    #briana-26 {
    	position:absolute;
    	left:80px;
    	top:609px;
    	width:1077px;
    	height:28px;
    }
    
    -->
    </style>
    <!-- End Save for Web Styles -->
    </head>
    <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
    
    <div id="Table_01">
    	<div id="briana-01">
    		<img src="images/briana_01.jpg" width="1242" height="6" alt="">
    	</div>
    	<div id="briana-02">
    		<img src="images/briana_02.jpg" width="73" height="97" alt="">
    	</div>
    	<div id="briana-03">
    		<img src="images/briana_03.jpg" width="141" height="97" alt="">
    	</div>
    	<div id="briana-04">
    		<img src="images/briana_04.jpg" width="1028" height="76" alt="">
    	</div>
    	<div id="briana-05">
    		<img src="images/briana_05.jpg" width="667" height="26" alt="">
    	</div>
    	<div id="briana-06">
    		<img src="images/briana_06.jpg" width="64" height="25" alt="">
    	</div>
    	<div id="briana-07">
    		<img src="images/briana_07.jpg" width="67" height="25" alt="">
    	</div>
    	<div id="briana-08">
    		<img src="images/briana_08.jpg" width="65" height="25" alt="">
    	</div>
    	<div id="briana-09">
    		<img src="images/briana_09.jpg" width="88" height="25" alt="">
    	</div>
    	<div id="briana-10">
    		<img src="images/briana_10.jpg" width="77" height="555" alt="">
    	</div>
    	<div id="briana-11">
    		<img src="images/briana_11.jpg" width="1" height="5" alt="">
    	</div>
    	<div id="briana-12">
    		<img src="images/briana_12.jpg" width="80" height="19" alt="">
    	</div>
    	<div id="briana-13">
    		<img src="images/briana_13.jpg" width="133" height="5" alt="">
    	</div>
    	<div id="briana-14">
    		<img src="images/briana_14.jpg" width="284" height="1" alt="">
    	</div>
    	<div id="Logo">
    		<a href="brianapurserphotography.com" target="home">
    			<img src="images/Logo.jpg" width="1" height="85" border="0" alt=""></a>
    	</div>
    	<div id="briana-16">
    		<img src="images/briana_16.jpg" width="1076" height="501" alt="">
    	</div>
    	<div id="briana-17">
    		<img src="images/briana_17.jpg" width="8" height="529" alt="">
    	</div>
    	<div id="briana-18">
    		<img src="images/briana_18.jpg" width="80" height="19" alt="">
    	</div>
    	<div id="briana-19">
    		<img src="images/briana_19.jpg" width="80" height="17" alt="">
    	</div>
    	<div id="briana-20">
    		<img src="images/briana_20.jpg" width="80" height="19" alt="">
    	</div>
    	<div id="briana-21">
    		<img src="images/briana_21.jpg" width="80" height="17" alt="">
    	</div>
    	<div id="briana-22">
    		<img src="images/briana_22.jpg" width="1" height="413" alt="">
    	</div>
    	<div id="briana-23">
    		<img src="images/briana_23.jpg" width="80" height="412" alt="">
    	</div>
    	<div id="briana-24">
    		<img src="images/briana_24.jpg" width="80" height="31" alt="">
    	</div>
    	<div id="briana-25">
    		<img src="images/briana_25.jpg" width="1" height="3" alt="">
    	</div>
    	<div id="briana-26">
    		<img src="images/briana_26.jpg" width="1077" height="28" alt="">
    	</div>
    </div>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello forsanmar,
    Normally to center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    With your absolute positioned layout that won't work though. Try the % centering method like this -
    Code:
    #Table_01 {
    	height:637px;
    	width:1242px;
    	position:relative;
    	top:0px;
    	left:50%;
    	margin: 0 0 0 -621px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    but the -621... whats that for? will that make -621 in all resolutions? meaning if someone is on 1024x768 its still going to move over?

    edit: it worked to horizontal but not vertical. I want it to not be dead centered but to be more centered towards the top
    Last edited by forsanmar; 12-15-2010 at 06:29 PM.

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    so i tried this

    Code:
    #Table_01 {
    	height:637px;
    	width:1242px;
    	position:absolute;
    	top:-400px;
    	left:-0;
    	margin: 33% 0 0 0;
    for the vertical align and yes it works. I can change the window size and all that fun stuff. But the problem is that when I resize the window too small it cuts off all the important stuff with no way to get to through scrolling.

    btw i just added a <center> to center it horizontal.

    edit: uhg it did work somewhere but messed up.

    why is it so hard to have and object that is 637x1242 be centered in the page both vertical and horizontal while if you adjust your viewing window smaller will stop when the top left corner gets to the edge without pushing the image up to where you cant scroll to get to it. I want it to push it to the corner than stop and then give me scroll bars.

    PLEASE SOMEONE HELLLPPP
    Last edited by forsanmar; 12-15-2010 at 07:20 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by forsanmar View Post
    but the -621... whats that for? will that make -621 in all resolutions? meaning if someone is on 1024x768 its still going to move over?

    edit: it worked to horizontal but not vertical. I want it to not be dead centered but to be more centered towards the top
    That link I gave you explains how the % centering works and why the 621px;

    That will center your site on the X axis. The Y axis is something else entirely. See dead center here. And a few examples.

    <center> tag has been deprecated and should not be used.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    okay so after all this website is finally up and yeah... 2 months later...

    Still can not figure out how vertically center my website. I've 1000's of different ways

    and this website even was really helpful in explaining http://blog.themeforest.net/tutorial...ring-with-css/

    BUT I CANT GET IT TO WORK. Am I missing something? or just that st st stupid.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Sorry you're having such a time with that... let's see your updated code and I'll have another look if you like.

    Better yet, a link to the site since I don't have your images available.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Dec 2010
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    oh yeah that would help.

    www.brianapurserphotography.com

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Based on this example, I made these changes to your CSS -
    Code:
    html, body {
    height: 100%;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
    	
    #measure {
    width: 10px; /*for demonstration only. Make this element 1px wide so it has less affect on x centering*/
    height: 50%;
    margin: 0 0 -350px; /*negative bottom margin is 1/2 the height of your centered container*/
    float: left;
    background: #f00; /*for demonstration only*/
    } 
    #Table_01 {
    	height: 700px;
        width: 1010px;
    margin: 0 auto;
    clear: left;
    	text-align: center;
    	position: relative;
    
    }
    And added this bit in red at the top of your markup -
    Code:
    <div id="measure"></div>
    <div id="Table_01">
    	
        
        <div id="h1_"><img id="h1" src="images/h1.gif" alt="" height="22" width="1008"></div>
    	<div id="l1_"><img id="l1" src="images/l1.gif" alt="" height="556" width="9"></div>
        <div id="logo_"><img id="logo" src="images/logo.gif" alt="" height="92" width="142"></div>
    	<div id="h2_"><img id="h2" src="images/h2.gif" alt="" height="74" width="857"></div>
    	<div id="h3_"><img id="h3" src="images/h3.gif" alt="" height="18" width="577"></div>
    Seems to work fine on my end...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    forsanmar (02-18-2011)

  • #10
    New Coder
    Join Date
    Dec 2010
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    it still centers it in the middle horizontal but not vertical.

    and drops the main content div box down like 20 px... and then there is something weird happening with my collapsible div box see:

    http://brianapurserphotography.com/i...cture%2030.png


    still thankyou for your time. it makes sense what youre doing i just dont get why im having these weird effects.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by forsanmar View Post

    still thankyou for your time. it makes sense what youre doing i just dont get why im having these weird effects.
    I have no trouble making it work here. There is no way to tell why it's not working for you if we don't see how you are implementing it. Update that site with your current attempt and let us see what you're doing.

    If that's your live site, just recreate it on a test site so our attempts aren't seen by your normal visitors.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Dec 2010
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    oh yeah just tried it again and it seemed to work fine. Dont know what I did the first time. Good job man. Thankyou so much.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by forsanmar View Post
    oh yeah just tried it again and it seemed to work fine. Dont know what I did the first time. Good job man. Thankyou so much.
    Right on. Glad it's working for you. I was beginning the think it was going to be a problem...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Dec 2010
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    It now also solves the problem of when I make the browser to small it would shoot the content to far over with no scroll bars. Thankyou again so much.


  •  

    Posting Permissions

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