|
HTML - How Can I Add A Column To This Web Page?
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>
Similar TutorialsI'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. I 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>
Hi...I'm having trouble with 2 things right now with my website. First of all, I want to create a new column on the right side of my webpage. And second of all, I want to make my website container a bit wider. Could someone use firebug and tell me how to do this? Here, is my website: http://www.2teachreading.comyr.com Thanks in advance hi, i have a table, i freezed(locked) the first column and firs row of the table.whilw scrolling down, the freezed(locked) column camouflages the freezed row.but i don't want this.i want the freezed row to caoumaflage the freezed column.do you have any ideas? Regards. Hi, I'm trying to create a two column form, but the following approach isn't working the way I would like. (when tabbing through, once finished the left column, it submits the form). I'd like to lay it out in css but not sure how. Any help is greatly appreciated! Code: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tblQuote">
<tr>
<td valign="top"><p onfocus="MM_validateForm('fldComp','','R','fldEmail','','RisEmail','fldOrg','','R','fldDest','','R','fldProd','','R','fldWgt','','R','fldCharge','','R','fldDate','','R','fldDouanes','','R');return document.MM_returnValue">Compagnie<br />
<input name="fldComp" type="text" class="input" id="fldComp" accesskey="1" tabindex="1" size="30" />
<br />
Courriel<br />
<input name="fldEmail" type="text" class="input" accesskey="2" tabindex="2" title="Email" size="30" />
</p>
<p><br />
Origine<br />
<input name="fldOrg" type="text" class="input" id="fldOrg" accesskey="3" tabindex="3" size="30" />
<br />
<br />
Destination<br />
<input name="fldDest" type="text" class="input" id="fldDest" accesskey="4" tabindex="4" title="Email" size="30" />
</p>
<p><br />
Produits<br />
<input name="fldProd" type="text" class="input" id="fldProd" accesskey="5" tabindex="5" size="30" />
<br />
<br />
Poids<br />
<input name="fldWgt" type="text" class="input" id="fldWgt" accesskey="6" tabindex="6" title="Email" size="20" />
<select name="fldWeightType" id="fldWeightType">
<option value="Kg." selected="selected">Kg.</option>
<option value="Lbs.">Lbs.</option>
</select>
</p>
<p> </p>
<p onfocus="MM_validateForm('fldComp','','R','fldEmail','','RisEmail','fldOrg','','R','fldDest','','R','fldProd','','R','fldWgt','','R','fldCharge','','R','fldDate','','R','fldDouanes','','R');return document.MM_returnValue">Division<br />
<label>
<input type="radio" name="fldOuv" value="Yes" tabindex="7" accesskey="7" />
Remorques ouvertes</label>
<br />
<label>
<input type="radio" name="fldFerm" value="No" tabindex="8" accesskey="8" />
Remorques fermées</label>
<br />
<label>
<input type="radio" name="fldMar" value="No" tabindex="9" accesskey="9" />
Conteneurs maritimes</label>
</p>
<p> </p></td>
<td valign="top"><p>Charge entière
<label> <br />
<input type="radio" name="fldChargeRadio" value="Yes" tabindex="11" accesskey="11" />
Oui </label>
<br />
<label>
<input type="radio" name="fldChargeRadio" value="No" accesskey="12" tabindex="12"/>
Non</label>
<br />
</p>
<p>*si non indiquer %<br />
du chargement<br />
<input name="fldCharge" type="text" class="input" id="fldCharge" accesskey="13" tabindex="13" size="30" />
</p>
<p> </p>
<p onfocus="MM_validateForm('fldComp','','R','fldEmail','','RisEmail','fldOrg','','R','fldDest','','R','fldProd','','R','fldWgt','','R','fldCharge','','R','fldDate','','R','fldDouanes','','R');return document.MM_returnValue">Date de livraison <br />
<input name="fldDate" type="text" class="input" id="fldDate" accesskey="14" tabindex="14" title="Email" size="30" />
</p>
<p onfocus="MM_validateForm('fldComp','','R','fldEmail','','RisEmail','fldOrg','','R','fldDest','','R','fldProd','','R','fldWgt','','R','fldCharge','','R','fldDate','','R','fldDouanes','','R');return document.MM_returnValue"> </p>
<p>Heure de rendez-vous<br />
<input name="fldTime" type="text" class="input" id="fldTime" accesskey="15" tabindex="15" size="30" />
<br />
<br />
Personne ressources<br />
<input name="fldRes" type="text" class="input" id="fldRes" accesskey="16" tabindex="16" title="Email" size="30" />
</p>
<p> </p>
<p>Courtier en douanes<br />
<input name="fldDouanes" type="text" class="input" id="fldDouanes" accesskey="17" tabindex="17" size="30" />
<br />
<br />
Informations pertinentes<br />
<textarea name="fldComments" cols="30" rows="10" class="input" id="fldComments" accesskey="18" tabindex="18"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="Envoyer" accesskey="19" tabindex="19" />
</p></td>
</tr>
</table>
I am very new to HTML and cant figure out why my 3-column layout isnt working. I cant seem to get my columns to line up side-by-side without overlapping ... HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2006 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 9/9/2010 12:48:26 PM -->
<head>
<title>Zone Map</title>
<style type="text/css">
#head {
position: relative;
left: 0px;
width: 250px;
height: 20px;
font-family: times new roman;
line-height: 8px;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #c3bd24;}
#content {
left: 0px;
width: 250px;
font-family: times new roman;
line-height: 16px;
font-size: 10pt;
font-weight: normal;
text-decoration: none;
text-align: left;
color: #938461;}
#dotted{
width: 225px;
border-top: 2px dotted #c3bd24;
}
#container {
width: 800px;
}
#col_right {
position: relative;
float: right;
width: 250px;
}
#col_center {
position: absolute;
float: center;
width: 250px;
}
#col_left {
position: relative;
float: left;
width: 250px;
}
</style>
</head>
<body>
<p align="center">
<img border="0" alt="" align="left" src="support/image/ZoneMap.png" width="650" height="400"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
<div id="container">
<div id="col_left">
<p id="head"><br>ZONE 1: $750 minimum</p>
<div id="dotted"></div>
<p id="content">
NJ*** all,<br>
NY***Long Island to Islip,<br>
MD** to Salisbury,<br>
PA** Pittsburgh-Williamsport-Wilkes Barre,<br>
VA** Richmond-Front Royal,<br>
WV* to Martinsburg, Fairmont,<br>
DE** all</p>
</div>
<div id="col_center">
<p id="head"><br>ZONE 2: $1,500 minimum</p>
<div id="dotted"></div>
<p id="content">
NY** Syracuse-Albany-Long Island,<br>
CT** Hartford-New Haven,<br>
PA** west of Pittsburgh-Erie,<br>
OH** Sandusky-Columbus, Ashland,<br>
VA** south of Richmond-Roanoke,<br>
WV* south and west of Fairmont to Bluefield,<br>
MA* Pittsfield-Buzzards Bay-Monomet</p>
</div>
<div id="col_right">
<p id="head"><br>ZONE 3: $2,500 minimum</p>
<div id="dotted"></div>
<p id="content">
VA** south and west of Roanoke,<br>
TN***Chattanooga-Nashville,<br>
KY** Hopkinsville-Madisonville,<br>
IN***Evansville,<br>
IL***Urbana, Chicago,<br>
MI</p>
</div>
</div>
</body>
</html>
Hi My latest design is 2 columns one for navigation the second for content. My problem is with positioning. I want to be able to add an image at the bottom of the navigation column which will always be at teh bootom no matter how big the content area grows. The idea is my navigation will be at the top and the image or possibly images will be at the bottom. Is there an easy way around this with CSS? i could use tables and have it align to bottom but i don't want to use tables if possible. Any suggestions would be appreciated as the design is almost finished and i hope to make a start on coding this afternoon. I will post the example code soon for you guys to see how i've put it together and hopefully will just be able to change one line or somthing for me. CC_DESIGN How can I put a blue border round this entire column. I tried but can't get it to work. http://www.bestsellersworld.com/text2.html Hi all, I want to ask a question about column on html.. I have a table that contained 2 column.. First column I put image and the second I put text description. Can I know how to make an image always on top. This is because when I write text description, the image will down and down followed the text that I wrote. Thanks in advance Hi: I would like to present to my users a 3-column table of 'House for Sale' advertisements. This is not a commercial venture but will only be for the use of my Senior Mobile Home Park residents. Each of the three columns should contain x number of rows with each column cell containing a tiny pic (from a house.jpg file) and underneath the pic would be a few general details of the price, address, agent selling, etc. The .pic would be clickable and would then bring up a more enlarged picture of the house and complete details of the house for sale. My first puzzle is how to make this list of rows of advertisements *variable*. I guess I have to 'build' the page in my server according to how many ads are currently active ?? Any first thoughts are welcome. Thanks, -Mel Smith Hi all, I'm trying to achieve a border around columns, like on this website: http://www.birchandbird.com I like the blue textured border around the columns but I'm completely stuck on how I achieve that. Can anyone please help me? Thank you so much in advance! i tried a code for left right side by side columns but it didn't work can somebody give me a clue to why this didn't work? <style> #columns { width:600px;} #columns.column{ position:relative; width:46%; padding:1%; boarder: solid 1px #000;} #columns:left;{ float:left;} #ciolumns:right{ float:right} </style> <div id="columns"> <div class="left column"> <p>text here</p> </div> <div class="right column"> <p>text here</p> </div> </div> I am trying to add in an extra column to my website. It was built for a 768 resolution when I really want it bigger now. I would like to add a column on the right hand side for some news and things like that...is there an easy way to just add in a column along the right hand side of the webpage? Thanks. I don't know if this is supposed to be posted here or in the css forum - so correct me if I'm doing it wrong. I'm making a table with a variable number of colums. The first column should be allowed to have a width of 30 % if it is needed by the text, but less if it is not needed. (This can style="max-width:30%" do for me). The rest of the columns can use the space that the first columns doesn't use, but shouldn't be able to force the first column to be smaller. If I use max-width the first column might be smaller than 30% because of the rest of the columns forces it to be so, and if I use width=30% the width will be 30% even if the text in the first column doesn't need 30%. Can anyone help me? This is both HTML and CSS-oriented. Current CSS code pertaining to the layout: Code: #listnav {
background: url('../images/listnav-bg.png') top left repeat-x;
width: 25%;
padding: 8px;
float: left;
}
#content {
width: 75%;
padding: 8px;
float: right;
}
#footer {
}
#main-wrapper {
width: 85%;
}
HTML: HTML Code: <div id="main-wrapper">
<div id="listnav">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
<div id="content">
<!-- some spacer stuff here so i can actually see stuff (no static height set) -->
</div>
</div>
The result is that the listnav box shows up on the far right side and the content box shows up below it on the left hand side. Any ideas? :| I can't get the left column to align at the top of the page with the right. I've messed with all the values I could find but have had no luck fixing the problem. What tags should I be paying attention to ? I realize there is a tremendous about of extra code that I need to remove, Im just not sure what is relevant to my layout and what I should delete. If anyone could give me a hand I would very much appreciate it. 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 I am making a website using Dreamweaver CS3. I am actually making a template page that contains 3 columns with a header and footer. I want to make the height of the left and right columns float to match the length of the center column. The center column will always contain more content than the side columns. The code for the left column is below: .thrColAbsHdr #sidebar1 { position: absolute; top: 120px; left: 0; width: 160px; background: #fff9d9; padding: 5px 5px 5px 5px; Any input would be helpful. Thank you 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 |
|||||||