|
HTML - I Hate Tables Grrrrrr
Hi
I'm tearing my hair out over here just trying to get table cells to be the desired width... I've tried all sorts of different things, but I still can't get the left column in this table to be wider. Ideally I'd like the table to be 50/50 so that the titles are all placed nicely down the left hand side and the form fields are all nicely down the right hand side... simple right? http://www.nickthorn.com/surfersworld/NewUser.asp I'm sure the answer is staring me in the face! Any help greatly appreciated, thanks. Kev Similar TutorialsOk, this is the last thing that I need to do to finish this site and its driving me crazy. Ok, so if you view my site in Firefox everything looks fine http://www.clandestinedesigns.com/ccinsurance/index.php if you view it in IE, the content box and the iframe are not lining up like it does in Firefox. Does anyone know what is causing this? Seriously, why does it hate me? The math is all correct and it lays out perfectly fine in firefox as expected. Can anyone give me a tip as to what's wrong here before I trash this whole idea and go with a reliable table. 2 columns. 15px left and right margins on the "left" column, 470px wide 15px right margin on the "right"column, 455px wide 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body { margin: 0; padding: 0; width: 970px; background: #e1e1e1; }
#wrap { padding: 10px 0; background: #fff; }
#left { margin: 0 15px; width: 470px; height: 100px; float: left; background: #f00; }
#right { margin: 0 15px 0 0; width: 455px; height: 100px; float: right; background: #666; }
</style>
</head>
<body>
<div id="wrap">
<div id="right"></div>
<div id="left"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
I'm not really a coder but better at designing the actually template...but I'm always left to coding it anyways... I just need some help smoothing things out because right now it looks terrible in all browsers Heres what its supposed to look like: it looks a mess in firefox but ok on Internet Explore http://www.sendspace.com/file/v3t00e Thanks if you could help me sort things out Hello all. I have this page showing an image viewer and in internet explorer i have these horrible gaps in it. Can anybody please help me. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
<head>
<title></title>
<style>
body {padding: 0px; margin: 0px;}
.table_top{
width: 827px;
height: 9px;
background-image:url(images/top_line.jpg);
background-repeat:no-repeat;
text-align:center;
}
.table_content{
width: 827px;
background-image:url(images/table_content.jpg);
background-repeat:no-repeat;
height: 418px;
text-align:center;
}
.table_viewer{
margin-left:15px;
margin-right:15px;
text-align:center;
}
.table_thumb2{
margin-left:15px;
margin-right:15px;
text-align:center;
height: 60px;
width: 770px;
overflow: hidden;
position: fixed;
}
.middle_line{
width: 827px;
height: 7px;
background-image:url(images/middle_line.jpg);
background-repeat:no-repeat;
text-align:center;
}
.table_thumb{
width: 827px;
height: 61px;
background-image:url(images/table_thumb.jpg);
background-repeat:no-repeat;
text-align:center;
}
.table_bottom{
width: 827px;
height: 9px;
background-image:url(images/bottom_line.jpg);
background-repeat:no-repeat;
text-align:center;
}
</style>
</head>
<body>
<div class="container" align="center">
<div class="table_top" align="center"></div>
<div class="table_content" align="center">
<span class="table_viewer">
<a href=\"/gallery/slide.php?image=69&auto=on\"><img src='/gallery/images/left_arrow.png' width="52" height="50" border = '0' /></a>
<img src="./slides/img001.JPG" title="img001.JPG" align="middle" />
<a href=\"/gallery/slide.php?image=1&auto=on\"><img src='/gallery/images/right_arrow.png' width="52" height="50" border = '0' /></a>
</span><br />
</div>
<div class="middle_line" align="center"></div>
<div class="table_thumb" align="center">
<span class="table_thumb2" align="center">
</span></div>
<div class="table_bottom" align="center"></div>
</div>
</body>
</html>
Thanks in advance Knappers Hi, I am working on a website: hxxp://www.webjuicer.be When I click on "contact" I've added <a name="top"> tag on that page, that's why the url includes #top. (the browser should automatically scroll down to that tag on the page) Normally, like I've always learnt, this is a basic tag and should work in all browsers. However, it seems that Internet explorer has more difficulties with it. In IE it only works when I press "contact" twice, and therefore it's useless. Any one knows what I've did wrong? Thnx very much! All I want is to have my image placed in the center of my web page... Every code I try doesn't work. The image is either at the top of the page or it doesn't stay in the center at different resolutions. Can someone help me? Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Hello everyone. Im making a website for my company and i need a little help. I made a table and tried to put a fixed width on it so then I could put text in it. Problem is, -when i type with no spaces ex aaaaaaaaaaaaa the text just keeps going forever instead of dropping down to the next line Also Ive been having some other problems -if I zoom in to like 200% on IE my text doesnt stay centerd with the page, it stays centered with the screen -And if I zoom in really far in Fire Fox my background stays centered with the screen instead of the page I made the page using photoshop and exported as html to get me started so ill post the whole script. Its not a whole lot. --------------------------- <html> <head> <title>K2 Layout 3-0</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-image: url(images/bg2.jpg); background-repeat: repeat-y; background-position: center; background-color: #0d141e; } body,td,th { color: #FFF; } </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (K2 Layout 3-0.psd) --> <center> <table id="Table_01" width="1024" height="225" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="images/K2-Layout-3-0_01.gif" width="93" height="225" alt=""></td> <td colspan="6"> <img src="images/K2-Layout-3-0_02.gif" width="840" height="166" alt=""></td> <td rowspan="4"> <img src="images/K2-Layout-3-0_03.gif" width="91" height="225" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/K2-Layout-3-0_04.gif" width="714" height="1" alt=""></td> <td rowspan="2"> <img src="images/K2-Layout-3-0_05.gif" width="126" height="43" alt=""></td> </tr> <tr> <td> <img src="images/K2-Layout-3-0_06.gif" width="71" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_07.gif" width="211" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_08.gif" width="141" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_09.gif" width="163" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_10.gif" width="128" height="42" alt=""></td> </tr> <tr> <td colspan="6"> <img src="images/K2-Layout-3-0_11.gif" width="840" height="16" alt=""></td> </tr> </table> <table id="Table_02" fixed width="830" border="0" cellpadding="0" cellspacing="0"><tr><td> Text Here Text Here Text Here Text Here </td></tr> </table> </center> <!-- End Save for Web Slices --> </body> </html> -------------------- Any help at all appreciated Thanks hey everyone, pretty simple question i am supposing, how do i stop the text in my tables from wrapping to fill the space inside the cell. The text in each cell flows over into a second line, and I end up getting writing that has huge spaces between each word, to try and fill out the line. I still want two lines, just normal sized spaces between words if that makes sense... Ok so you can see from my attachment what I want. I want the bottom row to be all-in-one, so I can centre (center..) the text. But not sure how to do this. Code: <tr>
<td>username</td>
<td>password</td>
</tr>
<tr>
<td>forms....</td>
<td>..........</td>
</tr>
<tr>
......how to get it to display all of this one?
</tr>
<td>
Hello everyone. I am trying to make a table based layout for my personal site, and I have run into a problem with my layout images. My issue is this: is there a way you can make the top of a table flush with the top of the page? I want it so there is no gap between the top of my table and the top of the page. I"m wondering how to get that done. I hope someone can help. Is there a way to put together tables so they look like this: Is there anyway that in Internet Explorer I can stop it auto-resizing? I think that is the problem I'm having, I'm not sure though. The problem is this: http://i37.photobucket.com/albums/e8...66/problem.png The cell on IE adds onto the top and bottom of the image for seemingly no reason. The image on the broken cell is a link as well. I tried making the image the background of the cell and having a transparent image as the link over the top but it brings up the same problems. There's no border around the image and no cell padding. The code used for that specific cell is: Code: <TD height="74" style="background-repeat:no-repeat;" COLSPAN=2><a href="MYLINK" target="_blank"><img src="http://i37.photobucket.com/albums/e85/pxi666/seashell/seashell_layout_09.png" width="411" height="74" border="0"></a></TD> Any ideas on what could be causing this? Thanks a lot in advance, Ollie EDIT: Title is supposed to be "Tables or CSS" I know, I know - HTML Tables are the spawn of Satan - however, I have a tabbed content box made from html/css/js - when you click on a tab, the content (underneath) changes accordingly. My questions is, I will be having a static list, with the corresponding answers (to the data in the list) targetting from an Excel Driven database - don't ask me why, just what my boss wants... Here is what I have so far: Quote: <TABLE CELLPADDING="2" CELLSPACING="2"> <TR><TD>Sponsor ID:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Client Number:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Sponsor Name:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Brand Name:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Status:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Support Tier:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Sponsor Phone:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Support Phone Number:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Support Email Address:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Parent Name:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Misdirect Scripting:</TD><TD>FILLER TEXT</TD></TR> </TABLE> He wants the content separated in a "ruled" look, like Excel - however, I didn't know if it would be cool to just use HTML - or if there is another way to do this - It's not going out on the internet (it's going on our Intranet via SharePoint) so I'm not worried about conjunctions and standards (not using HTML tables), etc. Just need to know if there is another way to separate the info with a solid black line - horizontal/vertical between the cells - that looks better than an HTML table border. Thanks! I have a table I created and I want to have a page that allows you to fill in text boxes to answer questions and then when submitted it will put the answers in the correct cell of the table. I have no idea how to do this and am limited in my html skill. If some one could point me in the right direction I would appreciate it greatly. http://www.roleplayingmaps.net/sheet.htm This is the table I have already created. Thanks for taking the time to read. Ok I'm trying to get a page to look like this I did it with images, so theres no text. So there's 4 images basically I tried to do a table like this Quote: <table border="0"> <tr> <td><a href="http://milkshakekicks.com/kicks/index.php?main_page=product_info&cPath=1&products_id=10&zenid=c1961df3cad20f9854cb47801f 85ee4d"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-1.png" alt="" /></a></td> <td><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-2.png" alt="" />, <img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-3.png" alt="" />, <a href="http://milkshakekicks.com/kicks/index.php?main_page=product_info&cPath=1&products_id=10 amp;zenid=c1961df3cad20f9854cb47801f85ee4d"><img style="border: 1px solid grey;" src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/battle_homepage.png" alt="" width="209" height="179" /></a></td> </tr> </table> but got this Should I not do this with tables? Id like to put multiple tables on one of my web pages. Each would contain an RSS feed, but how do i get the tables in the same row ? id like it to look kinda like this in my page. <table1> <table2> <table3> <table4> <table5> <table6> <table7> <table8> <table9> Can anyone tell me how to achieve this? Thanks Jake Hey, i'm trying to make a simple site, and right now i have one page with a table centered. That all works good, and when you change the size of your webpage, the table always stays centered. My problem is i would like to do this with DIV, because CSS allows more positing control. Yet, when i put a DIV table somewhere when i change the size of my webbrowser the table just disapears off to the site instead of staying centered (even thou its not set to stay centered) I geuss a better question would be how can i control where the table is, but keep it relitive to the size of the window? With CSS or with HTML. Thanks. |
|||||||