Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-11-2012, 11:12 PM   PM User | #1
Noreply18
New to the CF scene

 
Join Date: Apr 2012
Posts: 3
Thanks: 1
Thanked 0 Times in 0 Posts
Noreply18 is an unknown quantity at this point
cant move the button :/

Hey guys,

Look at the website: http://www.zete.net23.net/
I cant move the orange button to the right..Whats the problem? i've tried, right, padding-right..Nothing works.

Im not pro at this, please explain as you are explaining to a child :P

Please right click "source" on the website it would be more neat and clean.

But heres the other option:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	
	<link rel="icon" href="http://app1.sbx-cdn.com/images/favicon.ico" />
	<link rel="shortcut icon" href="http://app1.sbx-cdn.com/images/favicon.ico" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

	<title>Earn Reward Points and Redeem Them For Free Stuff at Swagbucks.com</title>	
	<meta name="google-site-verification" content="JRu8n5pWkuMD8xBNoGcTx8V-8CxEjT7WVTRDFBeEchA" />
	<meta name="alexaVerifyID" content="-WLZJ6RGB8LAe6XpJAGGfGwbdts" />
	<link href="/content/skin-02/css/template.css" rel="stylesheet" type="text/c
	
	
		<meta name="title" content="Earn Reward Points and Redeem Them For Free Stuff at Swagbucks.com" />
		<meta name="description" content="Earn rewards and free stuff by searching and shopping online, answering surveys, and more at Swagbucks.com, a customer loyalty rewards program. Be rewarded today." />
		<link rel="image_src" href="http://content.swagbucks.com/profiles/profile-sm/default-new.jpg" />
	
	<meta name="keywords" content="Earn Reward Points and Redeem Them For Free Stuff at Swagbucks.com" />
	<link href="https://plus.google.com/115795759412532500343" rel="publisher" />
</head>
<body style="margin:0; padding:0;">
<link rel="stylesheet" type="text/css" href="http://app1.sbx-cdn.com/content/skin-02/css/top-nav-v5.css?v=20110527-115312-427"/>
<link rel="stylesheet" type="text/css" href="http://app1.sbx-cdn.com/content/skin-02/css/generic-v2.css?v=20120228-084528-1b5"/>


<style>html{overflow-x:hidden;} .contTitle{min-width:1024px;}</style>

<div style="display:none"><div id="gigyaLoginCont" style="display:none"></div></div>
<link rel="stylesheet" type="text/css" href="http://app1.sbx-cdn.com/content/garden-wall/css/garden.pmin.css?v=20110913-051748-916"/>
<div class="contTitle">
  <div class="innerCont outerWidth"> 
    <div class="logo"></div>
    <div class="login_area" id="login_area" style="width:368px; right:0; top:32px;">
		
		<form name="frmLogIn-tbar" id="signInBoxLocal" method="post" action="/?cmd=sb-login&from=%2F%3Fcmd%3Dhome">
		<style>
			#signInBoxLocal{font-size:11px;}
			#signInBoxLocal label{height:18px; display:block; color:#313131}
			#signInBoxLocal input{height:16px; padding:2px; display:block; border:solid 1px #AAA6A7; width:142px}
			#signInBoxLocal a:hover{text-decoration:underline}
		</style>	
		
			
				<div style="width:148px; float:left; margin-right:7px; position:relative; top:0; left:0; font-size:11px; font-family:Arial;">
					<label class="loginLabel">Email or Swag Name</label>
					<input title="Enter your email address" type="text" name="emailAddress" id="emailAddressLocal" tabindex="8"/>
					<input type="checkbox" name="persist" id="persistLocal" checked tabindex="10" style="position:absolute; top:44px; left:0; padding:0; margin:0; border:0 none; width:auto"/>
					<label for="persistLocal" class="persistLabel" style="position:absolute; top:44px; left:18px; color:#7D7D7D">Keep me logged in</label>
				</div>
				<div style="width:148px; float:left; margin-right:6px; position:relative; top:0; left:0; font-size:11px; font-family:Arial;">
					<label class="loginLabel">Password</label>
					<input title="Enter your password" type="password" name="pswd" id="pswdLocal" tabindex="9" />
					<a href="#" rel="nofollow" onClick="sendEmailTBLocal(); return false" class="emailPass highlight1" onfocus="this.blur()" style="position:absolute; top:44px; left:0; color:#7D7D7D">Forgot your password?</a>
				</div>
				<div style="width:58px; float:left; padding-top:18px;">
					<input type="submit" tabindex="11" value="Login" class="btn1 btnLogin" style="height:23px; padding:0 10px; font-size:11px; line-height:23px; border:0 none; margin:0; width:50px;" onclick="return logInTBLocal();"/>
				</div>
				<div class="clear" style="height:18px"></div>
			
		</form>
    </div>
  </div>
