SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form not listening to HTML

    Hey,

    I'm having trouble putting my AWeber code into a table on my website. I have managed to achieve placing the AWeber script into a table on a blank HTML file, and the width declared is working fine. However, as soon as i place this exact same code into my webpage layout, it doesn't listen to the width value at all the text expands out really wide.

    Here are my two examples:

    (working fine on basic HTML page)
    http://feedthefitness.com/test/untitled.html

    (Same code, but not working)
    http://feedthefitness.com/test/blank.html

    I'm not calling the width value in the CSS as it doesn't seem to read properly as if i call it in the HTML, which is why i have declared it in the <table> tag. Can anyone give some insight as to why this is happening?

    I was also wondering i could get some help with positioning. I would like to place the sign up box to the right of the content box. I presume i will need to set the position to absolute then use margins to position it correctly. However because it is in a table can i declare this within the table declaration in the CSS along with a margin-left value so that it sits bumping up against the right of the content box and not, when viewed on a larger screen, out of this position?

    Appreciate any help

    CSS for form:

    Code:
    table.main {
    	border-style: dashed;
    	border-color: red;
    	padding: 10px;
    	background-color: silver;
    	position: absolute;
    	float: right;
    }
    
    .news {
    	text-align: center;
    	font-family: arial;
    	font-size: 18px;
    }

    HTML

    Code:
    </head>
    <body id="background">
    	
    
    	<div id="head_back"></div>
    	
    	<div id="wrapper">
    		
    		<div id="head_top"></div><!-- #head_top -->
    		<div id="head_middle">
    			
    
    		
    			<div id="nav"> 
    				<div class="nav_icon">
    					
    
    				</div><!-- #nav_icon -->
    		
    			</div><!-- #nav -->
    		
    		</div><!-- head_middle -->
    
    		<div id="head_bottom"></div><!-- head_bottom -->
    						
    		<div id="content">
    			
    			<div id="sale"></div><!-- #sale -->
    							
    			
    			<table class="main" width="250">
    				<tr>
    			    	<td>
    
    					<div class="news">Join The Paleo Cookbook Newsletter <br> For a Free Subscription To Receive <br> Paleo Friendly Recipes and Paleo <br> Diet Cooking Tips</news>
    
    			<p>
    			        <script type="text/javascript" src="http://forms.aweber.com/form/38/648160138.js"></script>
    			</p>
    
    			    	</td>
    				</tr>
    			</table>
    			
    
    		</div><!-- #content -->
    
    
    </div><!-- #wrapper -->	
    	
    	<div id="footer">
    		<div id="footer_inner">
    
    		</div><!-- #footer_inner -->
    					
    		</div><!-- #footer -->
    
    
    </body>
    </html>

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You have this CSS rule:

    table {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    }
    Put the width for this specific table in table.main, not as an attribute, stick to CSS

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    167
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh right, i didn't realise that table declaration would effect the table.main when called because I'm calling 'table class="main" but i can see now when changing it that it does effect it.

    I have now made this change.

    Just quickly in regards to positioning. The current placement i have set, will this keep the signup box in the same position no matter how wide the display screen is?

    http://feedthefitness.com/test/blank.html

    CSS:

    Code:
    table.main {
    	width: 250px;
    	border-style: dashed;
    	border-color: red;
    	padding: 10px;
    	background-color: silver;
    	position: absolute;
    	margin-left: 800px;
    	margin-top: 140px;
    }
    
    .news {
    	text-align: center;
    	font-family: arial;
    	font-size: 18px;
    }

    Thanks for such a fast response


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •