2
Contributors
3
Replies
4
Views
7 Years
Discussion Span
Last Post by almostbob
0

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>

Edited by almostbob: n/a

0

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

0

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

Edited by almostbob: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.