Position in the center

papillonstudios · September 10, 2010

Ok I have this site that I am working on.

Im having a problem centering a mailing list bar across the top when viewing on a resolution higher than 1280 X 800.

I used PSD2CSS to generate the code. Here it is

How do i fix it?

mailinglist.php(included on the main index.php page)

<!-- This is 'background_center_bkgnd' -->
  <div id="Layer-1" class="background_center_bkgnd pngimg"  >

    <!-- This is 'Follow Us' -->
    <div id="Layer-11" class="Follow Us"  >
      <img src="images/Layer-11.png" width="87" height="20" alt="Follow Us" class="pngimg" /></div>

    <!-- This is 'flickr_link' -->
    <div id="Layer-10" class="flickr_link"  >
      <a href="flickr.html"><img src="images/Layer-10.png" width="23" height="24" alt="flickr" class="pngimg" border="0" /></a></div>

    <!-- This is 'follow1_link' -->
    <div id="Layer-9" class="follow1_link"  >
      <a href="follow1.html"><img src="images/Layer-9.png" width="24" height="23" alt="follow1" class="pngimg" border="0" /></a></div>

    <!-- This is 'facebook_link' -->
    <div id="Layer-8" class="facebook_link"  >
      <a href="facebook.html"><img src="images/Layer-8.png" width="23" height="23" alt="facebook" class="pngimg" border="0" /></a></div>

    <!-- This is 'blogger_link' -->
    <div id="Layer-7" class="blogger_link"  >
      <a href="blogger.html"><img src="images/Layer-7.png" width="24" height="23" alt="blogger" class="pngimg" border="0" /></a></div>

    <!-- This is 'follow2_link' -->
    <div id="Layer-6" class="follow2_link"  >
      <a href="follow2.html"><img src="images/Layer-6.png" width="23" height="23" alt="follow2" class="pngimg" border="0" /></a></div>

    <!-- This is 'go_submit_linkover' -->
    <div id="Layer-5" class="go_submit_linkover"  >
      <img src="images/Layer-5.png" width="44" height="21" alt="go" class="pngimg" /></div>

    <!-- This is 'go_submit_link' -->
    <div id="Layer-4" class="go_submit_link"  >
        <a href="javascript:document.psd2cssForm.submit();"><img src="images/Layer-4.png" width="44" height="21" alt="go" class="pngimg" border="0" /></a></div>

    <!-- This is 'email_inputtext' -->
    <div id="Layer-3" class="email_inputtext"  >
      <img src="images/Layer-3.png" width="182" height="21" alt="email" class="pngimg" /></div>

    <!-- This is 'JOIN THE MAILING LIST' -->
    <div id="Layer-2" class="JOIN THE MAILING LIST"  >
      <img src="images/Layer-2.png" width="194" height="17" alt="JOIN THE MAILING LIST" class="pngimg" /></div>

  </div>

index.php

<!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>RedBarRadio - We Make Fun of Everybody!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="cssreset.css" />
</head>

<body>

<div class="siteContainer" >
    
    	<div class="mailing">
        	<?php include('mailinglist.php'); ?>
        </div>
        
    </div>

</body>
</html>

style.css

.body {
background:#000;

}

.siteContainer {
height:1756px;
width:1264px;
margin-left:auto;
margin-right:auto;
background:url(images/RedBarRadioBG.jpg);
}

/* You named this layer background_center_bkgnd */
#Layer-1 {
  position: absolute;
  margin-left: -632px;
  left: 50%;
  top: +0px;
  width: 1264px;
  height: 75px;
  z-index: 1;
  background-image: url(Layer-1.png);
}

/* You named this layer JOIN THE MAILING LIST */
#Layer-2 {
  position: absolute;
  left: 615px;
  top: 31px;
  width: 194px;
  height: 17px;
  z-index: 2;
}

/* You named this layer email_inputtext */
#Layer-3 {
  position: absolute;
  left: 817px;
  top: 29px;
  width: 182px;
  height: 21px;
  z-index: 3;
}

/* You named this layer go_submit_link */
#Layer-4 {
  position: absolute;
  left: 1006px;
  top: 29px;
  width: 44px;
  height: 21px;
  z-index: 4;
}

/* You named this layer go_submit_linkover */
#Layer-5 {
  position: absolute;
  left: 1006px;
  top: 29px;
  width: 44px;
  height: 21px;
  z-index: 5;
}

/* You named this layer follow2_link */
#Layer-6 {
  position: absolute;
  left: 285px;
  top: 27px;
  width: 23px;
  height: 23px;
  z-index: 6;
}

/* You named this layer blogger_link */
#Layer-7 {
  position: absolute;
  left: 254px;
  top: 27px;
  width: 24px;
  height: 23px;
  z-index: 7;
}

/* You named this layer facebook_link */
#Layer-8 {
  position: absolute;
  left: 224px;
  top: 27px;
  width: 23px;
  height: 23px;
  z-index: 8;
}

/* You named this layer follow1_link */
#Layer-9 {
  position: absolute;
  left: 193px;
  top: 27px;
  width: 24px;
  height: 23px;
  z-index: 9;
}

/* You named this layer flickr_link */
#Layer-10 {
  position: absolute;
  left: 164px;
  top: 27px;
  width: 23px;
  height: 24px;
  z-index: 10;
}

/* You named this layer Follow Us */
#Layer-11 {
  position: absolute;
  left: 326px;
  top: 30px;
  width: 87px;
  height: 20px;
  z-index: 11;
}

cssreset.php

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-size: 100%;

    vertical-align: baseline;

    background: transparent;


}

body {

    line-height: 1;
background-repeat:no-repeat;
background:#000;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}



/* remember to define focus styles! */

:focus {

    outline: 0;

}



/* remember to highlight inserts somehow! */

ins {

    text-decoration: none;

}

del {

    text-decoration: line-through;

}



/* tables still need 'cellspacing="0"' in the markup */

table {

    border-collapse: collapse;

    border-spacing: 0;

}





/* Added by Shaun for psd2css Online */

p { margin-bottom: 0.5em; }

papillonstudios · September 10, 2010

nvm i fixed it

Sign In

Position in the center

Recommended Posts

papillonstudios

Link to comment

Share on other sites

papillonstudios

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information