|
HTML - Max Width Of Column
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? Similar TutorialsThe following piece of code delivers a table with fixed width 666px and appr. 200px 466px wide columns, when opened within IE. Long text fits into the columns, long strings break at the border. When opening up within MS Word, the column width seem to ignore the styles. Does anybody know alternative commands delivering the same result in MS Word? Thanks, Andreas <table style="width: 666px; table-layout:fixed; word-wrap: break-word;" cellspacing="0"> <col width="30%"> <col width="70%"> <tr> <td>Floating Rate Payer Calculation Amount:</td> <td>|TRADE_CURRENCY| |CD_NOTIONAL|</td> </tr> </table> Hi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor 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! Hi! I've been trying to figure out why columns in my HTML-table get weird widths. ie. this code: HTML Code: <table width="950" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
column1
</td>
<td colspan="5">
column2
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" value="column3" maxlength="20" style="width:165px;" />
</td>
<td colspan="5">
column4
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
gives me the result: Is there any way I can fix this so each of the columns get's equal size? Preferably without actually having to have to set the width on each of the bottom columns. If not, could anyone explain to me why it's acting this way? Thanks. Hey all, http://www.lindesigns.us/rma/rmaonline.php If you go to that site on Firefox, the "Return Code #" expands. But if you use IE, you'll see that it doesn't. I could add a fix in there for the fields if they were static, but if you see my javascript, they are dynamically loading fields. This "class":"wide" is not working: Code: invoiceInput.appendChild(createElement("input", {"type":"text", "name":"invoice[]", "size":"8", "class":"wide;"}));
I am using a script I found on a jQuery board (http://jsbin.com/acado/6), and it works for them, but not for me because my syntax is probably wrong. And they also are just using 1 field and not near-unlimited dynamically loading fields like I am. How would I add in a fix to have the browser 'only' use the expansion if the user is using IE6 or IE7? I searched on the boards but couldn't find the solution to this problem. Thanks in advance! im creatinh a box containing a text. The box must be wide enough to fill a text. menu.style.width = tekst.length - this functioin gives the number of letters in text. So if the text is "hello" then the width is 5 pixels. But i need the widith of pixels needed to fit the text in a box. How can i do that? Hi, Is there away to force my website to fit an Iphone screen when viewed on the iphone. At the moment the width doesn't full span the Iphones screen so it looks bad. http://pjm.co.uk.uksite4.yourwebserv...splay&PageID=5 Thanks alot Joe 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 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 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 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: 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 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 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 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> 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. 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. 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 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>
|
|||||||