</div>
<div class="garden_wall_bg_div" style="min-height:432px;">
    <div class="garden_wall_2" style="width:970px;">
		
			<link rel="stylesheet" type="text/css" href="http://app1.sbx-cdn.com/content/garden-wall/css/new-garden-wall.pmin.css?v=20120320-033701-5e6"/>
			
				<div id="getFreeStuffHeader">Join Swagbucks.  The Largest Free Online Rewards Program.</div>
				<div id="prizesRealSubHeader">The Currency is Virtual. The Prizes are Real!</div>
				
			
		
		

    <div class="right_contant_area" style="float:left;">
	    
	    	
	    		
	    
		<div id="garden_wall1" style="position:relative; left:0; top:0">
		
			<div id="grdnAlmostDone" class="almost_done" style="margin-bottom:33px; font-size: 22px; position:relative; top:0; left:0; z-index:2">Complete a <span class="boldTxt">new</span> registration and <span style="position:absolute; top:-36px; right:-62px; z-index:2; display:block; height:138px; background:url(http://app1.sbx-cdn.com/content/garden-wall/images/earn30shaddow.png) no-repeat right top; padding:28px 20px 0 0" id="earnSbShadow"><img src="http://app1.sbx-cdn.com/content/garden-wall/images/earn30.png" alt="earn 30 Swag Bucks" /></span></div>
		
			
			<div id="socialConnectHead" class="continue_reg" style="font-weight:normal; margin-top:15px"><span class="boldTxt">Login or Register</span> by connecting through a social network</div>
			<div class="partners_images" id="partners_images" style="position:relative; top:0; left:0; z-index:2"><img src="/content/garden-wall/images/gigya-ajax-loader.gif"  alt="loading" style="padding-top:8px" /></div>
			<style>#partners_images, #partners_images table {width:300px !important}</style>
			
			<div id="status"></div>
			<style>.stepNoNew{position:absolute; top:0; right:2px; color:#1E3360; font-weight:normal; font-size:14px;} .continue_reg{position:relative; top:0; left:0}</style>
			
			<div id="step1Manual" class="drop-shadow lifted">
				<div class="continue_reg"><span class="newSpanShow" style="display: none;">Register and Start Earning</span><span class="newSpanHide">Start a New Account</span><span class="stepNoNew">Step 1 of 2</span></div>
				<div class="registration_area margin_less">
					
			
				 <form name="inputs" action="submitform.php" method="post">
					<div class="rigister_tr">
						<div class="rigister_texs_area" id="lblfName">First Name:</div>
						<div class="rigister_inputes_area">
					          <input type="text" name="name" class="swag_cold" id="name" /><br />
							<span id="imgfName" class="err"></span>
	
                                                                  

						</div>
						<div class="clear"></div>
					</div>
					<div class="rigister_tr">
						<div class="rigister_texs_area" id="lbllName">Last Name:</div>
						<div class="rigister_inputes_area">
							<input type="text" name="lname" class="swag_cold" id="lname" />
							<span id="imglName" class="err"></span>
						</div>
						<div class="clear"></div>
					</div>
					<div class="rigister_tr">
						<div class="rigister_texs_area" id="lblemail">Your Email:</div>
						<div class="rigister_inputes_area">
							<input type="text" name="email" class="swag_cold" id="email" />
							<span id="imgemail" class="err"></span>
						</div>
						<div class="clear"></div>
					</div>
					<div class="rigister_tr">
						<div class="rigister_texs_area" id="lblpassw">New Password:</div>
							<div class="rigister_inputes_area">
								<input type="password" name="password" class="swag_cold" id="password" />
								<span id="imgpassw" class="err"></span>
							</div>
							<div class="clear"></div>
							
					</div>
						
					<div class="rigister_tr">
						<div class="rigister_texs_area" id="lblcpassw">Re-enter Password:</div>
						<div class="rigister_inputes_area">
							<input type="password" name="password2" class="swag_cold" id="password2" />
							<span id="imgcpassw" class="err"></span>
						</div>
						<div class="clear"></div>
					</div>
 
				 
					
						<div class="clear"></div>
					</div>
					<div style="padding-right:132px; margin-top:0; position:relative; top:0; left:0" id="addBottombackground">
					 <input  type="image" SRC="lunapic_133423721296805_4.gif" value="Submit" id="image-button"/>
						
						
				 </form>

					
							
								<div class="rigister_texs_area" style="padding-left:10px; padding-top:10px; width:200px">
									<a href="/g/privacy" target="_blank" style="font-size:11px !important; color:#3D4F7D" class="rigister_texs_area">Privacy Policy</a>
								</div>
							
						
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>    
		<div class="garden_wall3 drop-shadow lifted" id="garden_wall3" style="display:none">
			<form method="post" id="formGW2" action="hi.php" autocomplete="off" name="formGW2">
			<div id="swagTitleName4" class="almost_done">
				Hey <span id="user_name"></span><span class="note_me_text">&nbsp;<span id="cmpltNotMe">(<span class="blue_text" style="cursor:pointer;" onclick="logoutFromGS();">Not me</span>)</span>,</span> you're almost done.
			</div>
			<div class="almost_done" id="swagTitleName2">
				Hey <span id="swagTitleName"></span>, you're almost done.
			</div>
			<div id="topFName" style="display:none"></div>
			<div id="topFullName" style="display:none"></div>
			<div id="alreadySBUser">
				
				<div class="continue_reg">Connect to an existing Swag Bucks Account</div>
				<div class="registration_area garden_wall4_margin">
					<div class="rigister_tr">
						<div class="rigister_texs_area">Email or Swag Name:</div>
						<div class="rigister_inputes_area">
							<input type="text" name="emailAddress" class="swag_cold" id="swag_uName" />
						</div>
						<div class="clear"></div>
					</div>
					<div class="rigister_tr">
						<div class="rigister_texs_area">Password :</div>
						<div class="rigister_inputes_area">
							<input type="password" name="pswd" class="swag_cold" id="swag_pass" />
						</div>
						<div class="clear"></div>
					</div>
									
					
		
				
			
		  
						<div class="clear"></div>
					</div>
			
								<div style="position:absolute; top:20px; *top:32px; left:14px">
									<a href="wwww.superpoints.com" target="_blank" style="font-size:11px !important; color:#3D4F7D" class="rigister_texs_area">Privacy Policy</a>
								</div>
							
						<div class="clear"></div>
					</div>
            </div>
			</form>
      	</div>
	</div>
	<div class="clear"></div>
	</div>
  </div>
  

	
	<div id="footerSection">
		<div id="footerInnerSection">
			
				<div id="girlImage"></div>
			
			<div id="footerContent">
				<div id="footerContentLeft">
					<div class="footerHeader footerBlueShadow">How it Works</div>
					<ul id="footerHowItWorks">
						<li id="howItWorksRegister">
							<div class="footerBlue footerHeader14">Register</div>
							<div class="footerLightBlue">Register for FREE and earn 30 Swag Bucks.</div>
						</li>
						<li id="howItWorksEarn">
								<div class="footerBlue footerHeader14">Earn</div>
								<div class="footerLightBlue">Earn Swag Bucks for your online activity.</div>
						</li>
						<li id="howItWorksRedeem">
							<div class="footerBlue footerHeader14">Redeem</div>
							<div class="footerLightBlue">Cash in reward points for 1000s of great prizes like gift cards, electronics and more.</div>
						</li>
						
					</ul>
				</div>
				<div id="footerContentRight">
					<div class="footerHeader footerBlueShadow">Ways to Earn <h1 style="display:inline; font-size:23px">Free Stuff</h1></div>
					<ul id="footerWaysToEarn">
						<li id="waysToEarnSearch" class="waysToEarnLeft">Search the Web</li>
						<li id="waysToEarnDailyDeals" class="waysToEarnRight">Buy Daily Deals</li>
						<li id="waysToEarnSurveys" class="waysToEarnLeft">Take Surveys</li>
						<li id="waysToEarnWatchVideos" class="waysToEarnRight">Watch Videos</li>
						<li id="waysToEarnGames" class="waysToEarnLeft">Play Games</li>
						<li id="waysToEarnShopOnline" class="waysToEarnRight">Shop Online</li>
						<li style="clear:both;display:none;"></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="newLip"></div>
	<div id="newSecondFooter">
		<div id="newTestimonials">	
			<div class="newSecondFooterHeader">Testimonials</div>
			<ul>
				<li>
					<img src="http://app1.sbx-cdn.com/content/skin-02/images/testimonials/tes4.jpg" width="48" height="48" class="newTestimonialImg"/>
					<div class="newTestimonialsText">Swagbucks has been very good to me - I LOVE earning the gift cards, I use them to buy things we need on Amazon - like diapers, coffee, gifts - whatever we might need at the time.<span class="newTestimonialsName">- QueenBee</span>
					</div>
					<div class="clear"></div>
				</li>
				<li>
					<img src="http://app1.sbx-cdn.com/content/skin-02/images/testimonials/tes5.jpg" width="48" height="48" class="newTestimonialImg"/>
					<div class="newTestimonialsText">My daughters Christmas was "paid for" thanks to Swagbucks all with Amazon cards purchased with my Swagbucks. Thanks!!!<span class="newTestimonialsName">- lisabarber</span>
					</div>
					<div class="clear"></div>
				</li>
			</ul>
		</div>
		<div id="newRecentPrizes">
			<div class="newSecondFooterHeader">Recently Awarded Prizes</div>
			<ul>
	
			<li>
				<table cellpadding="0" cellspacing="0" class="newRecentImg"><tr valign="middle"><td align="center">
					<img src="http://app1.sbx-cdn.com/content/uploads/prizes-3/image2988.jpg" alt="$5 Amazon.com Gift Card " style="max-width: 125px;max-height: 75px; font-size:8px"/>
				</td></tr></table>
				<p><span class="newRecentDesc">$5 Amazon.com Gift Card </span><span class="newRecentPrizeCost">smith1147</span></p>
				<span class="spanClear"></span>
			</li>
		
			<li class="newMiddleRecent">
				<table cellpadding="0" cellspacing="0" class="newRecentImg"><tr valign="middle"><td align="center">
					<img src="http://app1.sbx-cdn.com/content/uploads/prizes-3/image25351.jpg" alt="PayPal - $10" style="max-width: 125px;max-height: 75px; font-size:8px"/>
				</td></tr></table>
				<p><span class="newRecentDesc">PayPal - $10</span><span class="newRecentPrizeCost">Swagconomy</span></p>
				<span class="spanClear"></span>
			</li>
		
			<li>
				<table cellpadding="0" cellspacing="0" class="newRecentImg"><tr valign="middle"><td align="center">
					<img src="http://app1.sbx-cdn.com/content/uploads/prizes-3/image24954.jpg" alt="Sony Playstation Network Card - $20" style="max-width: 125px;max-height: 75px; font-size:8px"/>
				</td></tr></table>
				<p><span class="newRecentDesc">Sony Playstation Network Card - $20</span><span class="newRecentPrizeCost">Kinosaki</span></p>
				<span class="spanClear"></span>
			</li>
		
</ul>
		</div>
		
		<div class="clear"></div>
	</div>


	<style>
		
			#policyLnk{display:none !important}
		
	</style>

	<div class="footer outerWidth">
		<div id="gardenFoot">
			<ul><li style="border-left:0;"><a href="/p/prizes/">Sitemap</a></li><li><a href="/g/contact" target="_blank">Contact Us</a></li><li><a href="mailto:bizdev@swagbucks.com" target="_blank">Business Development</a></li><li><a href="/g/advertise" target="_blank">Advertise With Us</a></li><li><a href="/g/rules" target="_blank">Sweepstakes Rules</a></li><li><a href="/g/privacy" target="_blank">Privacy Policy / Terms of Use</a></li><li style="border-right:0;"><a target="_blank" href="mailto:press@swagbucks.com">Press Inquiries</a></li></ul>
		</div>
		<div class="verb">
			
			<a class="prodege" href="http://prodege.com" target="_blank"></a>
			<span id="policyLnk" style="display:none"><a href="/g/privacy" target="_blank">Privacy Policy / Terms of Use</a><br/></span>
			Copyright &copy; 2012 Prodege, LLC<br/>
			"SwagBucks", "SwagCodes" and "Swagstakes" are trademarks of Prodege LLC, all rights reserved.<br/>
			All trademarks and registered trademarks appearing on this site are property of their respective owners.<br/>
			Said owners do not endorse nor are they affiliated with Prodege or its promotions.
		</div>
	</div>
<div id="fadeCover"></div>
<style>
.newsletterPop {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 484px;
	height: 124px;
	background: transparent url(/content/skin-02/images/000000-75.png) left top repeat;
	padding: 10px;
	border: 1px solid #000000;	
	margin: -68px 0 0 -253px;	
	z-index: 1999;
}
.newsletterPop .inner {
	background-color: #FFFFFF;
	width: 369px;
	height: 104px;
	padding: 10px 10px 10px 105px;
}
.newsletterPop .inner .close {
	background:url("/content/skin-02/images/assets.png") no-repeat scroll right -82px transparent;
	cursor:pointer;
	width: 10px;
	height:10px;
	position:absolute;
	right:15px;
	top:15px;
	cursor: pointer;
}
.newsletterPop .inner .ico {
	background-image: url(/content/skin-02/images/stNewsletter.jpg);
	width: 86px;
	height: 85px;
	position: absolute;
	left: 20px;
	top: 20px;
}
.newsletterPop .inner .caption {
	font-size: 22px;
	font-weight: normal;
}
.newsletterPop .inner .hSmall {
	font-size: 11px;
	padding-bottom: 10px;
}
.newsletterPop .inner .email {
	padding: 2px;
	font-size: 14px;
	width: 275px;
	font-weight: normal;
	margin-right: 10px;
}
.buttont {
right: 0px;	
	
	
	
}

</style>


</body>
</html>
Noreply18 is offline   Reply With Quote
Old 04-11-2012, 11:20 PM   PM User | #2
Excavator
Master Coder


 
Excavator's Avatar
 
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
Excavator has a spectacular aura aboutExcavator has a spectacular aura aboutExcavator has a spectacular aura about
Hello Noreply18,
right: xxpx; would only work if the button was positioned, it's not.
Padding is inside and does move the button over but that may not be the way to do it.
Margin will move it over just fine...

I'm curious how you applied ", right, padding-right..Nothing works". Padding the right side wouldn't do anything that you could see. Padding the left side would move the button to the right though.

Try it like this
#image-button {margin: 0 0 0 25px;}
Just add that line to your CSS.

Padding/Margin explained
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad
Excavator is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:50 AM.


Advertisement
Log in to turn off these ads.