|
HTML - Image On Top Of Column
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 Similar TutorialsI am trying to make an image stay at the bottom of a column, no matter how long the column is on each page of my site: http://musicalmadness.atspace.com/ The green bar on the left is the column I am referring to. The image I want to float on the bottom of the column is the parenthesis facing upward, the second in the column. Does anyone have any ideas on how I can get it to always appear at the bottom of the green column no matter how long the page is for each page of my site? Thank you. 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'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> 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 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, 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. 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 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 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>
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'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 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? 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 hi i am displaying the data retrived from the database in table format. say using query select . col1 col2 col3 col4 12 15 15 13 15 16 the data displayed in col1,col2,col3 are retrieved from the database. now the problem is now i have to compute value for col4 (i.e col4= (15+15)/4) using the values in col2 ,col3. how to perform this. i am using sql as backend and jsp for front end. please send some similar examples or working code for this or any suggestions are appreciated. Thanks and regards Manjunath i devlope one html page which is working fine in ff but not in ie6, because of height of 1px column is much larger than ff column.. so how can i reduce height of 1px column in ie6. 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? :| 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 Hi guys, I have a problem. Whenever the left column is larger than the right column, it stretches the div, but the background doesn't go on. The content just flows out. Is there any way I can fix this? http://automata.firephoenixnet.com/74s/ Thanks in advance guys. |
|||||||