Problem aligning background image

Discussion in 'HTML & Website Design' started by chrisj383, Mar 28, 2008.

0
  1. #1
    Hi,

    I have a problem aligning the orange signup box at the bottom on this website http://www.apple.freebietastic.com, i need it aligned to the image just above it.

    Here's my code from the index.tpl and css.css

    body {
    background: #fff;
    margin: 10px 0 0 0;
    text-align: center;
    font-family: arial;
    font-size: 11px;
    text-align: center;
    /*
    color: #999999;
    background-image: url(../images/bg.jpg); */
}

.clear {
    clear: both;
    }

#container {
  text-align: left;
  margin: 0px auto;
  width: 100%;
  padding: 0px;
  display:block;
}

#offers_container {
    text-align: center;
    margin: 0 auto;
    width: 749px; 
    height:749px auto;
    border: 0px solid #E5E5E5;
    padding: 0px;
/*  background-image: url(../images/bg.gif);
    background-repeat:no-repeat; */
    
}
#bg_footer {
    text-align: center;
    margin: 0 auto;
    width: 749px; 
    height:129px;
    border: 1px solid #E5E5E5;
    padding: 0px;
    background-image: url(../images/bg_footer.gif);
    background-repeat:no-repeat;
}
#h_container {
    text-align: left;
    margin: 0 auto;
    width: 749px; 
    border: 0px solid #E5E5E5;
    padding: 0px;
    background: #ffffff;
}
#container2 {
    width: 749px;
}
#stuff  {
    width: 637px;
    float: right;
    background: #ffffff;
    background-repeat:no-repeat;
padding-right: 200px;
}
#m_2    {
	width: 367px;
	height:136px;
	background-image: url(../images/m_2.gif);
	
}
#m_1    {
    width: 153px;
    height: 135px;
    float: left;
    background-image: url(../images/m_1.gif);
}
#faq    {
    width: 28%;
    float: left;
}
#reward {
    float: left;
    text-align: center;
    font-family: arial;
    font-size: 11px;
    color: #999999;
    width: 205px;
    height: auto;
    line-height: 150%;
    margin-right: 79px;
    margin-bottom: 10px;
}
#status {
    float: right;
    font-family: arial;
    font-size: 11px;
    color: #999999;
    width: 422px;
    height: 160px;
    line-height: 190%;
}
#referral_container {
    font-family: arial;
    font-size: 11px;
    color: #999999;
    width: 700px;
    margin-top: 21px;
}
#referral {
    background-image: url(../images/referralbg.jpg);
    background-repeat: no-repeat;
    text-align: center;
    height: 25px;
    padding-top: 5px;
}
#referrals_container {
    font-family: arial;
    font-size: 11px;
    color: #999999;
    width: 700px;
    margin-top: 10px;
}
#referrals {
    height: 25px;
    padding-top: 5px;
    margin-bottom: 16px;
}



#footer, #footer a{

  color:#767676;

  font-family:Verdana, Arial;

  font-size:9px;

  font-weight:normal;

}

.footer2 {

  color:#767676;

  font-family:Verdana, Arial;

  font-size:9px;

  font-weight:normal;
  
  border-top: 0px solid #E5E5E5;

}

.footer3 {

  color:#C0C0C0;

  font-family:Verdana, Arial;

  font-size:10px;

  font-weight:normal;
  
  text-align: center;

}
.lightgreen { color: #95ce12; }
.darkgreen { color: #77a40f; }
.lightred { color: #ee4040; }
a:link {
    color: #666666;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #666666;
}
a:hover {
    text-decoration: none;
    color: #858585;
}
a:active {
    text-decoration: none;
    color: #666666;
}
#option {
    text-align: center;
    font-family: arial;
    font-size: 11px;
    color: #999999;
    float: left;
    width: 249px;
}
#option2 {
    text-align: center;
    font-family: arial;
    font-size: 11px;
    color: #999999;
    width: 241px;
    float: right;
}
#optionextend {
    width: 100%;
    text-align: center;
}
#steps2 {
    text-align: center;
    font-family: arial;
    font-size: 12px;
    color: #999999;
}
#signupstuff {
    height: 154px;
}
#signup {
    font-family: arial;
    font-size: 11px;
    color: #999999;
    width: 749px;
    height:114px;
    line-height: 170%;
    text-align: center;
    padding-top:10px;
    background: url(../images/m_4.gif) 0 0;
    background-repeat:no-repeat;
padding-left: 150px;
    
}
#m_3 {
    width: 100%;
    background: url(../images/m_3bg.gif) 0 0 repeat-x;
    }

.signupbutton {
  color: #999999;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: 150px;
  background: url(../images/button.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}
/* Text Boxes Start */
.signupbox {
    width: 150px;
    font-family: arial;
    font-size: 10px;
    margin-top: 6px;
    padding: 2px;
}
.loginbox {
    width: 150px;
    font-family: arial;
    font-size: 10px;


}

#memberslogin {
    background: #ffffff;
    color: #999999;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    padding: 3px;
    margin: 5px;
    float: right;
    border: 1px solid #E5E5E5;
}

