HTML - Html Table Problems
Hi, and thanks in advance for those who have a look at this issue.
As an amateur webmaster, this question may seem extremely simple, but after working on it a while I have not been able to make it work. What I have is a solid bar running down the left side of the page, and I only want it to take up 20% of the page, I would like to then create the main page contents to the right of that bar taking up the remaining 80% with a white background. I was able to get the table set up for the side bar, but could not seem to start another one for the rest of the page. Like I said, this is an amateur speaking, so the answer may be very simple. Here is the html I have written so far: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style href>a {text-decoration: none} </style> <title></title> <body bgcolor="#FFFFFF" text="#000000" link="#D8F0E3" vlink="#246B44" alink="#9ED9B8" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <style type="text/css"> body {text-align: left; } </style> <table width="20%" border="0" cellspacing="0" cellpadding="10" height="3" bgcolor="#006699"> <td align="center" valign="middle"> <font face="Verdana" size="4" color="#FFFFFF">Round Table Quotes Association <br> <style type="text/css"> body {text-align: left; } </style> </head> <br> <font face="Verdana" size="2"><a href="about.html" target="_blank">About</a><br><br> <font face="Verdana" size="2"><a href="cv.html" target="_blank">Authors Index</a><br><br> <font face="Verdana" size="2"><a href="submit.html" target="_blank">Submissions</a><br><br> <font face="Verdana" size="3" color="#FFFFFF">Table of Contents<br><br></font> Can someone tell me the code I will need to created the field to the right of the bar which will be inline with the bar and its contents, but filling up the remainder 80% of the page? Thanks so much, htmldad Similar TutorialsOkay so i was trying to do a site using photoshop then dreamweaver but it always messed up during the coding. So a nice fella here in htmlforums told me to try tables so okay i tried it and well it worked out really well for the most part. but it's just that it is my first time trying tables and this is what i want http://www.og-guild.com/ and this is what i currently have www.da-nexgen.com dont think im stealing their stuff it's a commonly used layout for guild websites. But in my site you can see things are not really all set fine for example my navigation menu has spaces between them when hey should be real close together. and the biggest problem i have is that i want to have all the site stuff in the middle in 800w and the outer background a different color sort of like the one in og-guild.com. can you guys please help me Hello all. Im totally green and just started last night on making a website. i am at the moment trying te make a nice layout but cant get the links in my menu bar to open up in the content table. can someone plz help me out?!? this is my code so far: index.htm <html><head></head> <frameset rows="20%,*"> <frame name="title" src="banner.gif"> <frameset cols="30%,*"> <frame name="menu" src="menu.htm"> <name="content" src="content.htm"> </frameset> </html> menu.htm <html> <head> <title>Frame Menu</title> <base target="content"> </head> <body bgcolor="#0099DD"> <tr><td><a href="content1.htm"><img border="0" src="homeknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content2.htm"><img border="0" src="aboutknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content3.htm"><img border="0" src="joinusknap.gif" width="80" height="21"></a></td></tr> <tr><td><a href="content4.htm"><img border="0" src="contactknap.gif" width="80" height="21"></a></td></tr> </body> </html> content.htm <html><head> <base target="content"> </head> ... </html> i can only get it to open my buttons in new windows, not on the main page as i want.... plz help me out. My site is not on the internet yet and wont be before its done sometime in the future. hope someone can help me out! Hi. I'm having some problems making a table to put the sliced Photoshop images into HTML 4.01 strict doctype website. I really have no idea what the problem might be and the HTML validator validates it. The website is he http://ekstaze.net. What could be the problem? Thanks. This page works correctly in Firefox and Chrome, but not IE. What can I do to fix it? Many thanks. http://pivotanimator.net/faq.html i've got a little problem with an html table (sorry if i bothered you by adding colors to the table rows) Quote: <table border="1" width="900px" align="center"> <tr> <td bgcolor="#e6e6e6"> </td> </tr> <tr> <td bgcolor="#d2d2d2" width="900px" height="15px"> </td> </tr> <tr> <td bgcolor="#ff0000" width="900px" height="130px"> </td> </tr> <tr> <td bgcolor="#0024bf" width="900px" height="25px"> </td> </tr> <tr> <td bgcolor="#339df6" width="200px" height="340px"> </td> <td bgcolor="#ffcc00" width="700px" height="340px"> </td> </tr> <tr> <td bgcolor="#d2d2d2" width="900px" height="30px"> </td> </tr> </table> the table should look like this Basically I'm in the process of creating a website and things aren't going down so well on the coding front. http://blazeshare.net/ (temp URL) As you can see part of the table becomes stretched or w/e. I am in a rush so I've just used Dreamweaver and can't think for the life of me why its doing this. I tried valign on like every row/column in the damn code in another version to no avail, might have something to do with the way I sliced it. Been a while since I've attempted something like this so I'm a bit stuck. table code : http://blazeshare.net/nbdistro.txt As I said, messy coding because rushed using dreamweaver to make things easy. But apparently not.. lol. Anyone know the reason for this? I am working on the webpage: http://www.ashleylandscaping.com All works well, until you click on the "Contact" button. If you look at the other pages, everything is displayed properly. On the "Contact" page you will see a "Contact Us Form". When i have this form/table on the webpage, the whole bottom of the page disappears. If I remove that form from the page, everything looks fine. It must be just 1 or 2 things i'm missing, but I cant see it for the life of me. Hi everyone, My website, currently at http://www.mlcprop.com/index2.html , is having issues. They a 1.) There is lots of extra space at the bottom when viewed in IE. 2.) The drop-down menu (click "apartments") doesn't display properly in IE; there is supposed to be a green background. It displays fine in Safari/Firefox/Opera however. 3.) I'm having trouble getting the bottom section to work properly. There's supposed to be a green gradient background for the content area that fades out to the page's brown background color. I did this by creating a central table cell with a tiling background image of the green gradient that's very tall and narrow. However, some pages are VERY long... such as thisone. How do I account for this? I tried matching the cell's background color to the image but it doesn't seem to match, or should I just make my tiling green background super long to account for this? I didn't want the file size to be huge. The lower left table cell ("footl") doesn't seem to display properly either. There's supposed to be an image there, a subtle shadow effect. It displays fine on the right ("footr"). Can anyone help with any of these? Thanks so much, Tatiana I am making a table layout and am having a problem. There are two pictures enclosed.. one is how is should look (minus text) and the other is how it shows up in InternetExplorer Table Code: <body text=#FFFFFF LINK=#FFFFFF ALINK=#FFFFFF VLINK=#FFFFFF> <table width="770" valign="top" border="0" cellpadding="0" cellspacing="0" align="center" alt=""> <tr> <td colspan="4"> <img src="images/header_01.png" width="770" height="185" alt=""></td> </tr> <tr> <td colspan="2" valign="left" width="446" height="71" alt="" style="background: url('images/header_02.png') no-repeat; padding-top: 0px; padding-left: 446px; padding-right: 0px; padding-bottom: 0px;"> </td> <td colspan="2" valign="right" width="324" height="71" alt="" style="background: url('images/header_03.png') no-repeat; padding-top: 12px; padding-left: 10px; padding-right: 535px; padding-bottom: 0px;"> <!---------------------------------News-----------------------------------> <p class="marquee"> <Marquee direction="left" scrollamount="2" scrolldelay="50"> News at 11! </Marquee></p> <!---------------------------------News-----------------------------------> <td> <tr> <td width="229" colspan="1" valign="top" alt="" style="background: url('images/header_04.png') repeat; padding-top: 0px; padding-left: 80px; padding-right: 225px; padding-bottom: 5px;"> <!---------------------------------Navigation------------------------------------> <p class="nav">Main</p> <p class="li"> = <a href="index.html">Home</a><br> </p> <!---------------------------------Navigation------------------------------------> </td> <td class="padding" colspan="2" valign="top" width="282" alt="" style="background: url('images/header_05.png') repeat; padding-top: 40px; padding-left: 3px; padding-right: 3px; padding-bottom: 5px;"> <!----------------------------------Content--------------------------------------> <center>*insert title*</center> <!----------------------------------Content--------------------------------------> </td> <td colspan="1" valign="top" width="257" height="21" alt="" style="background: url('images/header_06.png') repeat; padding-top: 8px; padding-left: 0px; padding-right: 0px; padding-bottom: 5px;"> <!------------------------------------Info---------------------------------------> <center>Hey!</center> <!------------------------------------Info---------------------------------------> </td> </tr> <tr> <td colspan="1" valign="top" width="770" height="118" alt="" style="background: url('images/header_07.png') no-repeat; padding-top: 50px; padding-left: -1px; padding-right: 0px; padding-bottom: 30px;"> <!-----------------------------------Credits---------------------------------------> <center> Site is Copyright © of Concord Cosplay Group 2007<br> Layout by Joel Watson </center> <!-----------------------------------Credits---------------------------------------> </td> </tr> </table> </body> For this page on my site: http://www.monkeygambling.com/new%20...ingindex.shtml I am having trouble with the borders on the central part. I have created an external css file with these commands table.border { border-top:1px outset "gray"; border-right:1px outset "gray"; border-bottom:1px outset "gray"; border-left:1px outset "gray"; } td.border { border-top:0px inset "gray"; border-right:1px inset "gray"; border-bottom:0px inset "gray"; border-left:1px inset "gray"; } I want a border with one px width like a normal table, but I don't want the cells to have horizontal borders where the <hr> are. I have got the table to have a border around it, but I want the double line with highlighted edges like in a normal table. If that makes sense could anyone help me? thanks I'm actually having the same problem I've seen wandering about, and I've already considered all the given advice and nothing seems to be working. The background image is split into a 3x3 table for easier loading, and now I'm getting a small gap between the rows themselves. This is the page: http://akito.clavis-sama.com/ I don't have any <p> tags and my margins are all set to 0 already. Yet I have those lines in the middle of my table for the header image. Any clue as to what the problem could be? Hi Guys: I am editing a html page for my boss but am having problems with the images stacking instead of being properly aligned. I can't figure it out for the life of me: http://www.nyu.edu/fas/dept/chemistr.../testpage.html Can anyone provide any advice on how to fix this? I am editing this page with Adobe Golive. Thanks! Hello, I have been fighting with this for several months. I am trying to get this to work across the board with IE and FF and was hoping I could get some help that I might be over looking. Please bare with me on this as it is detailed. Ok, this is a page that outputs Christmas displays users submit. Here is a sample page. http://www.mesquitechristmas.com/loc...y.php?id=%2021 Yes this page is XHTML Valid before we even start. Only problem I have in FF is that the Google Map will not center, but in IE6,7 it does. I have a div class assigned to it just to center it. Now I can assign a div align="center" but that will not validate. Code: div.c1 {text-align: center} Other then that it renders and looks perfect in FF as usual because of it being a superior browser. Now in to my IE problems.... First, in both IE 6,7 if you look at the table that says "About this display..." you will notice a red line dividing each row. In FF this looks fine and works. But in IE if their is not content the line does not show in the entire row. What could be causing this? I would like this line to show regardless if there is content or not like it shows in FF. Lastly in IE6 only Below the "return to list" button their is a HUGE gap that does not show up in IE7 or FF. I have been trying to fix this for months and can not get it right. Any idea why this is happening? I am running out of time and could greatly use the help and suggestions. If you need me to post some code for these isolated problems I would be glad to. Otherwise you can just view source of the code to see it. -Thanks I am building an adwords landing page. The URL is he http://www.amanochocolate.com/adwords/dark-chocolate If you notice, I have put a text block on the right that is all black. I wanted it to have rounded corners so I used some graphics to achieve that. However, for some reason, the table cell color is showing up around the border even though I have no borders set for the table. (I.,e., border:0pt) Also, the border I don't want on the bottom is thicker for some odd reason. I've seen this before but have never figured out what causes this. I would simply like my table borders to be really clean (and gone). Any ideas? -Art I am trying out a couple of layouts for presenting some information in table format. Basically, two tables side by side. Table 1: 3 rows, one column fixed width. table 2: A calendar format with 3 rows. In FF they are displayed as I want them. Even if I include an overflow to force a horizontal scrollbar. Ok I know. But if horizontal scrollbars are not desired, then why do we have them? In IE the overflow is totally ignored. Should I happen to have in table 1, a 4th line of text, then the <hr> I use as a seperator, shows up floating beside table 1, not underneath it as it should. Easily fixed with a <br> but I feel that should not be necessary. In IE, A horizontal scroll bar is not displayed until the data is forced way beyond the edge unlike in FF. Then table 2 drops below table 1 which is not where I want it. In another format, I simply place table 2 under table 1. Which is ok but just doesn't look right. Anyone have a site that discusses this problem and how to work around it so that the browsers are satisfied and the tables show as I want? Greetings, everyone! I'm glad to have found this site! I've been building a website - I'm pretty limited to just HTML knowledge and a little CSS - and everything is going along okay, except I'm stumped on this one issue. I got tired of everything looking so 'boxy', since I use a lot of Tables to create my site, so I learned how to add rounded corners to my tables, which helps a lot. However, what looks good in my Firefox browser (the one I normally use) does not look right in Internet Explorer. Basically, on the right side of the main table, where I placed a graphic of a rounded edge, I'm still getting a weird white border line, even though I've set all my borders to zero. I was wondering if someone could take a look at my page and tell me where I'm messing up. Here's a direct link to the page in question.... http://www.kitwoo.com/kitwoo_seo.html If you look at it in Firefox, it looks fine, but in IE (I think I'm using the latest version of both browsers) you can see that little white line on the right side of the table. Thanks in advance for any suggestions! Hope someone can help with this. I think I have a colspan problem, though I'm not entirely sure. Here's what is happening -> websiteproblem.jpg Here's the code for what is happening -> websiteproblemhtml.jpg And would anyone know why I am not able to post text over my background image (images/OHDGwebsitebanner7_06.jpg)?? Would this be easier to do in Macromedia Dreamweaver? Thanks for all of your help! 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 Hi All, I'm trying to show an image in a table but I end up with a bottom border of three to four pixels beneath it. Here's a simplified example of my table: Code: <table bgcolor="#00CC66" border="0" cellpadding="0" cellspacing="0"> <td> <img src="images/dummy.jpg" border="0"> </td> </table> You can see it in action here. The dummy.jpg is the grey box btw. |