|
HTML - Help! Simple Table Structure Is Driving Me Carzy
Hello All,
I've been having trouble with this table because I have interior cells adding to the confusion. I've included the current code, what you will see is three item images with their descriptions on the right side. You will also see a "view cart" button on the far right of the page. What I want is a simple 2 row 2 column set up for all four components. "Item 1" in the TOP LEFT cell. "Item 2" in the Bottom Left. The "view cart" feature in the TOP RIGHT cell. And finally "Item 3" in the BOTTOM RIGHT cell. I know I only need a few <td> or <tr> lined up in the right place but I've tried everything. THANK YOU IN ADVANCE!!!! <!--// Document Style //--> <style> .product-image { border:none; } .product-title, .product-price, .product-shipping { font-weight:bold; } .data-cell { padding:0px 50px 0px 10px;vertical-align:top} .align-cart { padding-left:280px; top:30pt;} </style> <!--// Document Table //--> <table class="data-cell"> <tr class="product"> <td><img src="images/stainless_thumbnail.gif" width="65" border="0" align="absmiddle" class="product-image"/></td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 1 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> <tr class="product"> <td><img src="Item2_image.jpg" width="65" border="0" align="absmiddle" class="product-image"/> </td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 2 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> <tr class="product"> <td><img src="Item3_image.gif" width="66" border="0" align="absmiddle" class="product-image"/> </td> <td class="data-cell"> <div class="product-title"> <div align="center">Item 3 Name</div> </div> <div class="product-price"> <div align="right">Price: $10.00</div> </div> <div class="product-shipping">Shipping: $3.00</div><br/> <div class="googlecart-add-button"></div> </td> </tr> </table> <!--// Document Script "View Cart" //--> <script id="googlecart-script" type="text/javascript" src="http://checkout.google.com/seller/gsc/v2/cart.js?mid=xyz" currency="USD" post-cart-to-sandbox="fale"> </script> Similar TutorialsHi all, I have a problem that I think is simple but is making me go insane. I have a HTML email service that sends me email from my google blog without having top give my email address out. The problem is that it doesn't fit into my google blog. What I want to do is just to take the boxes and put the labels in myself, which is not a problem, but I need to know what part of the HTML makes the buttons work. Any help would be greatly appreciated, for my sanity more than anything else!: <form method="post" action="http://www.emailmeform.com/fid.php?formid=68804" enctype="multipart/form-data"> <INPUT TYPE=hidden NAME=FCode VALUE="5bb5hnjb"> <table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"> <tr> <td> <font face="Verdana" size="2" color="#000000"></font> <div style="" id="mainmsg"> </div> </td> </tr> </table> <br> <table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF"> <tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Name</font></td> <td> <input type="text" name="FieldData0" value="" maxlength="100" size="20"> </td> </tr> <tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Your Email Address</font></td> <td> <input type="text" name="FieldData1" value="" maxlength="100" size="20"> </td> </tr> <tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Subject</font></td> <td> <input type="text" name="FieldData2" value="" maxlength="100" size="20"><div style="position:absolute; top:343px; right:1582px;"><b>Tip: How to create web forms</b><br>Ever needed to create web forms for your website? We recommend Emailmeform, a service that helps you <a href="http://www.emailmeform.com">create web forms</a> easy in a few steps. No need to learn HTML or PHP!</div> </td> </tr> <tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#000000">Message</font></td> <td> <textarea name="FieldData3" cols="40" rows="15"></textarea><br> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td align="right"> <input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"> <input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"></td> </tr> <tr> <td colspan=2 align="center"> <br> </td> </tr> </table> </form> I've been up for the past 4 hours trying every way possible to get my table to align to the left of my page. I've tried countless html codes... anything and everything! Below is a list of my html codes as well as what my page is coming out like. Would someone please tell me how stupid I am and that I'm looking over something small or my html code is messed up. Sorry if I sound like Im whinning- I'm just frustrated. I really appreciate the help. Thanks. Quote: <LEFT> <TABLE BORDER=6 CELLSPACING=0 CELLPADDING=20> <TR> <TD>Info</TD> <TD>Info</TD> </TR> </TABLE> </LEFT> <table border="1" align="left"> <tr> <td>info</td><td>info</td> </tr> </table> I am hoping someone with "fresh" eyes will be able to spot why I have a 1 pixel space pushing the bottom of my table down. It's a project I inherited, so it's not my code, but it should be obvious to me as to why it's not formatting correctly (but for the life of me, I cant see it). Anyone? Top part of code (if it's of any use): Code: <table border="0" cellpadding="0" cellspacing="0" bordercolor="0">
<tr>
<td width="453" valign="top" background="images/homeBackground.jpg" class="BackNoRepeat"> </td>
<td width="742" align="right" valign="top"><table width="742" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="images/topLogo.jpg" width="300" height="128" /></td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/imgOpening.jpg" width="163" height="124" /></td>
<td align="right" valign="top"><img src="images/rolloverMenu1.jpg" width="137" height="20" /><br />
<a href="recipes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','images/homeRecipesBTN_ov.jpg',1)"><img src="images/homeRecipesBTN.jpg" alt="Recipes" name="Image15" width="137" height="28" border="0" id="Image15" /></a><br />
<a href="nutrition.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','images/homeNutritionBTN_ov.jpg',1)"><img src="images/homeNutritionBTN.jpg" alt="Nutrition" name="Image16" width="137" height="25" border="0" id="Image16" /></a><br />
<a href="webstore.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','images/homeWebstore_ov.jpg',1)"><img src="images/homeWebstore.jpg" alt="Web Store" name="Image17" width="137" height="36" border="0" id="Image17" /></a><br />
<img src="images/home3.jpg" width="137" height="15" /></td>
</tr>
</table></td>
<td width="442" background="images/mainBackground-right.jpg"><table width="441" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="441" align="left" valign="top"><img src="images/topRight.jpg" width="442" height="71" /></td>
</tr>
<tr>
<td><table width="442" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="235"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','width','235','height','135','id','opening animation','align','','src','images/home','quality','high','bgcolor','#FFFFFF','name','opening animation','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/home' ); //end AC code
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="235" height="135" id="opening animation" align="">
<param name="movie" value="images/home.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#FFFFFF" />
<embed src="images/home.swf" quality="high" bgcolor="#FFFFFF" width="235" height="135" name="opening animation" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
</object>
</noscript></td>
<td width="207" rowspan="2"><img src="images/main-top-right1.jpg" width="207" height="181" /></td>
</tr>
<tr>
<td height="47"><img src="images/main-top-right2.jpg" width="235" height="46" /></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
this is where the space happens...and then the following code: Code: <tr>
<td colspan="2"><img src="images/home5.jpg" width="742" height="69"></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><table width="742" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="224" align="left" valign="top"><img src="images/home6.jpg" width="224" height="57" /></td>
<td width="251"><form action="" method="post" >
<table width="93%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="29%" align="right">Username:</td>
<td width="34%"><input name="textfield" type="text" size="15" style="font-size:.75em"/></td>
<td width="37%" rowspan="2"><input type="image" name="imageField" src="images/loginBTN.gif" /></td>
</tr>
<tr>
<td align="right">Password:</td>
<td><input name="textfield2" type="password" size="15" style="font-size:.75em"" /></td>
</tr>
</table>
</form></td>
<td width="267" align="right" valign="top"><img src="images/home7.jpg" width="267" height="57" /></td>
</tr>
</table></td>
</tr>
</table>
<div id="greenLineBack"></div>
<div id="footer">© Copyright 2007. All Rights Reserved.<img src="clear.gif" width="50" height="1"/><a href="#">RECIPES</a> | <a href="#">NUTRITION</a> | <a href="#">WEBSTORE </a></div></td>
<td width="454" valign="top" background="images/mainBackground-right.jpg" class="BackNoRepeat2"> </td>
</tr>
</table>
I am trying to create a table that looks like the following: _____________ |_______|____| |___________ | |___|________| Here is the code I am using: HTML Code: #mainTable {
width: 100%;
padding: 0;
margin: 0;
}
#headerLeft {
padding: 10px 0 10px 10px;
width: 606px;
}
#headerRight {
margin-top: 25px;
text-align: right;
white-space: nowrap;
}
.orangeBar {
margin: 0;
padding: 0;
font-size: 8px;
background-color: #FFC342;
}
#navCell {
width: 225px;
vertical-align: top;
}
#contentCell {
width: auto;
vertical-align: top;
}
<table id="mainTable" border="1">
<tr>
<td id="headerLeft" colspan="2"><img src="images/logo.gif" width="596" height="60" alt="Our Logo" /></td>
<td id="headerRight">Nav Links</td>
</tr>
<tr>
<td colspan="3"><p class="orangeBar"> </p></td>
</tr>
<tr>
<td id="navCell">Nav</td>
<td colspan="2" id="contentCell">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a sem. Integer mattis justo eu nunc.</p>
</td>
</tr>
</table>
For some reason, the Nav cell in the last row is taking on the width of the image in the first cell, even though I want it to be 225px wide. I want the table to be the width of the page (100%). Anyone have any ideas? I know it can be done by nesting two tables, I was just trying to avoid that. Thanks! Just a quick edit, I added a bg color to headerLeft. Then I tested my code with the image removed, and the layout works they way I want, but as soon as I put it back, it is messed up again! The bg color I added confirms that the cell is the same size with and without the image. am having problems with a table i need to add a text box of size 3 max length of 3 right next to the Phone number box. but when i added as a new <td> it moves the whole table and it gets broken. you can see it in this link what's the table like http://www.heartofgoldprogram.com/charities/index3.php i need to add the text box right next to the phone number with a little space in between... its actually to add the box for a Extension... so you will have the phone number digits and in case you have an extension in your number you will put it in this box that i am trying to figure out how to do it. if anyone can help me it will be great... the code where that box need's to be is this one <tr> <td valign="middle" height="44"><b>Phone: *</b><br /> <input type="text" name="phone1" id="phone1" value="" size="3" maxlength="3" style="margin-bottom:10px; float:left; border-left:none; padding-left:4px; margin-right:0px;" onKeyUp="autoTab(this,'phone2'); buildPhoneNumber();"/> <input type="text" name="phone2" id="phone2" value="" size="3" maxlength="3" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTab(this,'phone3'); autoTabBack(this,'phone1'); buildPhoneNumber();"/> <input type="text" name="phone3" id="phone3" value="" size="4" maxlength="4" style="float:left; border-left:none; margin-right:0px; margin-left:0px;" onKeyUp="autoTabBack(this,'phone2'); buildPhoneNumber();"/> <input type="hidden" name="phone" id = "fullPhoneNumber" value="" size="27" /> <td valign="middle" height="40"> </td> <td colspan="1" height="40"> <input name="submit" type="image" src="images/joinbutton2.jpg" alt="joinus" align="right" border="0" style="margin-right:1px; margin-bottom:6px" /> <td width="11" height="39" valign="middle"> </td> </tr> thanks Federico I am trying to 'revise' a website for my boss. I am just going through the website and fixing broken links, re-wording, taking new pictures, etc. The problem is very small but it is bugging me. At the bottom of the page there used to be an image of the address of the business. It was wrong so I just decided to change it and add a table with background color and white text to match the theme of the top of the page. After doing this, the table doesn't completely touch the other tables and I would like it to completely touch the side of the left table. I know my explanation is a little confusing so I am supplying an image. I have circled the problem... Here is a part of the code that I think might be useful... (website at http://www.yournetexperts.com/index.html) HTML Code: <TABLE BORDER="0" cellpadding="0" CELLSPACING="0" bordercolor="#330000" width="100%"> <TR> <TD WIDTH="503" HEIGHT="17" BGCOLOR="#330000" VALIGN="bottom" align="center"> <font face="Trebuchet MS" style="font-size: 8pt" color="#FFFFFF">1308 Pierce St, SiouxCity, IA 51105 • P.O. Box 3122, Sioux City, IA 51102 • (712) 258-2771 </font></TD> </TR> </TABLE> I am a newb to html so any help would be appreciated. This should be a pretty easy one, I think that I've just been staring at this for too long. The question is, why is the first row in this table so tall? I am expecting it to be around 400px tall, but it's about 950px. HTML Code: <html>
<head>
<style>
table.container{
width: 1400px;
}
table.subcontainer{
border: 1px solid #000;
text-align: center;
width: 100%;
}
td.container{
background: #DDD;
line-height: 4px;
vertical-align: top;
}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="container" rowspan="2" width="200"><table class="subcontainer">
<tr>
<td height="1000">Toolbar<br />1000 x 200</td>
</tr>
</table></td>
<td class="container" width="400" rowspan="2"><table class="subcontainer">
<tr>
<td height="200">400 x 200</td>
</tr>
</table><br />
<table class="subcontainer">
<tr>
<td height="400">400 x 400</td>
</tr>
</table><br />
<table class="subcontainer">
<tr>
<td height="400">400 x 400</td>
</tr>
</table></td>
<td class="container" colspan="2" width="800"><table class="subcontainer">
<tr>
<td height="400">800 x 400</td>
</tr>
</table></td>
</tr>
<tr>
<td class="container" width="400"><table class="subcontainer">
<tr>
<td>400 x 200</td>
</tr>
</table></td>
<td class="container" width="400"><table class="subcontainer">
<tr>
<td>400 x 200</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Does anyone know how to fix this simple HTML table problem in IE 6 (works in Mozilla). To see the problem, just view it in IE 6. The page is simple but heavily commented. This is from a more complex dynamic web app. I would really like to avoid: - Simplifying the table structure - Removing the DOCTYPE header. If I remove that, the problem completely disappears. Any ideas? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body style="height: 100%; margin: 0;"> <table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0"> <tr style="height: 100%;"> <td style="background-color: #DDEEFF; vertical-align: top; height: 100%; width: 20%"> <!-- This cell properly extends to the full height of the page including scrolling. --> <table style="height: 100%;" cellpadding="0" cellspacing="0"> <tr height="100%"> <td height="100%" style="background-color: #EEFFDD; vertical-align: top;"> This is the sole cell within an embedded table inside of the outer table's left cell.<br/> <br/> This cell has a green background.<br/> <br/> On Mozilla, I get the desired behavior where the inner cell extends to the bottom of the outer cell. If you scroll down, the whole height of the page is green.<br/> <br/> On IE, the embedded cell only extends to the height of the first page. The background is green on this page. However, if you scroll down, the cell ends and you can see the blue background of the outer cell.<br/> <br/> How do I get IE to behave like Mozilla where the inner cell/table takes up the entire outer cell?<br/> </td> </tr> </table> </td> <td style="background-color: #FFDDEE; width: 80%; vertical-align: top;"> This is the right cell.<br/> This has a lot of contents that requires vertical scrolling...<br /> <br /> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/>filler<br/> </td> </tr> </table> </body> </html> Don't know what I'm doing wrong here. I'm new to this. Please help Here in my page: HTML Code: <html>
<head>
<title>My Spanish Adventure.com</title>
<meta name="kwrd" content="spanish toutor"/>
<meta name="kwrd" content="spanish lessions telephone"/>
<style type="text/css">
body{background:#cccccc;
color:black;
font-family:Garmond;}
h1,h2,h3 {color:#0033CC;
font-family:cursive;
font-size: 32px}
</style>
</head>
<img src="msppic.jpg"/>
<h1> My Spanish Adventure.com</h1>
<body>
<table>
<tr>
<td> Welcome to Spanish Interactives' "My Spanish Adventure.com" A web site which allows you to have conversations with fluent spanish speakers on the telephone. In these sessions you will be able to truly create a situation where you will have to work to maintain a conversation with someone who will rarely break into english to help you through it. <p></td>
</tr>
</table>
With this program you will
<ul>
<li> Be able to schedule phone conversatons with spanish speakers who are fleuent in both spanish and english (or some prefer that the person only know spanish)
<li> Be sent pamphlets to help guild you through the conversations. For example, we might have you set up a phone conversation in which we recreate you ordering food from a street vendor, or discussing todays events with a friend
<li>have to oportunity to have a free converstion in which you can talk about what ever you want
<li>set up conversations where you decide the level of dificulty. You can request the speaker to speak very slowly and to only use rudimentry words to a fast pace normal converstional style.
<li>May ask the speaker to never bail out a conversation with english translations, or to frequently define words for you in English.
</ul>
</body>
</html>
Why does't the table show? I seem to be having some issues with getting my table to appear as Id like it. This is a small sample but right now everything is just ontop of everything else..I would like the whole " sunday" stuff to be to the left of all the "monday" stuff. How would I set that up? Thanks for the help PHP Code: <p><strong>Weekly Events</strong></p> <table style="70%;"> <col style="width:20%; color:#000000; background-color:#CCCCCC;" /> <col style="width:80%; color:#000000; background-color:#CCCCCC;" /> <tbody> <td><strong>Sunday</strong></td> <tr> <td>Event</td> <td><input type="text" name="sunday_event" size="40" maxlength="40" value="<?php if (isset($_POST['sunday_event'])) echo $_POST['sunday_event']; ?>" /></td> </tr> <tr> <td>Description</td> <td><textarea name="sunday_desc" cols="31" rows="6" value="<?php if (isset($_POST['sunday_desc'])) echo $_POST['sunday_desc']; ?>" ></textarea></td> </tr> <tr> <td>Time</td> <td><input type="text" name="sunday_time" size="40" maxlength="40" value="<?php if (isset($_POST['sunday_time'])) echo $_POST['sunday_time']; ?>" /></td> </tr> <td><strong>Monday</strong></td> <tr> <td>Event</td> <td><input type="text" name="monday_event" size="40" maxlength="40" value="<?php if (isset($_POST['monday_event'])) echo $_POST['monday_event']; ?>" /></td> </tr> <tr> <td>Description</td> <td><textarea name="monday_desc" cols="31" rows="6" value="<?php if (isset($_POST['monday_desc'])) echo $_POST['monday_desc']; ?>" ></textarea></td> </tr> <tr> <td>Time</td> <td><input type="text" name="monday_time" size="40" maxlength="40" value="<?php if (isset($_POST['monday_time'])) echo $_POST['monday_time']; ?>" /></td> </tr> Okay I have a table that has two rows and eight columns. I want to make a third row with only ONE column so that the third row is the length of the table. How do I go about doing that? Hello all, I Just have a basic question here, it goes like this, when i make HTML Tables, how do i make it so that when i put stuff in a column, the column beside it doesn't stretch? For example take this: HTML Code: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> Then if i change this: HTML Code: <td>row 2, cell 1</td> <td>fff<br> ffff<br></td> Then "row 2 cell 1" would have also gone down 2 lines, you with me? Basically what i am trying to say is, how do i add text to a column without the corresponding column beside it stretching? I Want them to be independent of one another. Thanks. This is driving me nuts. Try this code in IE6. Why are the three red rows on the left showing a height of considerably more than 60pixels when the code asks for exactly 60? Firefox shows this correctly. Code: <html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="195" valign="center" bgcolor="#AAAAAA"><p> </p></td>
<td rowspan="5" width="415" valign="top" style="padding: 20px;" bgcolor="#FFFF66"><p>Middle column</p></td>
<td rowspan="5" width="290" height="440" valign="top" bgcolor="#AAAAAA"><div align="center">Right column</div></td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 1</td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 2</td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 3</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFF66"> </td>
</tr>
</table>
</body>
</html>
This may seem like a silly design question, I just CANNOT figure this out. this site, www.chrisdelia.com is made up of tables that are 100% table width. I want to replace the green area with an image that is 300x300 px and have the gray area go 100% across, but i just cannot seem to figure it out. inside the gray area also is an iFrame on each page, where the content goes, always. am i an idiot for overlooking the easiest thing ever? Hi, I'm really new to HTML and CSS, but I'm trying to teach myself. Maybe you can help with this problem: I have a table on my homepage that contains 3 columns. I want the first column to have multiple rows (each at 75px high), but I want the 2nd and 3rd column to only have 1 row, and have variable height. I used a colspan tag in the HTML, which seemed to work, in Safari. But I'd like it to look the same in all browsers. In Safari, my first column, top cell, is displayed at the top of the table. And in Firefox and Chrome, that first cell is displayed at the bottom of the table. How can I get the cells to start at the top of the table (each 75 px high) and build from the top-down. For example, This is a screen-shot of what I'd like to have in all browsers: http://toddk.org/table-css-help.png Here is my site: http://toddandjill.com/ CSS: http://toddandjill.com/tkstyles.css These are the CSS properties for my table (also in the CSS file above): HTML Code: .home-table {
margin: 20px auto 0px auto;
border-spacing: 8px 0px;
}
.home-table .row1 {
width: 316px;
height: 0px;
NOborder: 3px dotted;
vertical-align: text-top;
}
.home-table .row2 {
width: 316px;
height: 75px;
border-bottom: 2px dotted #c1c1c1;
vertical-align: text-top;
}
Any help would be greatly appreciated, thanks!! Todd the website is http://jamesthecoach.com/ If you look at the first lines of the body text "win the battle within.", I just need to move everything in that column up so that there's only about a half centimeter space between the Get Extraordinary header image and the body text. I've been trying to fix this all day, and for the life of me I can't figure it out. If anyone can help me out, I would totally appreciate it and am willing to pay $10 via PayPal if anyone can help me figure this out within the next 48 hours. Thanks! Hello, I just made my new site for my company and I tried to keep it extremely simple. I used wordpress to do the basic layout automatically and made some simple edits with some basic html i picked up along the way this week. There seems to be two problems though: 1) the form is inside a table which doesnt seem to align properly within any of the popular browsers (firefox/IE/chrome) .... it should look like 1 image instead of 3 separate pieces 2) i eventually got the form to align slightly better but the spot where I "Enter my zip code" doesnt align with the background image behind it.....sometimes it doesnt even say "enter zip code" which is very bad for a user experience. in firefox it doesnt say it, but in chrome it does say it....either way, both are aligned very poorly..... I put my code into this site: http://w3schools.com/html/tryit.asp?...=tryhtml_intro ...and after editing it, i've come to find that it works perfectly within that html editor and looks exactly how i want it to look. but then when i put the code back into my wordpress site, the alignment messes up again...... so i did some research and found out that wordpress has "deprecated" some of the html tags and that they dont work anymore...if i understand correctly. so now i have to find a way to pick new tags or use CSS...this is just so confusing and i thought maybe somebody here might be able to offer me some assistance to help me fix up this form/table problem. my site's url is: http://www.allautoinsurance.org my code that I'm editing is on the right sidebar, where the alignment messes up: <div style="text-align: center;"><span style="font-size: 14pt; font-family: Georgia; color: rgb(0, 0, 0);"><span style="font-size: 14pt;"><span style="font-size: 14pt;">Our free online service instantly browses the best rates in your zip code area at the click of a button. We've helped thousands of people quickly and easily save money on their auto insurance:</span></span></span><br /> <br /> <form action="http://network.mossaffiliatemarketing.com/z/61/CD62/&subid3= "method="post"> <table border="0" cellpadding="0" cellspacing="0" width="225"> <tr> <td colspan="2"><img src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/top.jpg"></td> </tr> <tr> <td class="background1" valign="middle" height="54" width="153"> <style> .background1 { background-image: url(http://www.allautoinsurance.org/wp-c...tom_left.jpg); background-repeat: no-repeat; } </style> <input type="text" name="subid1" value="ENTER ZIP CODE" style="margin-left:30px; margin-bottom:5px; width:110px; border-width:0px; font-size:14px; font-family: Arial, Helvetica, sans-serif;" onClick="javascript:this.value='';"> </td> <td> <input type="image" src="http://www.allautoinsurance.org/wp-content/uploads/2009/08/bottom_right.jpg"></td> </tr> </table> </form> </div> <div style="text-align: left;"><span style="font-size: 12pt;"><span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 1)</span> Input your zip code and click the button above to begin browsing the auto insurance providers in your area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 2)</span> Select the auto insurance provider you're most comfortable with by clicking their picture<span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;"> </span></span></span></span><br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(255, 0, 0); font-size: 12pt;">Warning</span>: Dont <span style="font-style: italic; font-size: 12pt;">always </span>go with the cheapest in the area</span></span></span><br /> <br /> <span style="font-size: 12pt;"><span style="font-size: 12pt; font-family: Georgia;"><span style="font-size: 12pt;"><span style="font-weight: bold; color: rgb(0, 0, 0); font-size: 12pt;">Step 3)</span> Continue with the providers process if they meet your requirements</span></span></span></span><br /> </div> <div style="margin-left: 40px;"><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"></span></span></div><span style="font-size: 10pt; font-family: Georgia;"><span style="font-size: 10pt;"><br /> <span style="font-size: 12pt;">***We've been showing people how to get insurance quickly and easily for years. We respect your privacy, it is just as important to us as it is to you.</span></span></span> .....thanks for any help, i really appreciate your time and effort. if this code doesnt look smart at all its cuz i used some free WYSIWYG editor to generate it. i actually am very confused lol. thanks again. Best, Kyle P Hi, I have a cell within a table and into that I would like to place 4 x layers, all on top of each other. Adjacent to this I have 4 rows in a table, each with an image - the aim is to use OnMouseOver to hide / unhide the layers depending on which of the 4 smaller images are hovered over... The problem I have is that my website uses tables (width 950px) that are centred on the screen - and with resizing the screen in different browsers, the layers go out of alignment. Is there an easy way to ensure the layers always stay within the table cell? I'm using Dreamweaver MX2004. Thank you in advance for your very kind help. Matt Hey good morning Im a photographer in st.louis . I normally do well with basic html im stuck now though. Im simply trying to get a Google Check out Button , Schedule Now Button , Facebook button and Twitter button all to appear on the same line on my web site. Right now they are stacked taking up way to much space. Any help would be appreciated. Here is a link to my web site so you know what Im talking about. simply scroll to just under the description of my Beginner Photography Course http://www.stlphotoart.com/Other/Beg...6793697_9F5rP3 So I'm redesigning a page for a friend, and we decided that iframes would be an awesome way to not have to update every page of the site when he wanted to change his menu or whatever. The design looks good now, but I'm having a problem trying to redirect the pages to only open in the frame. I've looked on google endlessly and can't seem to find what I'm looking for. The code that puts the iframe in my main frame page looks like this: <center><iframe name="iframe" width="100%" height="100%" *overflow-x:hidden;*></iframe> </center> The problem is that if someone finds a page on a search engine, they'll only see the page intended to be viewed in the frame. There's no way for them to get back to the home page, and the design of the page is basically absent. To deal with that, I found a piece of javascript that is supposed to make the page automatically open in its proper iframe, regardless of where it is linked from. That code looks like this: <SCRIPT LANGUAGE='JavaScript'> <!-- if (top == window) location.href = "home.htm" --> </SCRIPT> So, assuming you're still with me... when I use that piece of javascript, it redirects to the page with the iframe, but the iframe is blank. Originally I had the iframe set up to display the home page by default, but then when I used the js on other pages, it brought up the frame as well as an error message in the iframe. My question, then, is this: how the #(&$ do I set the iframe to display whatever page it is redirected from? It's driving me nuts, and I can't find info on this anywhere! Any help would be greatly appreciated! FYI, if it helps to see the pages and the errors I'm getting, the frames page is www.inthebackrow.com/home.htm. To see the orphaned pages, you can try www.inthebackrow.com/fun.htm, and the page I've been javascript-experimenting with is www.inthebackrow.com/driveins.htm. Thank you!! |
|||||||