#remove_back {
    background: #ffffff;
    color: #999999;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    padding: 3px;
    margin: 5px;
    float: left;
    border: 1px solid #E5E5E5;
}
#bar {
    border: 0px solid #bc1818;
    font-family: arial;
    font-size: 11px;
    text-align: center;
    padding: 0px;
    color: #999999;
    width: 749px;
    background: #fff;
    margin: 0 auto;
    margin-bottom: 0px;
}
#bar_2 {
    border: 0px solid #E5E5E5;
    
    padding: 0px;
    width: 749px;
    height: 13px;
    
    margin: 0 auto;
    margin-bottom: 0px;
     background: url(../images/h_2.gif);
     background-repeat:no-repeat;
}
#h_2 {
    width: 749px;
    height:13px;
    background: url(../images/h_2.gif);
    background-repeat:no-repeat;
    text-align:center;
    
    
}
#bar_3 {
    width: 100%;
    height:34px;
    background: url(../images/h_3.gif);
    background-repeat:repeat-x;
    text-align:center;

    
    
}
#login {
    padding-top:20px;
    text-align:center;
    
}
#main {
    border: 0px solid #E5E5E5;
    padding: 0px;
    width: 749px;
    height: 96px;   
    margin: 0 auto;
    margin-bottom: 0px;
    background: url(../images/main.gif);
    background-repeat:no-repeat;
}
#box {
    font-family: arial;
    font-size: 11px;
    text-align: center;
    color: #bc1818;
    background-color:#FFFFFF;
    
}
.box {
    font-family: arial;
    font-size: 11px;
    background-color: #F0F6FB;
/*  text-align: center;
    color: #999999;
    border: 0px solid #e5e5e5; */
}
#items {
    margin-top: 15px;
    border: 1px solid #ffffff;
    width:749px;
}
#front {
	margin-top: 20px;
	padding: 0;
	float: right;
	width: 100%;
	line-height: 160%;
	text-align: left;
}
#box_sign {
    background: #e5e5e5;
    color: #fff;
    font-family: arial;
    font-size: 12px;
    font-weight: normal;
    width: 100%;
    padding-left: 5px;
    margin-bottom: 6px;
}
#terms {
    padding: 10px;  
}
    Code (markup):
    
<link href="css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	margin-top: 0px;
} 
-->
</style>

 
<div id="container">

<div id="bar_3">


 
  <form action="login.php" method="post" name="form1" id="form1" style="position:relative; top:10px; " >
      <strong><font color="white">Email:</font>
    <input name="username" type="text"  id="username" class="loginbox" /> 
    <font color="white">Password:</font></strong>
    <input name="password" type="password"  id="password" class="loginbox" /> 
    <strong><a href="javascript:document.form1.submit()"><font color="white">OK</font></a></strong>
</form>

</div>

<div id="main"></div>

<!-- Begin_switch_logged_out -->
<div id="stuff">

<div id="front">

		
		<table><tr>
<td align="center">{ITEMS_TABLE}</td>
		</tr></table>
		
		
</div>
<br>
<br>
<br>
</div>
<div id="m_1"></div>
<div class="clear"></div>
<div id="m_3" align="center">
<img src="images/m_3.gif"></div>

<!-- End_switch_logged_out -->

<div id="signup" align="center"> 
		<FORM action="register.php" method="get" name="singup" id="singup">
		<strong><font color="white">Email:</font> </strong><input type="text"  class="signupbox" name="email">
		<input type=hidden value="{REFERRAL}" name=referral>
		
		<a href="javascript:check_terms()"> <img src="images/b_ok.gif" border="0"  style="position:relative; top:5px" /> </a>
		<br/>
		{REFERRAL_EMAIL}
		<br/>
		<input type="checkbox" name="agreetoterms" id="agreetoterms" >I agree to the <a href="http://incentives.pluskit.biz/terms.php" onclick="javascript:window.open('terms.php','','width=860,height=600,scrollbars');">terms and conditions</a>.<br/>
	<!--	<input type="submit" class="signupbutton" value="Sign Up" name="submit" disabled><br/><br/> -->
		</form>
</div>
<!-- Begin_switch_logged_in -->
		<div id="box">
				Welcome back to <strong>{SITE_TITLE}</strong>, <strong>{USERNAME}!</strong><br/>
        		Below you can see your status for your free <strong>{PRODUCT}</strong>.		</div>
		<div id="box">
			{USER_COMPLETED_OFFER}		</div>
		<div id="box">
		<center>
Referrals:<hr>{REFERRALS}
		</center>
		</div>
<!-- End_switch_logged_in -->
</div>

</div>
    Code (markup):

    I hope someone can help me.

    Thanks,
    Chris
     
    chrisj383, Mar 28, 2008 IP
  2. humanedited

    humanedited Peon

    Messages:
    747
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Take the fixed width off of #signup and set it 100% to match the #m_3 div that you are trying to line it up with. then, set the background to top center

    background:#fff url(../images/m_4.gif) top center no-repeat;
     
    humanedited, Mar 28, 2008 IP
  3. mds

    mds Active Member

    Messages:
    256
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Make some changes to the css file on
    <div id="signup">



    DP members would surely help out soon.
     
    mds, Mar 28, 2008 IP
  4. chrisj383

    chrisj383 Well-Known Member

    Messages:
    754
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    130
    #4
    Thanks humanedited, i've been trying to sort this problem out all day and it really stumped me, you've been so much help, thanks.

    Chris

     
    chrisj383, Mar 28, 2008 IP
  5. mds

    mds Active Member

    Messages:
    256
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #5
    Okay problem solved here. Thanks mate.
     
    mds, Mar 28, 2008 IP