Hello All, I have had design problems with All Health Online for a long time now. My designer is not well and does not come online at all. The work has been half done. I need some help here regarding; 1. IN the page http://www.allhealthonline.com/cholesterol.html The use of the table in the above page looks ugly. Check out the page below http://www.seocertificationguide.com/seo-services.html I got done css table rendering for the above page. I want something like that to be included in the tables for my health site so that they look better and professional.I want something to be done to improve the look and feel of the normal tables. Alternate row coloring kinda thing. 2. Also the font size of the body text is too small. I want to make it big. Which is that CSS place or html tag which will allow me to control that. I think its mostly in my css file. I have attached my css file. Could you please help me with the above. Regards, Hemanth
Well, not only is your cholesterol table ugly, but it wasn't written properly as HTML (I mean, it's not a real table, just a jumble of tr's and td's). The one on the SEO site was done a bit better, properly using thead and th elements in the table... although neither your table nor the SEO table is complicated enough for things like "headers" attributes and that sort of thing, although a "scope" wouldn't hurt... I could probably whip up a nice table for you for your cholesterol site... however it's weekend so I don't know how much computer time I'll get (my husband worries when I sit too much behind it : ) But possibly Monday (28 Juli)? Although it depends on my real job if I have some waiting to do on behalf of the coder or not... and I need work's Windows machine for cross-browser testing, etc so I'd likely do it on my lunch. You could maybe use a copy editor for your text. Like the third sentence or so down you have a , where you need a ; ...in the sentence about meats as a source of cholesterol. Good copy editing makes a site sound like it knows what it's talking about. In any case, are you able to wait a few days? I will post it in this thread, seperate html and css, and you'd have to copy it... I didn't check your charset, but I always use UTF-8, and you may have to do some tweaking to get my CSS to work well with yours. I set my margins and padding to 0 on the "everything" wildcard (*) instead of on the body, so there may be some small padding or margin differences, unless I zero them all out on the table itself. body {margin:0;padding:0;background-color:#e6e6e6;font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;[b]font-size:13px;[/b]} Code (markup): Here is your font size, although you have other font sizes set for the headers too (h2, h3). Instead of setting this to like 16px, set it to 1em. Then everyone can resize the text to what they want. You're right, 13 pix is damn small on your page.
I totally agree with you that the cholesterol table is ugly. I need your help to set the things up. And thanks for offering help on a Monday. I am working on my content to make it better and better. I shall surely get it copy edited. Thanks for the suggestion As far as the font size goes. I changed the value from 13 to 16, but saw no change in the html output. Is it not the right place of change
Sorry Hemanth, I didn't see that further down, in the part called /*inner page*/ also has font sizes. Every place you see font-size, increase the font to what you want. I wouldn't use px size fonts for text either way, but I dunno how difficult it is for you to rewrite everything, so maybe this way is easier for you. Here's what I did with your tables: http://stommepoes.nl/Tables/tables.html To see the HTML code, go to View, Page Source (or something similar) in your browser. CSS: http://stommepoes.nl/Tables/tables.css I start off with a universal reset, which you might not want on your page: * { margin: 0; padding: 0; } so maybe you need, on the first table declaration, add the bolded parts: /*all tables*/ table { border-collapse: collapse; width: 620px; margin: 10px auto; background-color: #fff; [b]margin: 0; padding: 0;[/b] } Code (markup): Also, there are always differences between browsers... I have it currently looking the same in IE6, IE7, Opera9.27 (didn't check in the new Opera 9.5), Safari, FireFox2 (didn't check FF3), and Konqueror 3.5/whatever. I have three different styles: for the first table, to tell the truth, it just doesn't look good to have alternating row colours. There's just too much text there, and I would possibly not even have that in a table, but a definition list. Regardless, each of your current tables have an id, so you could make that table (table1) look different than the others on your page (which do look good with alternative table row colours). I tried two other styles with the two other tables. If you want all your tables to look the same, set styles for just "table" instead of the id's, then afterwards, special styles if any for table1 (the first table). I tried a yellow-green based on the yellowish colour of your righthand column, and then tried a girly blue-purple. Use whatever colours you want-- just open some image editing program, pick the colour you like, and copy the Hex code (sometimes called HTML colours in some programs). All colours in CSS which are in hex code need to start with a #. Colours written in English don't need it (like, background-color: green. I try never to use English names for colours cause some browsers have different names (like gray and grey) and the hex number is exactly the same cross-browser. You can also change the border style-- every place I have "solid" you could make "dotted" "dashed" (although IE6 can't tell the difference between those two), or "double"... you could make just the one side of the border thicker by setting separate border widths: border-width: top right bottom left; (numbers and units would go in place of the names, which tell you which side is affected). You could also do a slight drop-shadow effect, however I didn't do it because it needs some extra elements in the HTML usually and I wanted to keep it as clean as possible for you. But consider the idea. Also, I have an example at the bottom of my page of using an ol instead of a p and br for your numbered list. It's really the better element to use because you really are listing, in order, the factors of high cholesterol causes. I also rewrote a little bit of the tables-- I added summary, which is heard by people using screen readers (the blind), which does not appear on the screen (also, I think Mac users with VoiceOver hear the summary too). I added a caption, which you could remove if you want, since the paragraph above kinda already describes the table. If you have captions, they MUST be the first thing after the opening <table> tag. I used scope and col to keep your top and left sides as referring to the td's in the middle (an accessiblity feature). The top part is in a table head (thead) while the rest is in a table body (tbody, which every table has whether you write it out or not). If you wanted the paragraph which comes directly after the table to really be like a table footer, tfoot has to come between thead and tbody (so, out of order of how you see it). You can ignore my #container, h2 and p css; that's just to make my page resemble yours. But anyway I hope this does it for you. Remove from your CSS the part called "table" near the bottom, cause you'll replace that with my code. Good luck with the site. -pOes *edit, in case others want to see, and if my page disappears, here is the HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hemanthjava's tables</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="pretty cholesterol tables for Hemanthjava" /> <meta name="generator" content="gEdit" /> <link rel="stylesheet" type="text/css" href="tables.css" /> </head> <body> <div id="container"> <h2>Total Cholesterol Level</h2> <p>Total blood cholesterol level is the result one receives as the result of a cholesterol blood test. Cholesterol is measured in units of milligrams per deciliter of blood (mg/dL).</p> <table id="table1" summary="Cholesterol levels and the risks associated with them"> <caption>Cholesterol levels vs Risk</caption> <thead> <tr> <th scope="col">Level</th> <th scope="col">Risk</th> </tr> </thead> <tbody> <tr> <td scope="row">Less than 200 mg/dL</td> <td>This should be the normal cholesterol range. It's the desirable blood cholesterol level or healthy cholesterol. If your blood cholesterol level is less than 200mg/dL, it puts you at a relatively low risk of coronary heart disease. However, one should continue eating a healthy cholesterol free diet, exercise regularly and stay away from tobacco.</td> </tr> <tr class="odd"> <td scope="row">200–239 mg/dL</td> <td>If your blood cholesterol level is between 200- 239 mg/dL, you are at the borderline/high-risk category. At this stage, your LDL cholesterol, HDL cholesterol and triglycerides will be evaluated. It is possible that your high LDL is being balanced by high HDL cholesterol. At this stage, prevention and treatment is most important. Continue eating a healthy cholesterol lowering diet, exercise regularly and stay away from tobacco. If needed (depends on your LDL cholesterol level), the doctor may prescribe cholesterol medications.</td> </tr> <tr class="last"> <td scope="row">240 mg/dL and over</td> <td>If your blood cholesterol level is above 240mg/dL, it means you are High Risk and are at twice the risk of heart disease compared to people having desirable cholesterol level.</td> </tr> </tbody> </table> <h2>LDL or Bad Cholesterol Level</h2> <p>The lower your LDL cholesterol, the lower your risk of heart attack and stroke. In fact, it's a better gauge of risk than total blood cholesterol. In general, LDL levels fall into these categories:</p> <table id="table2" summary="Comparison between LDL levels and risk of heart disease"> <caption>Categories of risk at various LDL levels</caption> <thead> <tr> <th scope="col">Cholesterol Level</th> <th scope="col">Cardiovascular health level/risk level</th> </tr> </thead> <tbody> <tr> <td scope="row">Less than 100mg/dL</td> <td>Optimal</td> </tr> <tr class="odd"> <td scope="row">100 to 129 mg/dL</td> <td>Near Optimal/ Above Optimal</td> </tr> <tr> <td scope="row">130 to 159 mg/dL</td> <td>Borderline High</td> </tr> <tr class="odd"> <td scope="row">160 to 189 mg/dL</td> <td>High</td> </tr> <tr class="last"> <td scope="row">190 mg/dL and above</td> <td>Very High</td> </tr> </tbody> </table> <h2>Blood Triglyceride Level</h2> <p>Triglyceride is a form of fat. People with a high level of triglycerides might also have high LDL and low HDL cholesterol levels. In general, Triglyceride levels fall into these categories:</p> <table id="table3" summary="Triglyceride levels and their associated cardiovascular health risk levels"> <caption>Categories of risk at various Triglyceride levels</caption> <thead> <tr> <th scope="col">Triglyceride Level</th> <th scope="col">Cardiovascular health level/risk level</th> </tr> </thead> <tbody> <tr> <td scope="row">less than 150 mg/dL </td> <td>Normal</td> </tr> <tr class="odd"> <td scope="row">150–199 mg/dL</td> <td>Borderline-High</td> </tr> <tr> <td scope="row">200–499 mg/dL</td> <td>High</td> </tr> <tr class="odd last"> <td scope="row">500 mg/dL</td> <td>Very High</td> </tr> </tbody> </table> <h2>Causes of high Triglyceride</h2> <ol> <li>Overweight/Obesity</li> <li>Sedentary lifestyle</li> <li>Tobacco and alcohol</li> <li>High Cholesterol Diet</li> <li>Genetics</li> </ol> </div> </body> </html> Code (markup): and CSS: /*tables.css*/ * { margin: 0; padding: 0; } img { border: 0; } #container { background-color: #ebf4fe; width: 737px; margin: 0 auto; font-family: arial, helvetica, sans-serif; } h2 { color:#6183a9; font-size: 1em; line-height: 1.2em; text-align: left; margin: 20px 0 15px 25px; } p, ol { color: #2f4966; margin: 5px 25px; font-size: .9em; line-height: 1.2em; } /*all tables*/ table { border-collapse: collapse; width: 620px; margin: 10px auto; background-color: #fff; } table caption { font-size: .8em; text-align: center; } table th { padding: .5em 0; font-size: 1.1em; text-align: center; vertical-align: middle; } table td { padding: .2em; min-height: 2em; vertical-align: middle; } /*colours for table1, very plain*/ #table1 th, #table1 td { border: 1px solid #2f4966; } #table1 tr.odd, #table1 thead { background-color: #e6e6e6; } /*colours for table2*/ #table2 th { border: 1px solid #2f4966; color: #2f4966; } #table2 th:first-child { border-right: 1px solid #2f4966; } #table2 td { border: 1px solid #2f4966; } #table2 tbody tr { background-color: #fff5dc; } #table2 tbody tr.odd { background-color: #c6f9c3; border: solid #73bd6f; border-width: 1px 0; } #table2 tbody tr.last { border-bottom: 0; } #table2 tbody td[scope=row] { border-right: 1px solid #73bd6f; } /*IE6 doesn't understand attribute selectors, or first-child, or anything cause it's dumb, so tables won't look so pretty in IE6*/ * html #table2 td { height: 2em; border-right: 1px solid #73bd6f; } /*colours for table3*/ #table3 { background-color: #fff; } #table3 th, #table3 { border: 1px solid #a210ab; } #table3 th:first-child { border-right: 1px solid #5985b2; } #table3 tbody tr { background-color: #f1cdf3; } #table3 tbody tr.odd { background-color: #e7edf4; border: solid #5985b2; border-width: 1px 0; } #table3 tbody tr.last { border-bottom: 0; } #table3 td[scope=row] { border-right: 1px solid #5985b2; } /*IE7 has some differences of opinion with regards to borders*/ /*otherwise, IE7 and FF had a purple bottom-border while Opera and Safari had a blue one*/ *+html #table3 td { border: solid #5985b2; border-width: 1px 0; } /*IE6*/ * html #table3 td { height: 2em; border: 1px solid #5985b2; } ol { margin-left: 55px; } Code (markup):
Thank you so much mate. I have increased the font-size wherever I came across the tag. Now looking in to the tables part. As you said Alternate Row coloring is not a great idea. Working on choosing some good color and then to apply the changes now. Will post back once don't. But the Font Sizes have been increased and changes applied on the live site. Thanks a lot... Finally used only in the Table2 Code. Thanks mate. I also noticed that you have changed the column heading names. Makes a lot damn sense now.. Let me know if I have applied the changes correctly mate. http://www.allhealthonline.com/cholesterol.html One thing I noticed that the font text in the table is a little bigger compared to the other body font. . Which font should i edit to change that
table th { padding: .5em 0; font-size: 1.1em;[b]<--you could make this smaller number[/b] text-align: center; vertical-align: middle; } table td { padding: .2em; min-height: 2em; vertical-align: middle; [b]font-size: you could also set a font size here, either 1em or something a bit smaller like .9em;[/b] } Code (markup): Seems good. I'd have a summary in the first table. It doesn't show on the site, but then the blind surfer can know what this table will exactly show and then can decide if s/he wants to just skip the table and continue with the text. Captions you don't need, but summaries I'd strongly advise you keep them. Looks great : )
Thank you for all the Advices Mate. I have changed the font from font-size: 1.1em; to font-size: 1.0em;. I hope it looks a little better now. Also I have launched http://www.allskinonline.com today. I have one problem here too. I have used the same layout and css as that of http://www.allhealthonline.com in this. The problem is that the Google search button in the skin site is coming in the next line whereas it is fine in the heath site. ? Need some help here.
I'll take a look when I have time... there must be something not exactly the same code-wise as it looks as though there's not enough room for the submit button and it's dropping down.
I'm stumped as to why the exact same code doesn't look the same. However, it can be fixed on the other site. For some reason, the form is smaller on the skin site-- not allowing both inline inputs to stack alongside each other. However, a point, you forms are not valid. For some reason, a form is a type of block element whose direct child must also be a block. This is usually either a fieldset or a div. For little search boxes like this, I use div because fieldset means I should add a legend, and a legend for a generic search bar is just unnecessary plus Firefox has severe issues with trying to move the legend off-screen. So, if you added a nameless div between your form tag and the first input tag: <form action="" method="post"> <div> <input blah... /> <input blah submit... /> </div> </form> Just because that's better code for validity (it should not change how it looks or acts, unless you've got default margins/padding on things still on). Anyway, temporarily stick a red border on that div (or the form) so you can see it, and set a width either on the form or the div accordingly (keep widening it until both inline elements can fit in one line). If you widen the form, the div will automatically widen too, because it wants to be 100% width of its parent. If you widen the div, your form should also widen cause you didn't ever set a width on it (not really a good thing, but I also see it's absolutely positioned and there's not really any reason for that, but if it works, just leave it). Remove border when done. Hope that helps. : ) I'll be g0ne from teh internets for like 2 weeks, starting after tomorrow morning (europe time).