HTML - Adding A Column To The Left Of The Page
I've attached the code for a template I'm wanting to use.
I want to add a column to the left side of the page that runs the length of the page. Is there anyone out there who can assist me with the code to do that. I'd be exceedingly grateful. I'm afraid I'm table dyslexic. Thanks in advance to anyone who can help. Similar TutorialsI have a left menu column but it's not stretching down the length of the page. The page is quite long and when the links are finished on left column it just ends and as it has abackground colour it looks a little strange. It is floated left and the main_section is also floated left. It is the main section div that is long. I was thinking because this is in a div that the left coumn is also in that the left column would therefore stretch to the length of it's parent div. Any ideas? http://absolute-websites.com/services.html is the link so you can see what I'm talking about. Here is a section of the HTML : HTML Code: <div class="left_column"> <div class="breadcrumb"><p><a href="index.html">home ></a>services</p></div> <div class="icons"><p><a href="services.html#websiteProduction"><img src="images/webIcon-01.png" title="web building" alt="web building icon"/></a></p></div> <div class="icons"><p><a href="services.html#hosting"><img src="images/hostingImgIcon-01.png" title="Hosting & Domain Names" alt="Hosting & Domain Names icon"/></a></p></div> <div class="icons"> <p><a href="services.html#seo" ><img src="images/seo2Icon-01.png" title="Search Engine Optimisation" alt="Search Engine Optimisation icon"/></a></p></div> <div class="icons"> <p ><a href="services.html#marketing"><img src="images/advertsIcon-01.png" title="Marketing" alt="marketing icon"/></a></p></div> <div class="icons"><p ><a href="services.html#design" ><img src="images/designImgIcon-01.png" title="Design" alt="Design icon"/></a></p></div> <div class="icons"> <p ><a href="services.html#photo" ><img src="images/photoIcon-01.png" title="Photoditing" alt="Photoediting icon"/></a></p></div> <div class="icons"> <p><a href="services.html#video" ><img src="images/videoIcon-01.png" title="Video Production" alt="Video Production icon"/></a></p></div> </div> <div id="main_content" class="fl"> <h1 class="h1SecHead" >>SERVICES</h1> I have the following Web Page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-gb" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <body > <div style="margin:auto;text-align:center"> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> </div></body> </html> If I add another DIV with an image inside it, the images all move to the left by 8 to 10 pixels. This is the second version of the page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-gb" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> </head> <body > <div style="margin:auto;text-align:center"> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> <div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div> </div></body> </html> I have no idea why the page center moves to the left, but it means that I can't get my page banner to appear the same on every page. (I've stripped out all the extra content and codes to just leave the offending images.) I primarily use Firefox, but the same is happening in IE and Opera. Can anybody tell me what's happening? (I apologise if this is a well known, frequently asked question, but I couldn't find an answer and this is driving me up the wall, so any help is appreciated.) Hi all, Im afraid im getting a little frustrated. My fault.. Im new here but need your help. I run a forum, phpbb3 based but the style im currently using is very much HTML based. I am looking to have a left hand column within my forum but really dont know how to do it, well to add to what i already have. I think for you to know what style docs i have you would have to have a look yourself or look at my existing source code.. http://www.pricelessparrots.com/phpbb3/ Ok i have the new style ' VistaX '. This link will take you to the original download: It can be found he It seems this style is mostly created using HTML. Could someone please tell me how to add a left hand column to the page. I would like it to be on the left hand side all the way down after the header. I thought i would have a go at it but becoming increasingly frustrated with it. such a simple thing but i cannot get it. Do i float it, using css or what? I thought about using a seperate page to create the table and then include it into the doc but this doesnt work either. Plz help.. Paul Hey, I have a sample page he www.darkdayssoftware.com/indexotheridea.html How do I make space for and create a column down the left and right (e.g. a space for adverts) and ensure that when I resize the web paste, the main column in the middle doesn't overlap the column to the left, and similarly the column on the right doesn't overlap the column in the middle? Thanks What would be the best way to center the items listed in the left column? Thank you. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.11 Transitional//EN"> <html><head> <title>test</title> <script src="java.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="styles.css"> <style type="text/css"> .test{background-color:#ffdead;} #header { width: 830px; margin-left: auto; margin-right: auto; margin-top: -15px; background-color: #ffdead; } #header_table { width: 75%; border-collapse: collapse; border: solid 1px; border-color: #b7b7b7; } .header_bar { padding: 0px; margin: 0px; border-bottom-style: solid; border-bottom-width: 10px; border-bottom-color: #b7b7b7; background-color: #800000; width: 150px; border-collapse: collapse; border-right-width: 0px; border-left-width: 0px; } .header_body { padding: 0px; margin: 0px; border-left-style: solid; border-left-width: 1px; border-left-color: #b7b7b7; border-right-style: solid; border-right-width: 1px; border-right-color: #b7b7b7; } </style> </head> <body bgcolor="#ffffff"> <table id="header_table" align='center' cellpadding='0' cellspacing='0'> <tr> <td class="header_bar" colspan='2'> </td> </tr> <tr> <td align='center' colspan='2'> <img src="imgi/img11.jpg" height="134" width="461"> <img src="imgi/topimg2.jpg" height="160" width="309"> </td> </tr> <tr> <td class='header_body' valign='top' width="200"> <form action="login.asp" method="post"> <table width="100%" height="100%" align='center' cellpadding="0" cellspacing="0" border="0" > <tr><td valign="top" class='header_bar' colspan='2'> </td></tr> <tr> <!-- SIDE MENU --> <% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %> <!-- MENU FOR LOGGED MEMBER ONLY --> <td colspan="2"><br><br>Welcome <i><%'=Session("PMMS_NAME")%></i><br /><br /></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="profile.asp">My Profile</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="_purchase.asp">Purchase</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="newsletter.asp">Newsletters</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="members.asp">Member List</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="members_by_group.asp">Group Member List</a></td> </tr><tr> <td width="15">º</td> <td><a class="lnk" href="file_cate.asp">File Repository</a></td> </tr><tr> <td width="15">º</td> <td><a href="login.asp?logout=True">Log Out</a></td> </tr> <!-- [ MENU FOR LOGGED MEMBER ONLY ] --> <% Else ' IF NOT LOGGED IN THEN SHOW THE LOGIN FORM%> <!-- INCLUDE LOGIN FORM --> <br><br><td colspan='2'><br><br>Username:<center><br /><input class="textbox" type="Text" name="username" value="<%=Trim(Request.Cookies("USERNAME"))%>" maxlength="25" size="20" /></td> </tr><tr> <td colspan='2'><br>Password:<center><br /><input class="textbox" type="Password" name="password" value="" maxlength="25" size="20" /></td> </tr><tr> <td> <br><input type="Checkbox" name="rem" value="1"<%If NOT Trim(Request.Cookies("USERNAME")) = "" Then%> checked<%End If%> />Save Username<br /> <input style="width: 50%;" type="Submit" value="Login Now" /><br /><br /><a href="reminder.asp">Password Reminder</a> </td> </tr> <tr> <td> <br /> <input type="Hidden" name="mode" value="login" /><input type="Hidden" name="ref_page" value="<% If Len(Trim(Request.QueryString("ref_page"))) = 0 Then%><%=Request.ServerVariables("URL") & "?" & Request.QueryString%><%Else%><%=Request.QueryString("ref_page")%><%End If%>" /> <!-- [ INCLUDE LOGIN FORM ] --> <% End If %> </td> </tr> <tr> <td> <br /><br /> <img src="img/linkimg1.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="index.asp"> HOME</a><br /><br> <img src="img/linkimg3.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> FAQ</a><br /><br> <% If Session("PMMS_IN") = "True" Then '// CHECK IF MEMBER IS LOGGED IN ALREADY %> <img src="img/_example/arrow_gray_top_inverse_b.gif" width="15" height="14" alt="" border="0" /><a class="MainMenuLNKExample" href="login.asp?logout=True">LOG OUT</a> <% Else %> <img src="img/linkimg2.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> REGISTER</a><br /><br> <% End If %> <img src="img/linkimg4.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> TERMS OF USE</a><br /><br> <img src="img/linkimg5.gif" width="25" height="24" alt="" border="0" /><a class="MainMenuLNKExample" href="register.asp"> CONTACT US</a><br /><br /> </a> <!-- [ SIDE MENU ] --> <br /><br /> </td> </tr> </table> </form> </td> <td class='header_body'> <!-- MAIN PAGE CONTENT --> Hello, I need to create a 3 -column lay out with the left and right columns having 200px each and the middle column take the rest. Here is my html markup: HTML Code: <div style="width: 100%"> <div style="width: 200px; float:left;">Left column</div> <div style="width: 100%; float:left;">Middle Column</div> <div style="width: 200px; float:left;">Right Column</div> </div> It's not working for me . Please help. This could be an HTML or CSS problem, but I can't figure out what's causing this and it's driving me nuts! The left column on my website will not stay a fixed width of 175px in IE 8. That seems to be the only browser having a problem. Here's the link: http://www.jrsart.net/testarea/paull...cientists.html I've linked the page that has it the worst, but if you visit the other pages and keep an eye on the left column's border, you'll see it keeps moving. Please help! I'm rapidly running out of time to fix this issue, so any advice would be greatly appreciated! Good day, I am brand new here in this forum. So many knowledgeable folks here. I am relatively new to web design. I typically use templates and themes and tweak them. I can navigate a CSS doc and html to make changes, etc. However, I have a client who has an existing site that she wants to keep the aesthetic of and so I am using what the previous designer left. It is a simple html page with tables. Simple enough. Very elegant visually. No need to SEO really so it works. She has asked if we can make the left column of a two column table scroll independently. The page content is about over 6000px. The scroll column will contain a page outline and other text that will include internal targeted links. This is outside my skill set, but I want to learn. Have searched the net and found some suggestions but want it to be clean and ended up here. There is no style sheet other than the ie6 sheet. Page is he http://www.themedeaproject.com/proposaltestpage.html no graphics are loaded. Can anyone point me to a good tutorial or have any suggestions? Thanks! BlueEyedMonkey aka Tatyanna Okay I know IE 7 problems are nothing new but being that I am fairly new at this and I am reading everything I can and I am still not catching up with how to correct it. I have the website up on a test server at http://www.vsncom.com/sterling I am working on a mac and the site works fine on IE 5.2 for mac and any other browser. However, IE7 causes a huge shift in the whole page to the left. And a few other elements are slightly shifted as well. The bottom nav is up a little higher than it belongs. The three pictures on the left are shifted further right. And that is all that I get shown when I capture the screen from net render and such. (Please look at attached picture to see what IE7 gives me) So, im not sure what else may be going on. If I can get the whole page to come back to the left then I can address the other issues maybe. But does anyone have any ideas how to do this. Please. I appreciate the help. I have been trying to figure this out for a week now and reading everything I can find online and trying anything I can think of so please save me. Matt Hi! This is was my blog looks like at the moment: http://neverrgrowold.blogspot.com/ I would like to add a 3rd column to my 2 column layout. I know this will mean resizing the other two columns which I know how to do.. I just have no idea to add another column to the right. Here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <title>Never Grow Old</title> <style type="text/css"> #navbar-iframe{height:0; visibility:hidden; display:none;} body {background-color: #000; font: normal 10pt Trebuchet MS; color: #e5e5e5; cursor: crosshair; line-height: 75%; scrollbar-face-color: #ddd; scrollbar-highlight-color: #fff; scrollbar-3dlight-color: #ddd; scrollbar-darkshadow-color: #ddd; scrollbar-shadow-color: #fff; scrollbar-arrow-color::#fff; scrollbar-track-color: :#ddd;} a:link, a:visited, a:active {color: #e5e5e5; text-decoration: none; text-transform: none; font: normal 8pt Trebuchet MS; cursor: normal;} a:hover {text-decoration: ; text-transform: None; font: normal 12pt Trebuchet MS; cursor: normal; color: #FF4C79;} blockquote {font: normal 8pt trebuchet ms; color:#e5e5e5; padding:5px; border-left:7px solid #ddd; background-color:#000;} blockquote:hover {-moz-border-radius:4px; padding:5px; border:2px solid #000; } blockquote:first-letter {background: #000; font: italic 15pt "Georgia"; color: #FF4C79;float: padding: 5px; text-transform: uppercase;} .head {text-align: center; font-family: impact; font-size:12pt; color:#CCFF66; text-align: left; text-transform: none; line-height: 9pt; font-style: none; background:#000; padding: 5px; } .content {font-size: 9pt; font-family: Trebuchet MS;color:#e5e5e5; background: #000; line-height: 14px; padding:10px; border: 2px solid #111; } .headline1{font:normal 30pt Courier New; color:#e5e5e5; letter-spacing:-3px; text-transform:uppercase; line-height:100%; } </style> <script type="text/javascript"> /*********************************************** * Disable select-text script- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ //form tags to omit in NS6+: var omitformtags=["input", "textarea", "select"] omitformtags=omitformtags.join("|") function disableselect(e){ if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1) return false } function reDisable(){ return false } if (typeof document.onselectstart!="undefined") document.onselectstart=new Function ("return false") else{ document.onmousedown=disableselect document.onmouseup=reDisable } </script> <script language=JavaScript> <!-- //Disable right click script III- By Renigade (renigade@mediaone.net) //For full source code, visit http://www.dynamicdrive.com var message=""; /////////////////////////////////// function clickIE() {if (document.all) {(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("return false") // --> </script> <body> <div style="position: absolute; top: 10px; left: 188px; width: 500px;"> <span class="headline1"><img src="http://i44.tinypic.com/bfoq69.png"/> </span><br> </div> </div> <div style="position: absolute; top: 440px; left: 525px; width: 600px;"> <Blogger> <div class="head">@ <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> </div> <div class="content"><$BlogItemBody$></div><p> </Blogger> </div> <div style="position: absolute; top: 440px; left: 190px; width: 310px;"> <div class="head">Welcome! </div> <div class="content"> <div><img src="http://24.media.tumblr.com/avatar_66b2c19ef795_64.png" align="left" /><font color=#e5e5e5>I believe we never truly grow old unless we let ourselves. You'll find anything and everything to do with your childhood if yyou grew up anywhere between the late 80's to the early 2000's. So sit back, enjoy your stay, and take a trip down memory lane ;) </font></div> <p> </div><p> <div class="head">Memory Lane.</div> <div class="content"> ghghghghh </div><p> <div class="head">Support</div> <div class="content"> Place your tagobard here, <a href="http://cbox.ws">Cbox</a> recommended<BR> </div><p> <div class="head">Links</div> <div class="content"> Place all your links here,<br> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> <a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a> </div><p> <div class="head">Looking Backwards.</div> <div class="content"> <BloggerArchives> <BloggerArchives> <a href="<$BlogArchiveURL$>"> <$BlogArchiveName$></a> </BloggerArchives></a><br><br> </div><p> <div class="head">Credits</div> <div class="content"> Designer @<a href="http://www.blogskins.com/me/theomorphi-c">theomorphi-c</a>,<br> Basecode: <a href="http://www.blogskins.com/me/sacrificelove-">sacrifice</a><a href="http://love--bites.blogspot.com">love-</a><br> </div><p> </div> </body> I've been trying to figure it out with my basic html knowledge for a while now and I can't get it, I would be really appreciative if someone could help me out. Thanks!! Hi, I'm new here but know a little bit about making websites. This one has seemed to stumped me, my webpage he Edit: link removed, problem solved and the other links: Order online, testimonials, about us, and contact us all render exactly in firefox, however my products page gets shoved to the left a couple of clicks for some odd reason. I narrowed it down a bit; it seems as if its only letting me to post a few paragraphs until it does it, meaning i can remove the animation and some paragraphs, and it looks the way i want it, but when I add the paragraphs back even without the slideshow the problem persists. Using expression web 3. Thank You a bunch for your help. Hello Everyone, i am new to HTML, i am trying to develop my first website. I am using asp.net , C#, HTML, CSS and Visual studio2008 on windows Xp I had a page, in that i moved the tables to center. after moving the tables to center i found the white space on the left and right sides of the page. Now i want to fill the white space which is on the left and right sides of the page with the black color. Can anyone please help me thank you regards john. I'm just starting to get into HTML / CSS and I had a question I was hoping someone would be able to give me a hand with... The page I'm working on has a logo in the top left corner that gets cut off when the browser window is reduced to a smaller size. The left navigation bar, however, always appears in the browser window, regardless of size. I'd like to have this left side "anchor" to include the logo so that it always appears. Please let me know if you require additional information or if I have not described the issue clearly enough. Thank you! How can I make the text appear at left bottom... I have 3 taGS RETURNING DATA FROM sql: <p> #TOC# </p> <p> BUSINESS POLICY TRADEMARK REGULATIONS. </p> <p> #Qry.USERSIGN# </p> I want the text from this tag to appear one after other at left bottom: For example: This is basic algebra lesson. BUSINESS POLICY TRADEMARK REGULATIONS. Smith How to do that? Any advise is appreciated.RosieGp Hi there I'm trying to make a website for a friend - http://wwwdev.cfpaddler.co.uk. At the top of the site is a 1x40 pixel (WxH) GIF - a horizontal gradient - that is told to have a width of 100% so that it takes up the entire width of the browser window, regardless of resolution. I want to put a 250-pixel-wide JPEG immediately to the left of this GIF and then make the GIF take up the rest of the space available. I tried setting the GIF width to 100% again but it puts the JPEG on the top line and then stretches the GIF across the entire window just beneath it. I'd be happy to use PHP (although I'm a beginner at it) to maybe detect the user's browser window width (if it's possible?) then perform a calculation to find what 100% width minus 250 pixels is... Any suggestions are very much appreciated; thanks for taking the time to read this. Chris Images in question are http://wwwdev.cfpaddler.co.uk/images/top_border.gif and http://wwwdev.cfpaddler.co.uk/images/top_logo.jpg. Hi. I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this? Thanks. I have a Web Page with a Form on it. How/where can I add a left hand column that will run all the way down the left side? Here is the page code, and I've attached an image of what it looks like now. Thanks. Code: <?php global $account; ?> <link href="../style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <link href="../style.css" rel="stylesheet" type="text/css" /><style type="text/css"></style> <table> <table cellpadding="0" width="770" height="100%" cellspacing="0" bgcolor="#FFFFFF" style="border-right: solid 1px #6b6b6b"> <form method="POST" action="index.php"> <td width="140" rowspan="21" id="menu"> </td> <td> </td> <input class='field' type='hidden' name='command' value='account'> <input class='field' type='hidden' name='param' value='signup'> <tr> <td class='pageTitle'><span class="hLine"> <font face="Arial" color=#A30100" size="3" Style="padding-left: 50px;"> <b>Create New Account</b></span></td> <td class='pageTitle'> </td> </tr> <tr> <td class='fieldLabel' width="30%"> <font face="Arial" color=#000000" size="2" Style="padding-left:50px;"> Membership Type</td> <td align="right">[account_type_panel]</td></tr> <tr> <tr> <td class='fieldLabel' width="30%"> <font face="Arial" color=#000000" size="2" Style="padding-left:50px;"> Email Address</td> <td><input class='field' type='text' size='35' maxlength="30" name='user_name' value='<?=$account->user_name ?>'> <span class='requiredField'>* </span><br> <span class='errorMessage'><?=$account->get_error('user_name') ?></span></td> </tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Re-Confirm Email Address</td> <td><input class='field' type='text' size='35' maxlength="50" name='email' value='<?=$account->email ?>'> <span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('email') ?></span></td> </tr> <tr> <td> </td></tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Password</td> <td><input class='field' type='password' size='35' maxlength="30" name='password' value='<?=$account->password ?>'> <span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('password') ?></span></td> </tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Re-Enter Password</td> <td><input class='field' type='password' size='35' maxlength="30" name='reenter_password' value='<?=$account->reenter_password ?>'> <span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('reenter_password') ?></span></td> </tr> <tr> <td> </td></tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;">First Name </td> <td ><input class='field' type='text' size='35' maxlength="50" name='first_name' value='<?=$account->first_name ?>'> <span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('first_name') ?></span></td> </tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Last Name</td> <td><input class='field' type='text' size='35' maxlength="50" name='last_name' value='<?=$account->last_name ?>'> <span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('last_name') ?></span></td> </tr> <tr> <td> </td></tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Address</td> <td><input class='field' type='text' size='35' maxlength="70" name='address' value='<?=$account->address ?>'> <span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('address') ?></span></td> </tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Address 2</td> <td><input class='field' type='text' size='35' maxlength="70" name='address_second' value='<?=$account->address_second ?>'></td> </tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> City</td> <td><input class='field' type='text' size='35' maxlength="50" name='city' value='<?=$account->city ?>'> <span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('city') ?></span></td> </tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> State/Province</td> <td><input class='field' type='text' size='35' maxlength="35" name='phone' value='<?=$account->phone ?>'><span class='requiredField'> * </span></td> </tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Zip/Postal Code</td> <td><input class='field' type='text' size='35' maxlength="35" name='zip_postal_code' value='<?=$account->zip_code ?>'> <span class='requiredField'> * </span><span class='errorMessage'><?=$account->get_error('zip_code') ?></span></td> </tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> Country</td> <td><input class='field' type='text' size='35' maxlength="35" name='mobile_phone_number' value='<?=$account->mobile_phone_number ?>'> <span class='requiredField'> * </span></td> </tr> <td> </td></tr> <tr> <td class='fieldLabel'><font face="Arial" color=#000000" size="2" Style="padding-left: 50px;"> I Have Read and Agree With The <A href='legal.php'><font color=#000000" size="2";"><u>Terms & Conditions</u></a></td><td><input type="checkbox" name="terms" value="true"><span class='requiredField'> * </span></td> </tr> <tr> <td> </td></tr> <tr> <td> </td></tr> <tr><td class='hLine' align="right"> </td> <td class='hLine' align="right"> <span class='requiredField'> * </span><font color="red"> Required Field</font></span></td> </tr> <tr><td align="right"> </td> <td align="right"><input name="submit" type='submit' class='button' value='create' /></td> </tr> <tr><td> </td> <td> </td> </td> </form> </table> Hi everyone, I'm trying to work out how to have a left and right side "column" both resize when the window is resized. An example of what I am after is : http://www.news.com.au/heraldsun/0,,,00.html. I played with margin-left and -right but don't think it is quite what I am after. Thanks. Hello everyone. I am having the worst time trying to figure this one out. I created a site for a hair salon and every time the page loads for the first time, it jumps from right to left. Does anyone know why it is doing this? There is an example link below. Thank you so much for taking the time to read this. http://www.erizzo.net/studiod/index.html Hi All, I have just started my first page and there is a little problem with it that is driving me nuts. Basically, Im trying to make a simple page where the content is centered and there are two background columns on the right and left: we see these pages everywhere. Here is the code (pseudo) I am trying <body> <centered content> <body_divis> <pic> insert picture (top left) <pic> </body_div> </centered content> <body> now im using a css file in which we have: <centetred content> : fix width (1000px), auto left and right margin, gray background. <body_div>: white background. <pic>: 0 margins. So far so good, I get the desired effect: white page in the middle, two side columns in gray. All of this starts at the very top of the page. Now I just want to move the picture slighlty down. As soon as I do that the whole white centered section moves down with it, creating a horizental gray bar on top of the page that is driving me nuts.... it seems that the white section starts where the first object is placed. I just want it to start at the top and then plance my objects wherever. All margins are good in my code as I have checked and rechecked. I appreciate any help. Thanks, Kakeez |