...
PDA

Need help centering content PLEASE

forsanmar
12-15-2010, 05:58 PM
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.


<!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>
Excavator
12-15-2010, 06:22 PM
Hello forsanmar,
Normally to center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto


With your absolute positioned layout that won't work though. Try the % centering method (http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/) like this -
#Table_01 {
height:637px;
width:1242px;
position:relative;
top:0px;
left:50%;
margin: 0 0 0 -621px;
}
forsanmar
12-15-2010, 06:27 PM
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
forsanmar
12-15-2010, 07:13 PM
so i tried this

#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
Excavator
12-15-2010, 07:20 PM
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 (http://www.wpdfd.com/editorial/thebox/deadcentre4.html). And a few examples (http://nopeople.com/CSS%20tips/vertical%20center%20with%20CSS/index.html).

<center> tag has been deprecated and should not be used.
forsanmar
02-17-2011, 05:23 PM
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/tutorials/vertical-centering-with-css/

BUT I CANT GET IT TO WORK. Am I missing something? or just that st st stupid.
Excavator
02-17-2011, 05:29 PM
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.
forsanmar
02-17-2011, 06:39 PM
oh yeah that would help.

www.brianapurserphotography.com
Excavator
02-17-2011, 07:02 PM
Based on this example (http://nopeople.com/CSS%20tips/vertical%20center%20with%20CSS/page4.html), I made these changes to your CSS -
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 -
<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...
forsanmar
02-17-2011, 08:12 PM
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/images/Picture%2030.png


still thankyou for your time. it makes sense what youre doing i just dont get why im having these weird effects.
Excavator
02-17-2011, 08:18 PM
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.
forsanmar
02-18-2011, 06:58 PM
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.
Excavator
02-18-2011, 07:22 PM
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...
forsanmar
02-18-2011, 07:23 PM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum