I have a site which I'm just starting for hosting services. This is at http://www.solutions-web-hosting.com/step_one.php and if you click here you'll be taken to the signup screen and this template uses a style sheet with the following line at the top: * {margin:0 auto;padding:0;font:12px/12px Arial,sans-serif; text-align:center;border:0 none #000;} This aligns everything centered. The page above is created by piecing together a header.php file a header2.php file, then the program inserts the signup code, and then finishes with footer.php. The goal is to get the form field inputs to be aligned LEFT so it looks normal. is this possible without rewriting the template? I can probably do this with just tables. The text-align:center attribute in the first line is causing all this. If I make it left, the entire page will be left centered, and that can't be. So, just before the program inserts the signup code, is there a statment I can use to overide the text-align:center so all form input fields will be aligned left? Many Thanks.
That markup needs some SERIOUS repair, looks like its straight from 2001. You're not even using a doctype... I don't know where to start but for your solution, you can either make everything in a form left aligned by doing form * {text-align:left;} after your universal rule.
Hi, Thanks very much for your response. I didn't write this thing. This was provided courtesty of http://www.hostgator.com/templatemonster/ I following the instructions on how to make the signup page per the whm autopilot people. I got it working now! Thanks much. Scot
While this does center the form data, it just isn't acceptable. I need the align-text:center attribute for the top portion of the page, and then everything the program does needs to be left justified. Is this even possible?
remove text-align:center and add align="center" in all <tr> its still ugly markup. if i were you, ditch this template and try to make a better one
It's possible to do what you want, with different code. You'd have a box on top with text-aligned center, and another box with the form/programme with text-align being left (and you probably don't want that on the far-left side of the page, so there'd be left padding in there). Screwy templates I think aren't made to be adjusted by hand. The code works (badly) but only if you leave it as-is. Edit: actually, some of it doesn't work. Why is there a radio button for Domain Name Options-- I have a domain and will update my nameservers? I can't deslect it, so what's the point of the button? It should more be a title for the other three radio buttons. Click to Continue is not clickable. Another example why you should change the code: At the beginning of the body, the code begins with <tr> but there's no <table> tag in the beginning.
They say you learn by doing. And boy do I have a lot to learn. I tried to see if I could take the code and re-write it. I'm not sure how successful I was with the html. The css, I still know too little. Only posted a bit of the beginning, and had trouble doing the display:inline for the redundant menus. Also, I know nothing of javascript or php. I think the javascript was for the tables, but I wasn't sure so I left the script in there commented out. I'd love to know what all is wrong with this one, good learning experience for me (still actually didn't get to the forms section of the book yet, just skipped ahead and copied some stuff). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Solutions Web Hosting </title> <meta http-equiv="Contant-Type" content="text/html; charset=utf-8" /> <link href="solutionsweb.css" rel="stylesheet" type="text/css"> <!-- <script language="JavaScript"> var border_width='1px'; var border_style='solid'; var border_color='#3B3B3B'; var select_color='#e7e7e7'; var off_color='#ffffff'; var border_on = border_width + " " + border_style + " " + border_color; var border_off = border_width + " " + border_style + " " + off_color; function select_row(what, num) { if (navigator.appName == 'Microsoft Internet Explorer') { row = document.all[what + "_row" + num.toString()]; if (!row) return; row.style.backgroundColor = select_color; lcell = document.all[what + "_left_cell" + num.toString()]; rcell = document.all[what + "_right_cell" + num.toString()]; lcell.style.borderLeft = border_on; lcell.style.borderTop = border_on; lcell.style.borderBottom = border_on; rcell.style.borderRight = border_on; rcell.style.borderTop = border_on; rcell.style.borderBottom = border_on; var i = 0; while(i < 10) { if (!document.all[what + "_row" + i.toString()]) break; if (i != num) { row = document.all[what + "_row" + i.toString()]; lcell = document.all[what + "_left_cell" + i.toString()]; rcell = document.all[what + "_right_cell" + i.toString()]; row.style.backgroundColor = off_color; lcell.style.borderLeft = border_off; lcell.style.borderTop = border_off; lcell.style.borderBottom = border_off; rcell.style.borderRight = border_off; rcell.style.borderTop = border_off; rcell.style.borderBottom = border_off; } i++; } } else if (navigator.appName == 'Netscape') { row = document.getElementById(what + "_row" + num.toString()); if(!row) return; row.style.backgroundColor = select_color; lcell = document.getElementById(what + "_left_cell" + num.toString()); rcell = document.getElementById(what + "_right_cell" + num.toString()); lcell.style.borderLeft = border_on; lcell.style.borderTop = border_on; lcell.style.borderBottom = border_on; rcell.style.borderRight = border_on; rcell.style.borderTop = border_on; rcell.style.borderBottom = border_on; rows = document.getElementsByName(what + "_row"); lcells = document.getElementsByName(what + "_left_cell"); rcells = document.getElementsByName(what + "_right_cell"); for(var i = 0; i < rows.length; i++) { if(i != num) { rows[i].style.backgroundColor = off_color; lcells[i].style.borderLeft = border_off; lcells[i].style.borderTop = border_off; lcells[i].style.borderBottom = border_off; rcells[i].style.borderRight = border_off; rcells[i].style.borderTop = border_off; rcells[i].style.borderBottom = border_off; } } } else { } } </script> --> </head> <body> <div id="header"> <h1>Solutions Web Hosting</h1> <h2>We Host Your Site & Help You Get to the Top of the Search Engine Results!</h2> <div id="menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="webhosting.html">HOSTING PLANS</a></li> <li><a href="support.html">SUPPORT</a></li> <li><a href="testimonials.html">TESTIMONIALS</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="search-engine-optimization.html">OPTIMIZATION</a></li> <li><a href="templates.html">PREMIUM TEMPLATES</a></li> <li><a href="contactus.html">CONTACT US</a></li> </ul> </div> <div id="menu2"> <ul> <li><a href="index.html">home</a></li> <li><a href="aboutus.html">about us</a></li> <li><a href="contactus.html">contact us</a></li> </ul> </div> <img src="head.jpg" width="613" height="289" alt="Photo of a pair of badass-looking servers and text stating, Reliable webhosting solutions of the highest quality." /> </div> <!-- end header --> <div id="formbody"> <form method="post" action="/step_one.php"> <input type="hidden" name="sid" value="fffd30c277695a4e99a1584dba1aafec" /> <input type="hidden" name="gid" value="1" /> <ul class="formlinks"> <li><a href="http://solutions-web-hosting.com/step_one.php?sid=fffd30c277695a4e99a1584dba1aafec&gid=1">Select a Package</a>>></li> <li>Domain Options >></li> <li>Account Addons>></li> <li>Account Information</li> </ul> <p>>><a href="?gid=1&sid=fffd30c277695a4e99a1584dba1aafec"> View our Solutions Hosting Packages</a></p> <br /> <p>>> Domain Name Options</p> <!-- Dunno if the double arrows meant the user was following a path or just decoration between clickies. Probably should just be an image like it was --> <input type="radio" name="domain_registration" value="0" id="domain_registration0" checked="checked"/> <label for="domain_registration0">I have a domain and will update my nameservers.</label> <br /> <input type="radio" name="pid" value="2" /> <label class="bluebox" for="Personal Webhosting Package">Personal Webhosting Pkg - No Setup Fee"<br />Choose Payment Term: <select name="payment_term[2]"> <option value="semi_annual">$0.10 USD Semi-Annually</option> <option value="annual">$35.99 USD Annually</option> </select><br />100 MB Web Space, 2000 MB Transfer, Unlimited Email Addresses</label> <input type="radio" name="pid" value="3" /> <label class="bluebox" for="Standard Webhosting Package">Standard Webhosting Pkg. - No Setup Fee<br />Choose Payment Term: <select name="payment_term[3]"> <option value="semi_annual">$29.99 USD Semi-Annually</option> <option value="annual">$59.99 USD Annually</option> </select><br />500 MB Web Space, 10000 MB Transfer, Unlimited Email Addresses</label> <input type="radio" name="pid" value="4" /> <label class="bluebox" for="Corporate Webhosting Package">Corporate Webhosting Pkg. - No Setup Fee<br />Choose Payment Term: <select name="payment_term[4]"> <option value="semi_annual">$39.99 USD Semi-Annually</option> <option value="annual">$69.99 USD Annually</option> </select><br />2000 MB Web Space, 30000 MB Transfer, Unlimited Email Addresses</label> <p>Choose Payment Method:</p> <input type="radio" name="payment_method" value="1" checked="checked" id="o2" /> <img src="http://solutions-web-hosting.com/admin/themes/blue/images/paypal.gif" alt="Paypal logo" /> <!-- dunno what this is; onclick='o2.checked=true' --> <br /> <p>>> Promotions / Referrals</p> <label for="promotion_code">Enter Promotion Code:</label> <input type="text" name="promotion_code" id="promotion_code" value="" /></p> <p> <label for="referrer_id">Enter Referrer ID:</label> <input type="text" size="30" maxlength="255" name="referrer_id" value="" /></p> <!-- saving color='#e8e8e8' for when I know where it goes --> <p><input type="submit" name="submit" value="Click to Continue"/></p> </form> </div> <!-- end formbody --> <div id="footer"> <ul class="formlinks"> <li><a href="tos.html">Terms and conditions | </a></li> <li><a href="aboutus.html">About us | </a></li> <li><a href="faq.html">FAQ | </a></li> <li><a href="support.html">Support</a><li><br /> <li>Copyright 2003-2005 Company Name. All rights reserved.</li> </ul> </div> </body> </html> Code (markup): A bit of the beginning of the CSS: /* CSS for Solutionsweb */ *{ margin:0; padding:0; } img { border:none; } body { background-color: #39333f; color: #000; font: normal 80%/120% tahoma, sans-serif; } #header { width: 623px; height: 282px; margin-right: auto; margin-left: auto; padding: 10px; } h1, h2 { font-family: Arial, Helvetica, sans-serif; color: #fff; text-align: left; } h1 { font-size: 20px; font-weight: normal; padding: 0, 5px, 10px, 5px; } h2 { font-size: small; padding-top: 5px; } #menu { text-align:left; padding-top:5px; padding-bottom:5px; width:25%; } #menu li { padding:20px, 10px, 10px, 0; color:#d7d0be; font-size:10px; font-weight:bold; border-bottom:1px solid #5c5664; } #menu2 { list-style-type:none; text-align: right; color:#888290; display: inline; } a { font-size: 10px; font-weight: bold; } a:link { color:#d7d0be; text-decoration: none; } a:visited { color: #d7d0be; text-decoration: none; } a:hover { text-decoration:underline; font-weight: bold; color:#d7d0be; } #formbody { width: 601px; height: 474px; background-color: #fff; text-align: left; margin-right: auto; margin-left: auto; padding: 10px; } ... Code (markup): Some of the menus are screwy too, couldn't tell if above the form the words were supposed to tell the visitor where they were or if it was indeed a menu. I combined the three "head" images into one (the pic of the server). I'm not sure why they were in three pieces. http://s34.photobucket.com/albums/d136/schroedingerscat/?action=view¤t=head.jpg The background colour was accomplished originally with a repeated image. Not sure why. Anyway, I do NOT advise the OP to use this; this was just my trying to see what would come out. : )