Problem With Table Corners

[sfboy]

As I said before I'm no graphics expert,

I'm trying to create a table so that , on a white backgroud, the table has neat edges (like on trails forum) so it is rounded - not square.

I have four gifs that consist of a white corner - one for each corner the rest of the gif is tranparent so that the color of the table shows through. This works fine for all four corners apart from the bottom left where the colour leeches along the bottom because it appears that the gif won't align to the bottom of the cell.

I've tried valign=bottom etc but it wont go to the bottom, I can't understand why it won't work. I don't want to invert the gif (i.e. have the corner transparent) as I will have to decide my table colour beforehand and can't change it.

Here is a picture, many thanks in advance (is that the time!)

[Danny]

Ive attached a file that has it done using both css with divs and an easier solution using a table. Hope this helps you a bit :blink:

[sfboy]

Danny, mate, nice one. The css stuff is a lot better, I also re-rendered to corners and they came out a lot better. I've really got into the css, I took a long look at the css for the forum and got a few ideas. I took a bit of time but the stuff you made really helped, once again many thanks.

Although not finished here's how its improved

I can change the colour of the boxes by altering the bgcolor tag in the css

...



#bottom {


	float:bottom;

	}



#bleft {

	width: 15px;

	height: 15px;

	background-image:url(images/b-left.gif);

	float:left;

	}


#bright {

	width: 15px;

	height: 15px;

	background-image:url(images/b-right.gif);

	float:right;

  

	}


#tleft {

	width: 15px;

	height: 2px;

	background-image:url(images/top-left.gif);

	float:left;

	}


#tright {

	width: 15px;

	height: 15px;

	background-image:url(images/top-right.gif);

	float:right;

	}



#content {

	margin: 10px 10px 10px 10px;

	float:none;

	text-align:left;

}


#bluet {

	width: 100%;

	height: 1px;

	text-align: center;

	background-color:339CF5;

	background-repeat:repeat-x;


	}


#beiget {

	width: 100%;

	height: 1px;

	text-align: center;

	background-color:FF9900;

	background-repeat:repeat-x;


	}	

The main php file has variables to control the titles and table content

function TestDiv() {

global $copyright_details, $title1, $content1, $title2, $content2;

echo "<img src = \"logo1.gif\" alt = \"Welcome to Sutton Coldfield Computers\"></img>";

echo "<div id =\"wrapper\"><div id =\"bluet\"><div id=\"tleft\"></div><div id=\"tright\"></div>";

echo "<div id =\"content\"><font class=\"title2\">";

echo $title1;

echo "</font></div>";

echo "<div id =\"bluet\"><div id=\"bleft\"></div><div id=\"bright\"></div></div></div>";

echo "<div id =\"bluet\"><div id=\"tleft\"></div><div id=\"tright\"></div>";

echo "<div id =\"content\"><font class=\"wcontent\">";

echo $content1;

echo "</font></div>";

echo "<div id =\"bluet\"><div id=\"bleft\"></div><div id=\"bright\"></div></div></div></div>";


echo "<div id =\"wrapper\"><div id =\"beiget\"><div id=\"tleft\"></div><div id=\"tright\"></div>";

echo "<div id =\"content\"><font class=\"title2\">";

echo $title2;

echo "</font></div>";

echo "<div id =\"beiget\"><div id=\"bleft\"></div><div id=\"bright\"></div></div></div>";

echo "<div id =\"beiget\"><div id=\"tleft\"></div><div id=\"tright\"></div>";

echo "<div id =\"content\"><font class=\"content\">";

echo $content2;

echo "</font></div>";

echo "<div id =\"beiget\"><div id=\"bleft\"></div><div id=\"bright\"></div></div></div></div>";


echo "<table  width = \"75%\" border =\"0\" align = \"center\" bgcolor = \"C0C0C0\">";

echo "<td><font class=\"wcontent\"><p align = \"center\">";

echo $copyright_details;

echo "</p></font></td></table>";


}

yes, I do like css. :S

[sfboy]

You've obviously being working as hard as your avatar :S

[Simon]

Few mistakes.

An #id CSS group is designed to only be used once in the end HTML. Instead of using;

 

#id { 

blah: 5px; 

} 


<div id="id"></div> 

<div id="id"></div> 

<div id="id"></div> 

Use;

 

.class { 

blah 5px; 

} 


<div class="class"></div> 

<div class="class"></div> 

<div class="class"></div> 

A class can be used multiple times, an ID only once. You have also used "<font>" which is now deprecated, use "<span>" instead. Also, in a PHP function, you should parse the variables direct inside the function declaring section, and not global everything once inside the function. For instance

function testDiv($one, $two, $three, $four, $five) {


}


echo testDiv($copyright_details, $title1, $content1, $title2, $content2)

[Danny]

 

Danny, mate, nice one. The css stuff is a lot better, I also re-rendered to corners and they came out a lot better. 

←

 

No problem mate. CSS is incredibly powerful once you get the hang of it. So much better than plain html.