|
HTML - Tables Not Lining Up
Hello,
I'm trying to line up some tables unsuccessfully. What I'm trying to do is create a page with tables of 45% width which are staggered. In other words, I'd have one table in the normal upper-left portion, but the next table would begin about 100px below that one vertically, aligned to the right. The third table would be about 100px below the first, the fourth about 100px below the second (again right-aligned), and so on - staggerd in a zig-zag pattern. I can't achieve anything close to my desired effect. In fact, one of my tables isn't even aligning to the right side of the page! I have overlap, and just many problems. I'd appreciate any help. Similar TutorialsMe again! One more question: If you look at: http://www.studio209.com/stumptown_e...youritems.html The words and the form fields are not lining up (we've tried everything: "align=top, middle, bottom"... etc.) But, here's another site we did a few months ago: http://www.brownprn.com/requestestimate.htm and they line up!! How did we do it?? Help!! I'm having some trouble with the two scrolls. How do I align them to match up to the picture? This is my code: HTML Code: <table border="0" cellpadding="0" cellspacing="0" width="700" height="700" background="http://img255.imageshack.us/img255/220/noridfg4.jpg"> <tr> <td width="36"></td> <td width="354" valign="bottom"> <div style="overflow: auto; height: 398px; width: 290px; padding: 0px; border: 1px black solid"> </div> </td> <td valign="bottom"> <div style="overflow: auto; height: 292px; width: 220px; padding: 0px; border: 1px black solid; margin-left: auto;"> Write text here </div> </td></tr><tr> <td height="80"></td> <td></td><td></td></tr></td></tr></table> Can someone please help me out. I created a website and in one of the divs the image is going out of place. This image is placed over a larger image. the code for that div is HTML Code: <div id="bottom_blockl">
<h1>What's hot right now?</h1>
<div class="c18">
{% for b in beasts %}
<div class="bottom_item">
<img src="{{b.image_url}}" height="40" width="40" class="c14" />
<span class="c20">{{b.name}} found a level {{b.level}} </span>
<span class="c16">{{b.race}}</span>
<div class="c17">
<div class="att">Att:{{b.attack}}</div>
<br /> <div class="def">Def:{{b.defense}}</div>
</div>
</div></div>
</div>
div.c18 {width:500px;height:300px;overflow:hidden;}
div.c17 {float:right; width:61px;margin-right:15px;margin-top:-24px;}
span.c16 {color:#fc2c1a}
img.c14 {float:left;}
span.c20{margin-right:auto;margin-left:auto;}
.bottom_item{
float:none;
clear:both;
background-image:url(img/bottom-item-box.png);
height:86px;
font-size:20px;
color:#4c4c4c;
Hi I am new here. I play an online game that involves layouts. I had someone make me a layout (here is link: <a href="http://img.photobucket.com/albums/v72/raindrop/Layouts/acreswestlayoutcopy.jpg" target="_blank" rel="nofollow">http://img.photobucket.com/albums/v72/rain...tlayoutcopy.jpg</a>) for the site. In this the blue text box above the horse, when you go to write, you can put text in it. How is that possible. I am trying to make my own, so how do you line it up, that when you type, it goes into that box? Please let me know. Thanks! -AW- Rather than re-write this page and the css, I'd just like to fix what I'm working with, please. This page is not lining up correctly, as you can see from the attached image. All the text content should be to the right of the (left) red column and the red column is supposed to be the width of the gray bar above it. (The header is a separate piece of this page) Can you help me get the left red column to the correct width and all the text content to the right of the red column? thanks. Here's my code: Code: <table valign='top' align="right" cellpadding="0" width="100%" height="80%"> <table style="background-color:#ffffff; font-family:Arial, Helvetica, sans-serif; width:100% height:80%> <table width="770" border="0" cellpadding="0" cellspacing="0" id="maintable" align="center"> <link href="custom.css" rel="stylesheet" type="text/css"> <tr><td id="menu" align="left"> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="index.php"><font color="#DDCEA2"><font face="Arial" size="2">Home</a></font><br> <img src="images/bullet.gif" alt="" width="10" height="10"><A href='index.php?command=signup_page'><font color="DDCEA2"><font face="Arial" size="2">Sign Up</font></A><br /> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="faq.html"><font color="DDCEA2"><font face="Arial" size="2">FAQ</a><br> <img src="images/bullet.gif" alt="" width="10" height="10"><a href="legal.html"><font color="DDCEA2"><font face="Arial" size="2">Terms of Use</a><br><br><br><br><br><br><br><br> </tr> <form method="POST" action="index.php"> <input class='field' type='hidden' name='command' value='account'> <input class='field' type='hidden' name='param' value='renew'> <input class='field' type='hidden' name='account_id' value='[account_id]'> <td colspan='2' class='pageTitle'><div class='hLine'><font face="Arial" color="#EE7600" size="3"> Choose a Transaction</font></div></tr></td> <tr><td class='fieldLabel' width="30%"><font face="Arial" color=#000000" size="3" Style="padding: 5px;"> <font face="Arial" color="#000000" size="2"> Transaction Type:</font></td> <td align="left"><font face="Arial" color="#EE7600" size="2">[account_type_panel]</font></tr> <tr> <tr><td> </td></tr> <tr><td align="left"> </td> <td align="left"><input name="submit" type='submit' class='button' value='Next' /> </td> </tr> </form> <tr height='30%' ><td colspan="2"><div class='hLine'> </div></td></tr> </table> I obviously need some help with my <tr> and <td>'s. On my basic web page I have a top header, left side column and right side content, but I have the rows or tables wrong. The right side content isn't all the way to the top header, as you can see from my attached image, and code below. Help. thanks. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>webpage</title>
<meta name="description" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="770" border="0" cellpadding="0" cellspacing="0" id="maintable">
<tr>
<td colspan="2" id="topline"> </td>
</tr>
<tr>
<td colspan="2"><img src="images/to.jpg" alt="" width="461" height="134"><img src="images/to.jpg" alt="" width="309" height="134"></td>
</tr>
<tr>
<td><img src="images/greyline.gif" alt="" width="174" height="8"></td>
<td><img src="images/orangeline.gif" alt="" width="596" height="8"></td>
</tr>
<td width="174" align="left" bgcolor="#A30100">
<form method="POST" action="index.php">
<input class='field' type='hidden' name='command' value='account'>
<input class='field' type='hidden' name='param' value='login'>
<br>
<font color="white"><font face="Arial"> User Name</font><br>
<input style='height:18px' class='field' type='text' size='18'maxlength="30" name='user_name' value='[user_name]'> <br><br>
<font color="white"><font face="Arial"> Password</font><br>
<input style='height:18px' class='field' type='password'size='18' maxlength="30" name='password' >
<br><SPAN style='font-size:11px'>[login_message]</SPAN> <br><A href='index.php?command=send_pass'>
<SPAN style='font-size:11px;'><font color="white"><center><font face="Arial">Forgot Password?</font></SPAN></A><br /><input class='button' type='submit' value='Login'></center> </form>
<tr>
<td id="menu"><img src="images/bullet.gif" alt="" width="10" height="10"> <a href="index.html">Home</a><br>
<img src="images/bullet.gif" alt="" width="10" height="10"> <a href="/catalog"></a><br>
<img src="images/bullet.gif" alt="" width="10" height="10"> <a href="faq.html">FAQ</a><br>
<img src="images/bullet.gif" alt="" width="10" height="10"> <a href="resume_faq.html"></a><br>
<img src="images/bullet.gif" alt="" width="10" height="10"> <a href="about_us.html">About Us</a><br>
<img src="images/bullet.gif" alt="" width="10" height="10"><a href="/catalog/index.php?act=contactus" target="_self" class="txtSiteDocs">
Contact Us</a><br>
<img src="images/bullet.gif" alt="" width="10" height="10"> <a href="legal.html"></a><br>
<td id="maincontent-subpages"> <font face="Arial" color="#000000" size="4"><b> Got Too Much</b><br><font face="Arial" color="#990000" size="4"><b> Change And Go!!!!</b></font><br> <font color="#FF9900">______________________________________________________</font><br>
<P><font face="Arial" color="#6B6B6B" size="3"> Turn<br><font face="Arial" color="#000000" size="3"> Change</font><br> </font><br><br>
<font face="Arial" color="#000000" size="2"><b> Why</font><font face="Arial" color="#990000" size="2"><br> Turn</b><br></font>
<font face="Arial" color="#6b6b6b"size="2"> <br> whenever it's convenient. <br> <br><br>
<div style='float:left;width:47%;border:none;'><font face="Arial" color="#EE7600" size="4"> <img src="images/reading.jpg" alt="" width="25" height="25"> <b> TEXT</b></font><font face="Arial" color="#6B6B6B" size="2"> <br> is great, but requires everything that <br> your full <br> your day.</div>
<div style='float:left;width:47%;border:none;margin-left:1%;border-left:0px black solid;'><font face="Arial" color="#EE7600" size="4"><img src="images/listening.jpg" alt="" width="25" height="25"><b> </b></font><font face="Arial" color="#6B6B6B" size="2"><br> while multi-tasking, <br> .</font></div>
<br><br> <font color="#990000">________________________________________________________________________</font><br><br>
<br>
<font color="#000000"> 1..<br>
2. <br>
3. Download ).</font><br>
<font color="#990000">________________________________________________________________________
</font><br><br><br>
<font face="Arial" color="#6B6B6B" size="2"> productive and accomplish more.<br> </font> <br><br><font face="Arial" color="#303030" size="2"><b> . <font face="Arial" color="#990000" size="2">.</font> Right Now!</b></font><P>
</td>
</tr>
<tr>
<td><img src="images/greyline.gif" alt="" width="174" height="8"></td>
<td><img src="images/orangeline.gif" alt="" width="596" height="8"></td>
</tr>
<tr>
<td id="footer" colspan="2"></td>
</tr>
</table>
</body>
</html>
im ne to html and css, im going to be redoing some sites and just playing around ith some things, can someone give me a quick fix for this: http://lilions.com/testnew/ Im trying to line up this backound with the banner its lines up in IE but not fixfox Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <html> <body background ="http://lilions.com/home/images/bbck.jpg"> <center><div style="text-align:center; width:1000px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_5201103220251287" src="http://lilions.com/home/images/newban.jpg" usemap="#Image- Maps_5201103220251287" border="0" width="1000" height="500" alt="" /> <map id="_Image-Maps_5201103220251287" name="Image-Maps_5201103220251287"> <area shape="rect" coords="8,433,70,460" href="http://lilions.com/home/" alt="" title="" /> <area shape="rect" coords="73,433,135,460" href="http://lilions.com/news/" alt="" title="" /> <area shape="rect" coords="145,433,212,460" href="http://lilions.com/roster" alt="" title="" /> <area shape="rect" coords="227,434,360,461" href="http://lilions.com/coachingstaff" alt="" title="" /> <area shape="rect" coords="373,435,482,462" href="http://lilions.com/frontoffice" alt="" title="" /> <area shape="rect" coords="500,434,578,461" href="http://lilions.com/schedule" alt="" title="" /> <area shape="rect" coords="593,433,683,460" href="http://lilions.com/standings" alt="" title="" /> <area shape="rect" coords="697,434,784,461" href="http://lilions.com/statistics" alt="" title="" /> <area shape="rect" coords="798,434,872,461" href="http://lilions.com/history" alt="" title="" /> <area shape="rect" coords="889,433,974,460" href="http://lilions.com/fieldinfo" alt="" title="" /> <area shape="rect" coords="15,467,84,494" href="http://lilions.com/fanzone" alt="" title="" /> <area shape="rect" coords="104,466,179,493" href="http://lilions.com/gallery" alt="" title="" /> <area shape="rect" coords="199,467,269,494" href="http://lilions.com/tickets" alt="" title="" /> <area shape="rect" coords="287,468,372,495" href="http://lilions.com/calander" alt="" title="" /> <area shape="rect" coords="386,467,498,494" href="http://lilions.com/sponsorship" alt="" title="" /> <area shape="rect" coords="519,468,632,495" href="http://lilions.com/applications" alt="" title="" /> <area shape="rect" coords="654,466,745,493" href="http://lilions.com/contact" alt="" title="" /> <area shape="rect" coords="763,466,982,493" href="http://fivestarfootballleague.com/" alt="" title="" /> </map></div></center> </body> </center> </html> These image icons are to the left of the corresponding text. The text, lines up on the same line as the image. When viewed, because they line up on the same line, the image is next to the text and bigger than the text (see attached image). How can I line the text up next to the middle of the image rather than how it lines up now, which is next to the bottom of the image? thanks Code: <font face="Arial" color="#000000" size="3"><IMG src="/images/hphone.gif"> <a href="?action=login"> Home</a><br><br> <IMG src="/images/hphone1.gif"><a href="?action=register"> Register</a><br><br> <IMG src="/images/hphone2.gif"> <a href="?action=faq"> FAQ</a><br><br> <IMG src="/images/hphone3.gif"> <a href="? action=terms"> Terms Of Use</a><br><br> <IMG src="/images/hphone4.gif"> <a href="?action=contact"> Contact Us</a><br><br> <IMG src="/images/hphone5.gif"><a href="?action=forgotpass"> Forgot Password</a><br><br> <IMG src="/images/hphone6.gif"><a href="?action=forgotusername"> Forgot Username</a><br></font> Hi everyone. I just joined up in hopes that someone here can help me figure something out that's been driving me nuts for days. I am trying to create some content boxes for the sidebar of my blog. I've managed to create the actual boxes, but then I want to make a new one with two columns to put link badges in. Below is the code I have so far.... <style type="text/css"> <!-- .container_sidebar_about { width:225px; height:64px; background-image:url(http://dougcloud.net/show/headlinklove.png); } .container_sidebar { width:203px; background:#FEF6D2; font-family:Arial, Helvetica, sans-serif; border-width: 0px 1px 1px 1px; border-spacing: 0px; border-style: none solid solid solid; border-color: #4F3314; padding:10px; margin:0 0 20px 0; font-family: 'Trebuchet MS', sans-serif;color: #4F3314; font-size:11px; } a:link {font-family: 'Trebuchet MS', sans-serif;color: #4F3314;} a:visited {font-family: 'Trebuchet MS', sans-serif;color: #ba742a;} --> </style> <div class="container_sidebar_about"></div> <div class="container_sidebar"> <div style="width:100px;float:left;text-align:center;">I have always had the uncanny knack of visualizing how something should look and in 1998, after purchasing my first computer, I started making small graphic things for friends - web buttons, guest book designs, etc.</div> <div style="width:100px;float:right;text-align:center;">I have always had the uncanny knack of visualizing how something should look and in 1998, after purchasing my first computer, I started making small graphic things for friends - web buttons, guest book designs, etc.</div> </div> With this code the text displays in two columns, but it does not appear to be inside the main div with the background color and 1 pixel border. I would like to know what I'm doing wrong so I can make this work properly. I appreciate any help. Hi, I was trying to develop a page in HTML/CSS but having some difficulties. I have created many pages before but this one is giving me a hard time. What I have done differently this time it, i have used Positioning tags. The problem i am having is I can not set any two divs or images side by side. If i set 1 image and 1 div side by side they are being placed on top of each other. But, i may be going crazy here, i was able to place the top two divs side by side (logo and privacy_protected). Can any one please tell me what i am doing wrong or what i should do? Here is the code that i am using: Code: <body>
<div id="wrapper">
<div id="bodypic">
<div id="logo"><a href="index.html"><img src="images/transparent.png" width="319" height="100" border="0" /></a></div><!--logo -->
<div id="privacy_protected"></div><!--privacy_protected -->
<img src="images/transparent.png" height="29" width="1020"/>
<div id="728block">
<img src="images/transparent.png" height="89" width="18" style="float:left"/>
<div id="728adunit"><img src="images/728x90.jpg" width="728" height="90" /></div><!--728adunit -->
<a href="#"><img src="images/transparent.png" height="89" width="23" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="45" width="219" style="float:left"/></a>
<a href="#"><img src="images/transparent.png" height="43" width="202" style="float:left"/></a></div><!--728adblock -->
</div><!--bodypic -->
</div><!--wrapper -->
</body>
And the CSS Code: #wrapper {
height: 1174px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#bodypic {
background-image: url(images/wrapper.jpg);
float: left;
height: 1174px;
width: 1024px;
}
body {
background:#FFF;
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size:14px;
}
a:link {
color: #06F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #06F;
}
#logo {
background-image: url(images/Editorial_v3-1_01.gif);
float: left;
height: 103px;
width: 498px;
}
#privacy_protected {
background-image: url(images/Editorial_v3-1_02.jpg);
float: left;
height: 103px;
width: 526px;
}
#728block {
float: left;
height: 91px;
width: 1024px;
}
#728adunit {
float: left;
height: 90px;
width: 728px;
}
a:hover {
text-decoration: underline;
color: #06F;
}
a:active {
text-decoration: none;
}
Please help! http://tbsnyder.com/site/ I have a simple nav background image setup and I tried lining the text up which works perfectly on my Mac browsers (safari and firefox), but when I opened the site up on my Windows machine, I got this: http://tbsnyder.com/site/difference.png Two differences: the text has more weight on the Mac browsers and it doesn't line up correctly in the PC browsers. Anyone understand why this is? I'm just using a standard font family (arial, helvetica, sans-serif) - why would they appear different between Macs/PCs? Am I setting this up incorrectly in css? CSS: Code: .homeBtn {
padding: 0px 12px 0px 0px;
}
.theSystemBtn {
padding: 0px 12px 0px 0px;
}
.workoutsBtn {
padding: 0px 11px 0px 0px;
}
The html is just an unordered list as you can see from the source. I like the look of the heavier weighted text if I can keep it like that. I would really appreciate any kind of knowledge or assistance in the issue of correctly matching text to background images in a nav bar. My images that I now want to line up horizontally are lining up vertically, But the cache is I want them centered where they are, just next to each other. I tried CSS and the only way I found was to align them left. This defeats the whole purpose. Any idea? Also, when I set img {display: inline; } it works, but I'm using that to fix another problem in which it needs to be set to block. Code: <div id="icons"><a href="http://www.facebook.com/group.php?gid=29231967389"><img src="images/icons/facebook.png"/></a> <a href="mailto:"><img src="images/icons/email.png"/></a> <a href="/news/rss.php"><img src="images/icons/feed.png"/></a></icons></div> Code: #icons {
display: inline;
}
Sorry for posting in possibly the wrong forum, but it is HTML and CSS? I'm trying to build a website in frames and am currently just putting together some test stuff for it. I'm trying to build a background, but when I place the separate parts of the overal image, there is spacing between the frames in places I don't want it; for example, the image in the left frame is significantly below the top frame, and there is a gap between it and the center frame. How can I fix this? I have frameborders set to 0, 0 framespacing, 0 margin width and height, and no borders present. Any help would be appreciated. There are 2 images below, to help explain what I mean. The first is how the top and left frames look, and the second is how the overall thing should appear. 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 hi all, i'm having problems with tables i want it to look like this: http://www.exsilentio.org/apa/test/want.jpg here's the site, i don't know why they're not next to eachother, and at one point they were, but when i made the window smaller they weren't next to eachother...i also tried making a big table to put those tables in and it didn't work...thanks Code: <html>
<head>
<title>top</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
#table1, #table2 {
float: left;
margin-left: 0.5em;
margin-right: 0.5em;
}
html, body {scrolling: auto;}
</style>
</head><center>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="992" height="151" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/top_01.gif" width="992" height="109" alt=""></td>
</tr>
<tr>
<td>
<img src="images/top_02.gif" width="143" height="18" alt=""></td>
<td>
<img src="images/top_03.gif" width="145" height="18" alt=""></td>
<td>
<img src="images/top_04.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_05.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_06.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_07.gif" width="19" height="18" alt=""></td>
<td>
<img src="images/top_08.gif" width="253" height="18" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/top_09.gif" width="992" height="24" alt=""></td>
</tr>
</table></center>
<center><table id="big1" width="973" border="0" cellpadding="0" cellspacing="0"><td>
<table id="table1" width="720" border="0" cellpadding="0" cellspacing="0">
<td align="left"><img src="images/bottom_01.gif" width="720" height="7" alt=""></td>
<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
<tr><td align="center"><img src="images/bottom_07.gif" width="720" height="4" alt=""></td></tr></table>
<table width="19" cellpadding="0" cellspacing="0"><td> <img src="images/spacer.gif" width="19" height="5" alt=""></td>
<table id="table2" width="253" cellpadding="0" cellspacing="0" border="0">
<td align="right"><img src="images/bottom_03.gif" width="253" height="5" alt=""></td>
<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
<tr><td align="center"><img src="images/bottom_07.gif" width="253" height="4" alt=""></td></tr></table>
</table>
</body>
</html>
site Code: <table width="400" border="2" class="pay" id="pay">
<col class="itemsDesc" />
<colgroup span="2" class="firstCol" />
<colgroup span="1" class="feeCol" />
<thead>
<tr>
<th>Lessons</th>
<th>Per Term</th>
<th>Per Year</th>
</tr>
</thead>
<tbody>
<td>30 minutes</td>
<td>$600</td>
<td>$1100</td>
</tr>
<tr>
<td>45 minutes</td>
<td>$850</td>
<td>$1600</td>
</tr>
<tr>
<td>60 minutes</td>
<td>$1100</td>
<td>$2100</td>
</tr>
</tbody>
</table>
and my css: Code: * {margin: 0px; padding: 0px}
body {font-size: 14px;
font-family: 'Lucida Grande', Verdana, sans-serif}
table.pay {table-width: 400px; border: 10 px outset rgb(68, 76, 169)}
table.pay thead {background-color: ivory; border: 1px}
table.pay col.firstCol {background-color: rgb(255, 255, 192)}
table.pay col.feeCol {background-color: rgb(232,232,255)}
table.itemsDims {width:12%;}
im supposed to create a heading row group, a body row group, and column groups containing one column element belonging to the firstCol class, and another column element belonging to the feeColumns class which should span two columns in the web table. was just wondering where im going wrong here since when i do my css.. the background colors or no changes seem to be applied to the columns or the headers (thead) I am trying to slightly reduce the size of the left row on my pages at http://www.mustseedaily.com/. I want to grow the middle table slightly to the left, but I just can't figure out what to change. I have been puzzling over this for some time, and I can usually figure this stuff out, but this one has me baffled. The html is attached. Thanks for any help! |
|||||||