A friend of mine has a big table on his website:
http://www.rpi.edu/~chens/Research.html
I think it looks great, so I tried to copy this style/code, but it is making too many columns:
http://www.rpi.edu/~doriad/TechnicalReports.html
I read http://www.w3.org/TR/html4/struct/tables.html , but it looks to me like I have done everything right (all it is are <tr> and <td> tags).
Can anyone spot the bug?
Thanks!
Dave
look at your table code with the text removed
<table width="100%" align="center" border="0" cellpadding="10" cellspacing="10">
<tr>
<td align="right"><img src="Images/PointSetProcessing.jpg" width="230" height="190">
<td width="75%" align="left">
<tr>
<td align="right"><img src="Images/LidarScanner.jpg" width="230" height="190">
<td align="left">
<tr>
<td align="right"><img src="Images/PTXReader.jpg" width="230" height="190">
<td align="left">
<td align="right"><img src="Images/RegionGrowing.jpg" width="230" height="190">
<td align="left">
<tr>
<td align="right"><img src="Images/NoImage.jpg" width="230" height="190">
<td align="left">
</table>different number of td in different rows
your code will fail in many browsers(may not display), not valid xhtml, if your target is limited to a few people on a specific browser, not an issue but the code should be valid (x)html if you want people in general; to see it eg: tags must close <tr><td></td></tr> singleton tags must self close <img src='' alt='' /> another approach, tables are SO 80s :P
<!-- doctype et al -->
<head>
<style type='text/css'>
img {margin:10px; float:left; width:230px;height:190px}
</style></head>
<body>
<div><img src='blah1' /> any text you want </div>
<div><img src='blah2' /> any more text you want </div>
<div><img src='blah3' /> any other text you want </div>
<div><img src='blah4' /> still any text you want </div></body></html>almost bob - thanks! You are right, it was tough to see the missing <tr> until the text was removed.
I'd like to try the "non-80's" method. I'm using a style sheet so my header currently looks like
<head>
<title>David Doria - Technical Reports</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>I tried simply adding the <style> section you recommended:
<head>
<title>David Doria - Technical Reports</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type='text/css'>
img {margin:10px; float:left; width:230px;height:190px}
</style>
</head>
<body>but the result is no good. I'm sure it's clashing with the way I am calling the css file? (Please bear with me, I'm clearly not a web programmer :) but I should be able to get this one-time thing with another little bump from you!)
Was this <style> supposed to be added to the css file itself?
Thanks,
Dave
yes, you can copy the img style into your stylesheet
BUT
styles are applied in order
external style sheets
header styles
single element styles <a style='somthing'>
with the last taking priority
If you put that style in your style sheet it will apply to all images which might **expletive deleted** when you want to display a full size image of something
in the <head> of the page it applies to only the images on that page
in a single element it applies only to that element
are you getting the text wrapping under the image, that is the most likely occurrence, It was a thought exercise not a properly planned layout, my very bad,
so a better layout (perhaps)
<!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">
<!-- @(#) $Id$ -->
<head>
<title>David Doria - Technical Reports</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="Keywords" content="your,keywords,here" />
<meta name="Description" content="." />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type='text/css'>
div { width:100%; }
img { margin:10px; float:right; width:230px;height:190px}
.lt { width:25%; float:left; z-index:-100;}
.rt { width:70%; float:right;}
</style>
</head>
<body>
<div><p class='lt'><img src='blah1' alt='' /></p><p class='rt'> any text you want </p></div>
<div><p class='lt'><img src='blah2' alt='' /></p><p class='rt'> any more text you want </p></div>
<div><p class='lt'><img src='blah3' alt='' /></p><p class='rt'> any other text you want </p></div>
<div><p class='lt'><img src='blah4' alt='' /></p><p class='rt'> still any text you want </p></div>
</body></html>I gave the images a negative z-index, that will push them behind the text on small screens or partscreen windows, where they will still be visible, and the text readable
looks a lot like table code dunnit
this code validates
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.