Centering problems

I’m having a problem with my contact page. (pic below)
http://i187.photobucket.com/albums/x292/bigbonthabeat/centerproblem.jpg

The contact table will not nudge down. There is something that’s making it stick to the top of the “backcontact” div. Below is an example of when I give the “gallery” div a padding of 100 from the top. (It just makes the whole object bigger instead of nudging it down).
http://i187.photobucket.com/albums/x292/bigbonthabeat/100pxpadding.jpg

How do I fix this problem?


CODE

Source Code

<!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>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="apple/demo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="apple/script.js"></script>

<!--[if lte IE 7]>
<style type="text/css">
ul li{
	display:inline;
	/*float:left;*/
}
</style>
<![endif]-->

<script type="text/javascript">
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_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_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>
<style type="text/css">
.spacer {
	height: 80px;
}
</style>
</head>

<body onload="MM_preloadImages('img/rollyoutube.png','apple/img/sample_slides/blackhover.png','apple/img/sample_slides/gmailhover.png','apple/img/sample_slides/facebookhover.png','apple/img/sample_slides/youtubehover.png','apple/img/sample_slides/twitterhover.png')">
<body onload="MM_preloadImages('../img/rollyoutube.png','../img/rollfacebook.png','../img/rolltwitter.png','../img/blackroll.png','../img/rollgmail.png')">
<div class="myheader"><span class="Biography">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="435" height="107" vspace="50" id="FlashID2" accesskey="s" tabindex="1" title="contactroll">
    <param name="movie" value="img/rollcontact.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object data="img/rollcontact.swf" type="application/x-shockwave-flash" width="435" height="107" vspace="50">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</span>
</div>
 <div class="spacer"></div>
<div class="backcontact">
<div id="gallery">      
  <div id="slides">
    
    <div class="slide"><a href="www.youtube.com/brysonprice"><img src="apple/img/sample_slides/youtube.png" alt="side" name="Image1" width="850" height="260" onmouseover="MM_swapImage('Image1','','apple/img/sample_slides/youtubehover.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>
    <div class="slide"><a href="www.twitter.com/brysonprice"><img src="apple/img/sample_slides/twitterbigger.png" alt="side" name="Image3" width="850" height="260" id="Image3" onmouseover="MM_swapImage('Image3','','apple/img/sample_slides/twitterhover.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>
    <div class="slide"><a href="www.facebook.com/brysonprice"><img src="apple/img/sample_slides/facebookbigger.png" alt="side" width="850" height="260" id="Image2" onmouseover="MM_swapImage('Image2','','apple/img/sample_slides/facebookhover.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>
         <div class="slide"><a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank"><img src="apple/img/sample_slides/gmailbigger.png" alt="side" width="850" height="260" id="Image5" onmouseover="MM_swapImage('Image5','','apple/img/sample_slides/gmailhover.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>
      <div class="slide"><img src="apple/img/sample_slides/blackbigger.png" alt="side" width="850" height="260" id="Image4" onmouseover="MM_swapImage('Image4','','apple/img/sample_slides/blackhover.png',1)" onmouseout="MM_swapImgRestore()"/></div>
      </div>
   
    
    <div id="menu">
    
    <ul>
        <li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="apple/img/sample_slides/youtubethumb.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="apple/img/sample_slides/twitterthumb.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="apple/img/sample_slides/facebookthumb.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="apple/img/sample_slides/mail.png" alt="thumbnail" /></a><li class="menuItem"><a href=""><img src="apple/img/sample_slides/blackthumb.png" alt="thumbnail" /></a>
        </li>
        
    </ul>
    
    
    </div>
    
</div>
    
</div>

</body>
</html>

styles.css

@charset "utf-8";
/* CSS Document */

#wrapper {
	text-align: left;
	width: 960px;
	position: relative;
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: auto;
	background-image: url(img/background.png);
	
}
body {
	background-repeat: repeat;
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-image: url(img/background.png);
}
.biobody {
	border: 3px solid #282828;
	height: 400px;
	width: 896px;
	margin-right: 34px;
	margin-left: 36px;
	clip: rect(auto,34px,auto,36px);
	text-align: center;
	background-color: #e9e6e6;
}
.whitebody {
	height: 400px;
	width: 896px;
	margin-right: 34px;
	margin-left: 36px;
	clip: rect(auto,34px,auto,36px);
	text-align: center;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

.belowheader {
	height: 122px;
	width: 899px;
	margin-left: 38px;
	text-align: center;
}
.gmail {
	height: 87px;
	width: 213px;
	text-align: center;
}
.facebook {
	padding-top: 50px;
}
.youtubetwitter {
	padding-top: 78px;
}

img {
    border: 0px;
}
.myheader {
	height: 170px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 3px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #282828;
	border-right-color: #282828;
	border-bottom-color: #282828;
	border-left-color: #282828;
	text-align: center;
	background-color: #e9e6e6;
	background-image: url(img/px.png);
}

.mainbody {
	border: 3px solid #282828;
	height: 800px;
	width: 896px;
	margin-right: 34px;
	margin-left: 36px;
	clip: rect(auto,34px,auto,36px);
	text-align: center;
	background-color: #e9e6e6;
}
.ui-jcoverflip {
        position: relative;
      }
.soundcloud {
	width: 904px;
	height: 225px;
	border-bottom-style: none;
	border-top-style: none;
	text-align:center;
	margin-right: auto;
	margin-left: auto;
	height: 430px;
	background-image: url(img/soundcloudnewback.png);
}

     
      .ui-jcoverflip--item {
        position: absolute;
        display: block;
      }
.backcontact {
	background-image: url(img/contactback.png);
	background-repeat: no-repeat;
	text-align: center;
	height: 521px;
	width: 888px;
}

demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
	text-align: center;
}

