Simple HTML Problem

Pretend · 02-23-2006, 10:26 AM

Ok, here's a link to the page.

http://theillest.optikhosting.com/information.html

See the problem? (The borders will go once I figure it out by the way.)

Hopefully so, the text is supposed to go to the image and whatnot, here's the code.

Code:

<HTML>
<HEAD>
<TITLE>Bluejay Robotics Robot Report</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="stylesheet.css" title="Default">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<TABLE WIDTH=633 BORDER=1 CELLPADDING=0 background="images/website backround washout.jpg">
	<TR>
	  <TD width=433 height=25 colspan=2 align="left"><p class="member">Our Team</p></TD>
	  <TD width=200 height=210 align="right" rowspan=2><img src="images/info_bluejay.gif" border=0 width=200 height=210 alt="Bluejay Robotics.">
	  </TD>
	</TR>
	<TR>
	  <TD height=185 width=433 valign="top" colspan=2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus elementum blandit nibh. Etiam fermentum eros ac eros. Nulla facilisi. Etiam non nisi eu nunc iaculis pellentesque. Nam a ligula. Praesent id mauris. Nam enim eros, fermentum vitae, pharetra vel, commodo eget, ante. Maecenas pellentesque rutrum nibh. Mauris sagittis quam nec nulla. Integer luctus, quam at auctor sollicitudin, eros dolor semper urna, et blandit metus enim ut nulla. </p>
		

	  </TD>	  
	</TR>
	<TR>
	  <tD width=200 height=174 rowspan=2><img src="images/info_usfirst.gif" border=0 height=174 width=200 alt="US First">
	  </TD>
	  <TD width=433 height=25 align="right" colspan=2><p class="member">FIRST</p></TD>
	</TR>
	<TR>
	  <TD width=433 height=149 colspan=2 align="left">
		<p>FIRST (For Inspiration and Recognition of Science and Technology) is a multinational non-profit organization, that aspires to transform culture, making science, math, engineering, and technology as cool for kids as sports are today. </p>

<p style="padding-bottom: 0px; margin-bottom: 0px;">FIRST was founded in 1989 by Dean Kamen, inventor of the 
Segway Human Transporter. FIRST operates the FIRST Robotics</p>
	  </TD>
	</TR>
</table>
</body>
</html>

It's probably something really simple, but I wouldn't know... haven't done anything like that in ages. Just wanted something simple for the stupid school robotics site and I can't even manage that. Hah, should just use divs, that I could manage.

Anyway, even if I do divs, I'd still like to know what's wrong out of curiousity.

Sorry for the crappy request... wasn't worded well, but I'm in a hurry.

Thanks to those that help.

noob_0001 · 02-23-2006, 11:20 AM

Too many cells. Make it 1 cell across and float the image to where you want. Add a margin to the image so the text does not run into the image.

So your design would have 2 rows each with 1 col.

Radnor · 02-23-2006, 11:59 AM

Make a class in CSS and assign it to the image. Add the border or padding to the left or right side as you need it to get the text off of the image. Need 2. One for the left side of the pic and one for the right.

If you just give it a border, I think it will hit all 4 sides. My thinking is if you wanted a larger space between the side of the pic and the start of the text.

Radnor · 02-23-2006, 12:13 PM

I realize this was put together quick, but I think it is close to what you have...

Code:

<html>
<head>
<title></title>
<style>
body {
	width:633px;
}
.member {
	color:blue;
}
.member-right {
	color:blue;
	text-align: right;
}
.l-side {
	padding-left:50px;
	float: right;
}
.r-side {
	padding-right: 50px;
	float: left;
}
</style>
</head>
<body>
<div>
<img src="images/info_bluejay.gif" class="l-side" border=0 width=200 height=210 alt="Bluejay Robotics.">
<p class="member">Our Team</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus elementum blandit nibh. Etiam fermentum eros ac eros. Nulla facilisi. Etiam non nisi eu nunc iaculis pellentesque. Nam a ligula. Praesent id mauris. Nam enim eros, fermentum vitae, pharetra vel, commodo eget, ante. Maecenas pellentesque rutrum nibh. Mauris sagittis quam nec nulla. Integer luctus, quam at auctor sollicitudin, eros dolor semper urna, et blandit metus enim ut nulla. </p>
</div>

<div><p class="member-right">FIRST</p>

<img src="images/info_usfirst.gif" class="r-side" border=0 height=174 width=200 alt="US First">
<p>FIRST (For Inspiration and Recognition of Science and Technology) is a multinational non-profit organization, that aspires to transform culture, making science, math, engineering, and technology as cool for kids as sports are today. </p>
</div>
</body>
</html>

Pretend · 02-23-2006, 02:52 PM

First, I know I could do divs, that'd be simple.

And as far as having it float, I'm assuming you're talking about with a floating div, yeah, tried that. Displays fine in IE but completely screwed up in anything else.