PDA

View Full Version : centering content


designingdani
09-13-2007, 04:28 AM
i tried to follow the instructions in the centered content with CSS (http://www.dreamweaverclub.com/css-center-content.php) article by gmcrone for this site (http://peopleneedgod.com/peopleneedgod.com/pursue_god.html) but my page will not come up centered in the browser window and still does not move as i resize it. can anyone look at it and tell me what i did wrong?

edbr
09-13-2007, 06:28 AM
you are getting yourself in trouble with te positioning of thise abloute layers, Try this , start off with a content wrapper
div.wrapper {
margin-right: 10%;
margin-left: 10%;
width: 80%;
height:auto;
}
this is fluid you can specify widths ect in px if you pefer.
now put your layers inside that. make then relative and you might get it. Give it a try

designingdani
09-13-2007, 06:39 AM
thanks, i'll try that.

domedia
09-13-2007, 01:22 PM
All you need to do is add position relative to your wrapper which the tutorial had you make:
div.wrapper {
margin-right: 10%;
margin-left: 10%;
position: relative;
}

designingdani
09-15-2007, 12:40 PM
now i've got the background image how i want it but my links still aren't moving when i resize the window. any suggestions?

domedia
09-15-2007, 07:53 PM
Looked at your site and seems to be working. Did you get it solved?

designingdani
09-18-2007, 11:01 PM
i still haven't figured it out. what browser did you use? my buttons at the bottom right (pursue, grow, live...) still act like ap elements. when you resize the page, the background image stays centered in the window, but the buttons don't adjust with it. i've checked it in safari, firefox and IE. it all looks the same.

d a v e
09-19-2007, 06:50 AM
what's with all the typos and grammatical mistakes in http://peopleneedgod.com/peopleneedgod.com/pursue_god.html ?

designingdani
09-19-2007, 07:40 AM
i'm planning on cleaning it up. it was copy and pasted from an e-mail that was sent to me by the client. i'm most concerned with getting all the placement worked out and then i'll go in and fix that stuff.

edbr
09-19-2007, 08:03 AM
see if this is closer to what you want
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">
<!--
body {
background-color: #777263;
}
#apDiv1 {
position:absolute;
left:0px;
top:14px;
width:808px;
height:431px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:460px;
top:502px;
width:61px;
height:45px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:525px;
top:520px;
width:73px;
height:48px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:709px;
top:504px;
width:73px;
height:53px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:791px;
top:533px;
width:121px;
height:51px;
z-index:5;
}
##container {
position: relative;
background: center center;
top: auto;
right: auto;
}
#apDiv6 {
position:absolute;
left:384px;
top:489px;
width:63px;
height:70px;
z-index:1;
}
#apDiv7 {
position:absolute;
left:283px;
top:485px;
width:60px;
height:75px;
z-index:1;
}
#apDiv8 {
position:absolute;
width:64px;
height:80px;
z-index:6;
left: 284px;
top: 477px;
}
#wrapper {
margin-right: 10%;
margin-left: 10%;
position: relative;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('/img/pursue_OVER.jpg','/img/grow_OVER.jpg','/img/live_OVER.jpg','/img/experience_OVER.jpg','/img/home_OVER.jpg')">
<div class="wrapper">
<div id="apDiv1">


</div>
<div id="apDiv8"><a href="/peopleneedgod.com/homepage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','/img/home_OVER.jpg',1)"><img src="/img/home.jpg" name="Image6" width="60" height="74" border="0" id="Image6" /></a></div>
<div id="apDiv2"><a href="/peopleneedgod.com/pursue_god.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','/img/pursue_OVER.jpg',1)"><img src="/img/pursue.jpg" name="Image2" width="51" height="32" border="0" id="Image2" /></a></div>
<div id="apDiv3"><a href="/peopleneedgod.com/grow_together.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','/img/grow_OVER.jpg',1)"><img src="/img/grow.jpg" name="Image3" width="68" height="39" border="0" id="Image3" /></a></div>

<div id="apDiv4"><a href="/peopleneedgod.com/live_on_purpose.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','/img/live_OVER.jpg',1)"><img src="/img/live.jpg" name="Image4" width="72" height="49" border="0" id="Image4" /></a></div>
<div id="apDiv5"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','/img/experience_OVER.jpg',1)"><img src="/img/experience.jpg" name="Image5" width="109" height="41" border="0" id="Image5" /></a></div>
</div>
</body>
</html>