body{
	/* Setting default text color, background and a font stack */
	color:#444444;
	font-size:13px;
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;
	text-align: center;
}

/* Gallery styles */

#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;
	/* CSS3 Rounded Corners */
	
	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;
	border:1px solid white;
	background:url(img/panel.jpg) repeat-x bottom center #ffffff;
	/* The width of the gallery */
	width:850px;
	overflow:hidden;
	text-align: center;
	padding-top: 100px;
	padding-right: 100px;
	padding-bottom: 100px;
	padding-left: 100px;
}

#slides{
	/* This is the slide area */
	height:260px;
	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:850px;
	overflow:hidden;
	text-align: center;
}

.slide{
	float:left;
	text-align: center;
}

#menu{
	/* This is the container for the thumbnails */
	height:45px;
	text-align: center;
}

ul{
	margin:0px;
	padding:0px;
}

li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
	/* The active state of the thumb */
	background:url(img/active_bg.png) no-repeat;
}

li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(img/divider.png) no-repeat right;
}

li a{
	display:block;
	background:url(img/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

a img{
	border:none;
}


/* The styles below are only necessary for the demo page */

h1{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:36px;
	font-weight:normal;
	margin-bottom:15px;
}

h2{
	font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
	font-size:12px;
	font-weight:normal;
	position:absolute;
	right:0;
	text-transform:uppercase;
	top:15px;
}

#main{
	/* The main container */
	margin:15px auto;
	text-align:center;
	width:904px;
	position:relative;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

p{
	padding:10px;
	text-align:center;
}

There’s a much better chance of getting an answer to this if you post a live link. All that code makes me go dizzy, and it isn’t much use without the images.

Bryson’s Contact Page

Ah, that’s better. :slight_smile:

I wouldn’t recommend having that background image behind the slider, but 'tis up to you.

You can easily reposition the slider with these rules in red:


.backcontact {
  background-image: url("img/contactback.png");
  background-repeat: no-repeat;
  height: 521px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  width: 888px;
  [COLOR="Red"]border-top: 1px solid #fff;[/COLOR]
}

#gallery {
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-box-shadow: 0 0 3px #AAAAAA;
  background: url("img/panel.jpg") repeat-x scroll center bottom #FFFFFF;
  border: 1px solid white;
  [COLOR="Red"]margin: 18px 0 0 18px;[/COLOR]
  overflow: hidden;
  text-align: center;
  width: 850px;
}

Certainly works in Firefox, but you’ll have to test in other browsers.

thank you for the help : )

Why wouldn’t you reccommend the background image behind the slider? I think it gives it a lot more flavor and customizes it a bit.

The reason why I posted all that code is because I figure that it would be easier for someone to help, but I guess it’s the opposite. Next time I have a problem, I will post the webpage instead of the code.

Also, is it possible to make the gmail contact form pop out using lightbox2?
Lightbox 2

Sorry, I should have been clearer. I meant the part of it that is the same as the slider/button stuff on top of it. If things get out of alignment on any browser, you will have that weird duplication look.

is it possible to make the gmail contact form pop out using lightbox2?
Lightbox 2

No doubt it is possible, but it can be tricky to mix two scripts together like that. You’ll need advice from a JS person for that.

Perhaps post a separate thread in the JS forum if you need help.

Ralph.m, thanks for your AWESOME help