HTML - Basic Table Problem
Okay, it was all working great until I wanted to add another column to make the center logo clickable. Now I am having the problems with the little images being slightly out of alignment again. Any help would be greatly appreciated! The web address is: http://radarcartoons.com/test/test.html Here is the source code:
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Radar Cartoons </title> <style type="text/css"> * { margin: 0; border: 0; padding: 0; } body { background: #000000; text-align: center; } #wrapper { width: 1101px; margin: 0 auto; }</style> </head> <body><br /> <br /> <div id="wrapper"> <table cellspacing="0"> <tbody> <tr> <td><img src="1.jpg" alt="1" /></td> <td><br /> </td> <td><a href="/shows.html" onmouseover="document.circle1.src='2_lit.jpg'" onmouseout="document.circle1.src='2.jpg'"><img src="2.jpg" alt="Shows Page" name="circle1" height="161" width="145" /></a></td> <td><img src="3.jpg" alt="3" /></td></tr></tbody></table> <table cellspacing="0"> <tbody> <tr> <td><img src="4.jpg" alt="4" /></td> <td><br /> </td> <td><a href="/news.html" onmouseover="document.circle2.src='5_lit.jpg'" onmouseout="document.circle2.src='5.jpg'"><img src="5.jpg" alt="News Page" name="circle2" height="151" width="140" /></a></td> <td><img src="6.jpg" alt="6" /></td></tr></tbody></table> <table cellspacing="0"> <tbody> <tr> <td><img src="7_1.jpg" alt="7_1" /></td> <td><a href="/info.html"><img src="7_2.jpg" alt="7_2" /></a></td> <td><a href="/credits.html" onmouseover="document.circle3.src='8_lit.jpg'" onmouseout="document.circle3.src='8.jpg'"><img src="8.jpg" alt="Credits Page" name="circle3" height="148" width="148" /></a></td> <td><img src="9.jpg" alt="9" /></td></tr></tbody></table> <table cellspacing="0"> <tbody> <tr> <td><img src="10.jpg" alt="10" /></td> <td><br /> </td> <td><a href="/links.html" onmouseover="document.circle4.src='11_lit.jpg'" onmouseout="document.circle4.src='11.jpg'"><img src="11.jpg" alt="Links Page" name="circle4" height="137" width="137" /></a></td> <td><img src="12.jpg" alt="12" /></td></tr></tbody></table> <table cellspacing="0"> <tbody> <tr> <td><img src="13.jpg" alt="13" /></td> <td><br /> </td> <td><a href="/contact.html" onmouseover="document.circle5.src='14_lit.jpg'" onmouseout="document.circle5.src='14.jpg'"><img src="14.jpg" alt="Contact Page" name="circle5" height="133" width="126" /></a></td> <td><img src="15.jpg" alt="15" /></td></tr></tbody></table></div> </body> </html> Similar TutorialsHi everyone, I am having a basic problem with a header for my site. The header template is a 3 column 4 row table, with various graphic pieces plugged into each cell. On the second row, I have a graphic that is as wide as the 2nd column plus the 3rd column, and I used the colspan command so it should take up both columns. But, there is a goofy gap to the left of it! Can anyone help? The website is www.precisionpythons.com Thank you! JonV hi, I'd like to say that I'm extremely new to xhtml and CSS, so please bare with me. My question is simple, consider I have this code HTML Code: <table class="mainTable" border="0" cellspacing="30"> <tbody> <tr> <td> <p><b><a class="button" href="l1.html" target="_blank">Link1</a></b></p> </td> <td> <p><b><a class="button" href="l2.html" target="_blank">Link2</a></b></p> </td> <td> <p><b><a class="button" href="l3.html" target="_blank">Link 3</a></b></p> </td> <td> <p><b><a class="button" href="l4.html" target="_blank">Link 4</a></b></p> </td> </tr> </tbody> </table> 1) what does target="_blank" mean? 2) My intention is to place this table in the upper center of the screen. How can I center the table ? 3) The height on each cell in this table is huge, how can I decrease the height of the cells? Thanks I know these are pretty easy questions, but I don't know that much about html and I couldn't seam to find the answer on w3 or anywhere else. NOTE: This it mainly for html, but if you have a solution in javascript or css, that would be fine. 1. How do you place a table (single celled) at a set distance from the left side and top of the page? 2. How do place a box (with a set color, thickness etc.) anywhere on the page (the same way as the table)? I know I could use the table thickness, but I like it set to "0" because I don't like its border look. Help please, thanks. 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. I have started making a simple website with notepad which me and my friend could use. I've got a bit of a problem though. I know basic HTML but don't know how to get around this: In the folder I have two files: Lauch(Which opens the website), and a folder called Pages. In the folder 'Pages' I want the other pages for the website, but as his system would have different names, I can't exactly put: C:\My Files\HH Tool, if his is C:\His Files. Get me? I tried linking to: \Pages\Information.html . But it didn't work. I'd appreciate and answer ASAP. Thanks for whoever replies or answers. Hi Guys on this page www.thepullmanlodge.co.uk/weddings.htm the top 3 pictures are meant to slideshow into each other. When I preview the site in frontpage it works, but now I've uploaded it online it won't work and just shows the three pictures in a block. Can anyone help me get this working as it should? Thanks alot John I been reading books and taking online tutorials to start mixing php in with html, one of the basic examples from the books is echoing something unto a html site, done like this: <html> </body> <? echo "<p>Processed."; ?> </body> </html> The output should be the word "Processed" on the webpage but the output instead is this: Processed.";?> Everything after <p> is displayed. I checked the source code and this changes color: <? echo "<p> While everything else remains black and is displayed. I tried putting a </p> at the end and it reads it and sends everything after that to another line but it stills displays it. I also tried <h1> and others, everything time i open < and close> it stops reading and just displays everything after the > Simple ' instead of " don't change anything either. Any help or advice is appreciated. I want some links to be different colors than others. I tried making a new class and the new links are now colored perfectly, but even though the links changes to the correct color when hovered over, it doesn't actually link... The arrow doesn't turn into a hand to click, it just changes colors, all be it correctly... I know this is very basic and i'm missing something very obvious. I had the standard a class links, and I created a 2nd class called c2... Here's what I have in my css siheet... Code: a, a:visited { color: #a8a2ee; text-decoration: none; } a:hover { color: #ff0000; text-decoration: none; } a img { border: none; } a:focus, a:hover, a:active { outline: none; } c2, b:visited { color: #ff0000; text-decoration: none; } c2:hover { color: #0c00ff; text-decoration: none; } c2 img { border: none; } c2:focus, c2:hover, c2:active { outline: none; } When I create a link like this... Code: <c2 href="http://itunes.apple.com/" target="_blank">download from iTunes</c2> It does not link... I think it has to be A and maybe have a sub class? I can't call links c2 maybe? So how would I do it? Thanks! The website I am working on is he http://radarcartoons.com/test/test.html I want each of those "blips" to change to the other pictures I have of them lit when you rollover it, but I can't figure out how to do a rollover script for multiple images on one page. The names of my alternate files are the same as the regular ones, except they have an _lit.jpg after them. So if it's 2.jpg, then the lit one would be 2_lit.jpg. I will also of course want to make them links to pages which i still have to make, but maybe the code just to make them links and an example link could show me how to get it working. Thanks a lot to anyone who can help me out on my big request! Hello, First post! I'm going to start out with a stupid question (because that's what you do when you're a noob). I realise what I am trying to do is very basic, but I cant work out what I should google to achieve it. We have a website - www.rosietheband.com - which is incidentally my first site (the dimensions are a bit messed up atm, I changed a few bits and I haven't quite finished tweaking). At the minute I'm using a really awful flash-based flickr plugin for the photo page, which I'm not enjoying at all. I want to replace it with a really simple gallery consisting of lots of little 100x100 thumbnails (with no spaces) that completely fill the screen (no matter what your screen size is). As I click on them I'd like a larger version to pop-up (I should probably stick a header in so you can get back to the site). I'd rather not use flash. It sounds easy, but the more I think about it, the more I'm dreading the task. It will contain hundreds of images. Generating the thumbs will be no problem, but how will I implement a pop-up for each one? and how will I add new images without editing the code? If anyone could help in any way I'd really appreciate it! (also, any comments on the site itself would be welcome!) All the best, Rosie I'm doing some homework for my basic html class and i put the code in the w3 validate and it keep's putting errors on my images what am i doing wrong? Here is the 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tyler East, ITSE 1411 Lab Project 1, Tutorial 1 Case 4, Due 02/09/2011</title> <!-- Body System's Home Gym Equipment Tyler East 2/4/2011 --> </head> <body> <img src="logo.jpg" alt="Body Systems" /> <hr/> <h2>Body Systems LSM400 Linear Smith Machine</h2> <IMG src="smith.jpg" ALT="LSM4000" /> <h2>Overview</h2> <p>Linear Smith Machines are the ultimate in weight machines and the LSM400 leads the field. Designed for both serious fitness users and beginners, the LSM400's vertical design provides all of the safety and control associated with Smith Machines, while still allowing for the effective use of gravity for effective resistance. You don't even need a workout partner. Lock points can be set to prevent the bar from movement outside of your body's natural range of motion.</p> <p>You can tailor the LSM400 to meet you specific workout needs. Start with the basic package of the Smith Machine rack and, as your needs grow, add a lat/row, pec dec, plate tree, dip, and accessory organizer. Accessories are easy to insert and remove, allowing you to continue your workout without delay. The LSM400 works with all standard Olympic weight plates</p> <p>The LSM400 is compact with all components place one side of the unit for easy access. This makes the LSM400 perfect for people who want a quality home gym, but do not have a lot of space. Place the LSM400 against a wall and you're ready to go!</p> <p><b>Features</b> Smooth Smith Action: The bar (rated at 800 lb. capacity) slides on Teflon bushings alongside solid steel guide rods. Smooth motion is key to successful workouts, as the target muscles are utilized to their full potential with each repetition.</p> <p><b>Proper Angle:</b> The bar travels along a 7 degree path from vertical. Studies have shown that this is the proper lifting angle to increase your comfort and prevent injury.</p> <p><b>Safety:</b> The LSM400 has 20 lock-out points for a safe, solid stop at any point in your workout routine.</p> <p><b>Rugged:</b> Constructed with heavy 12 gauge steel and 7 gauge reinforcing plate. This is a unit built to last.</p> <p><b>Warranty:</b> Every part of the LSM400 has a lifetime guarantee. We will replace or repair anything that goes wrong.</p> <b>Dimensions</b> <ul> <li>Width: 85"</li> <li>Height: 82"</li> <li>Depth: 72"</li> </ul> <b>Optional Attachments</b> <ul> <li>Selectorized Lat/Row station (Part: MA831-4)</li> <li>Pec Dec station (Part: MA218-6)</li> <li>Dip station (Part: MA105-3)</li> <li>Plate tree (Part: MA488-0)</li> <li>Accessory organizer (MA212-1)</li> <li>Workout DVD (MA051-1)</li> <li>Workout poster (MA055-3)</li> </ul> <address> Body Systems 401 Commercial Drive Eaton, TX 87015 (800) 555-2811 </address> </body> </html> Hello, I am newbie, just has started my adventure with html. I tried to make an easy static site, without any additional thingd, but it occured a problem. 1. I mean, as I put table in table because I did know how to to id in different way, to make buttons on the left stay up while text on the right is moving- if I do normal table with 2columns and on the left lets say 5rows for buttons, on the right I unite all rows to make one big sort of box for contents, as I go down and try to write something morre, the rows from the letf were enlarging too If the size of explorer or firefox is nor full screen, the text in contents is going away (like now in lycos server, where screen is not full, but "cut" by advertise) 2. I have highlighted buttons, but not always works, why? (i mean it works, but darker buttons are charging so slow- maybe it is so because i saved them in pgn instead in gif, and each one is about 50kb?) -probably it is not this- because I have just changed into gif, and it is still the same 3. Another problem, as I post the site, I have notice, that in firefox I can not navigate with buttons, while in explorer yes, is it a fault of my coding, or of server where I put website? Here I post my website: http://members.lycos.co.uk/aniaacolgate/ Could someone take a look on the code, and will be so kind to correct me? It is a basic easy site of very begginger I just wanted to make a shape like this: - top: a banner - buttons in horizontal and vertical way - under buttons: contents (sincerly would like to put frames, but do not know how to put them there, is on the left there r buttons Thank you so much in advance for reply Sorry for mistakes in language I have a table problem where in table (A) and any tables under gets longer, links and content in table (B ) doesn't stay aligned to top, the whole content in table (B) and any others appears away from the top, even in the middle so the top part becomes blank I'd like the content in A as well as B stay on the top and no blank spaces appear on the top of them I'll appreciate any quick fix for this issue kind regards Here's the problematic table I have Quote: <table width="79%" height="100%" border="0"> <tr> <td width="63%" scope="col">A</td> <td width="37%" rowspan="3" >B<br /> </td> </tr> <tr> <td> </td> </tr> <tr> <td scope="row"><table width="100%" border="0" > <tr> <td width="230"> </td> <td width="230"></td> <td width="230" border="0"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table></td> </tr> </table> HI and hello I am having a problem with a table i am using . before the table starts there is a > right above the table --like so LOOK at the PROBLEM attachment file. I think the problem is the > below...... but i cannot find a way to hide it or remove it I am editing in Dreamweaver i am a NOOB but learning my code is as follows : this is the live code. below at the bottom is the editable code which does not have the > seen HTML Code: <div class="features_list"> > <table id="features_table"> <thead> <tr> <th height="57" class="fthead wide featcol"> <div class="titleth"> <span class="shead">Features</span></div> </th> <th class="fthead checkcol"><span class="pro">HostScott</span></th> </tr> </thead> <tbody> <tr> <td class="featcol"> GB of Disk Space </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Hosted Domains Allowed </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Instant Activation </td> <td class="checkcol"> Included FREE </td> </tr> <!--tr> <td class="featcol">Domain Privacy</td> <td class="checkcol"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td> <td class="checkcol pro"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td> </tr--> <tr> <td class="featcol"> POP3/POP3 Secure Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> IMAP/Secure IMAP Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> GB's of Site Transfer (Bandwidth) </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Forwarding Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Email Autoresponder </td> <td class="checkcol">Unlimited</td> </tr> <tr class="pro"> <td class="featcol pro"> Add-on Domains </td> <td class="checkcol pro">Unlimited</td> </tr> <tr> EDITABLE CODE: HTML Code: <div class="body_container"> <table border="0" width="860" class="columns"> <tr> <td valign="top" width="608"> <div class="body_container"> <div class="title_bar">Hosting Features</div> <div class="body_content" id="feat_content"> From the business owner to the individual who desires full functionality on a small budget, HostScott provides your complete web hosting solution. View a listing of what we offer below.. <br /> <br /> <br /> <div id="why_we_are_better"> <div class="star_header"> <span class="himgspac">Why Choose HostScott?</span> </div> <div id="better_features"> <div class="redcent">Outstanding Support, Speed and Flexibility:</div> <ul class="gabul left"> <li>24/7 US-based Support</li> <li>SimpleScripts 1-Click installs</li> <li>Trusted by Millions of Sites</li> <li>SSH Secure Shell Access</li> </ul> <ul class="gabul right"> <li>True Resource Management (<a target="_blank" href="resource_protection.html">more info</a>)</li> <li>Avg Support Hold Times Under 30 Sec</li> <li>Proven Track Record</li> <li>Blazing Fast Servers</li> </ul> </div> </div> <br /> <br /> <div class="features_list"> <table id ="features_table"> <thead> <tr> <th height="57" class="fthead wide featcol"> <div class="titleth"> <span class="shead">Features</span></div> </th> <th class="fthead checkcol"><span class="pro">HostScott</span></th> </tr> </thead> <tbody> <tr> <td class="featcol"> GB of Disk Space </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Hosted Domains Allowed </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Instant Activation </td> <td class="checkcol"> Included FREE </td> </tr> <!--tr> <td class="featcol">Domain Privacy</td> <td class="checkcol"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td> <td class="checkcol pro"><img src="/media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Domain Privacy" /></td> </tr--> <tr> <td class="featcol"> POP3/POP3 Secure Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> IMAP/Secure IMAP Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> GB's of Site Transfer (Bandwidth) </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Forwarding Email Accounts </td> <td class="checkcol">Unlimited</td> </tr> <tr> <td class="featcol"> Email Autoresponder </td> <td class="checkcol">Unlimited</td> </tr> <tr class="pro"> <td class="featcol pro"> Add-on Domains </td> <td class="checkcol pro">Unlimited</td> </tr> <tr> <tr> <td class="featcol"> Perl 5 </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td> </tr> <tr> <td class="featcol"> Python </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="24/7 Network Monitoring" /></td> </tr> <tr> <td class="featcol"> Ruby/Ruby On Rails </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Courtesy Site Backups" /></td> </tr> <tr> <td class="featcol"> Javascript/DHTML </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td> </tr> <tr> <td class="featcol"> Flash/Shockwave </td> <td class="checkcol"><img src="../../media/shared/info/hosting_features/_hs/checkmark_small.gif" alt="Multiple 10 Gigabit Ethernet Connections" /></td> </tr> </tbody> </table> </div> <br /> <br /> <div id="feat_signup"> <a class="signup_btn" href="../../cgi-bin/signup.html"><img alt="Sign Up Now" class="signup_button" src="../../media/shared/general/_hs/signupnow_both.jpg"></a> </div> <!-- class="content" --> </div> <!-- class="frame center" --> <div id="footer"> <ul class="footer_links"> <!--<li><a href="/cgi/info/awards">Awards</a></li>--> <li><a href="https://my.HostScott.com/cgi/help">Help Center</a></li> <li><a href="contact_us.html">Contact Us</a></li> <li><a href="about_us.html">About Us</a></li> <li><a href="../../cgi-bin/partner.html">Affiliates</a></li> <li><a href="terms.html">Terms</a></li> <li style="padding:11px 8px 8px 8px;"><g:plusone size="small" annotation="bubble"></g:plusone></li> </ul> <div id="copyright">©2011 HostScott.com<!--HostScott.com-->. All rights reserved.</div> </div><!-- footer --> I am having a problem getting a table to render properly in IE (including version 7): Test Page Why does extra padding show up to the right of the "+ Select" button? I want the table to collapse to the size of the content, but I can't find ANY combination of CSS that forces IE to do this. Firefox renders the page OK. When I enlarge my window my 2 tables that are next to each other move up and down on my page and end up different heights. Is there a way to keep them even with each other when a different window size is used? I tried changing the 100% widths to fixed numbers but then my background image doesn't fill the whole screen. Is there some code I can add to freeze the size of these tables without loosing 100% background image? on my home page i am using a table in this table i am including different files like header in first row ,nevigator,main part,and fottter throught following coding in php PHP Code: <html> <head> <Title> TECHOBOY::Home </Title> </head> <body> <table > <tr><td > <?php include("header.php"); ?></td></tr> </table> <table > <tr><td > <?php include("nevigator.php"); ?></td></tr> </table> <table> <tr valign="top"> <td valign="top"> <?php include("del.php"); ?> </td> </tr> </table> <table> <tr><td> <?php include("counter_footer.php"); ?></td></tr> </table> </body> </html> and i am having out put as follow in this image now as shown in above pic my DISCUSSION table is centered due to its besides main table .what i want is i want to make that discussion table to align top. can any one tell me how to do that? i am really waiting for your reply thansk you in advance Attached are 2 images of the footer of my website, one (displayed properly) in every browser except IE7 and the other (screwed up) in IE7. As you can see, I have 4 columns, inside which are links to a forums section. In IE7, column 2 is shifted over to the right and sits on top of column 3. The section is styled in CSS...I have attachments for the HTML and CSS code for the section. I'm hoping that one of the guru's here can suggest a fix (please let it be easy ). Thanks for the help. Rick OK Look I Have This Code: HTML Code: <table align="center" width="1010" border="1" cellpadding="0" cellspacing="0" name="table"> <tr> <td background="http://www.imageshack.com/up/mywyjwz3m4.png" width="1010" height="952" style="background-repeat:no-repeat;;background-position:center"> <img src="full.jpg" style="position:absolute;left:0px;top:0px;"> </td></tr> Now, What I Wanted To Know If With This Code: HTML Code: style="position:absolute;left:0px;top:0px;" Can I Move The Object Just In The Table If I Will Give Him For Example: HTML Code: left:0px;top:0px; So It Will Be Like That: And No Like That: Please Help Me! |