Jump to content

Cell Resizing

Unrated

By Unrated
in HTML/XHTML

 Share

Recommended Posts

Unrated Newbie

Unrated

Posted
Posted

Hey all,!I got a little problem:http://test.dj-didier.beAs you can see in the url (depends for browser), the cells arent nicely set up , thats cuz there is to much text in the big cel!site8gz.th.gifAs you can see on the ss, i made some cels bg so those cell should resize when there is too much text in it!Now i was able to make it work for Opera browser! I made a div in the cell :

<td width="160" height="145" colspan="5" bgcolor="#bbbfc5">     	 <div class="table1">          texttexttexttext        </div>  </td>

Then in my css:

div.table1 {   width: 160px;   height: 145px;   overflow: auto;}

Opera user will see how it needs too work!Now i am searching for a code that works in all browsers, IE and FF.Anybody knows what i am doing wrong? If you got more questions plz ask!tx

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

it appears you have used photoshop to make this layout...a very nice one too. But when using photoshop it makes it hard to make changes later.You would be better off re doing htis layout, it will save you head aches int eh future...use CSS and try and use tables as little as possible. This will make for a clean and easily modified layout. You can make use of background-images to help acheive your layout easier.Also...what font did you use for the links int e navigation bar..I have been looking for that font for a while.Sorry to not be much help but hte problem is that the left column should have been a table within that table cell not rowspaned right column.

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

thanks for the font...I looked at the actual site and it seems you have been experimenting...I will try and throw together a framework of the layout and if I have time I'll work on making some graphics work.I'll post the code when I have it worked out.Good luck

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

You will find the sample at the link belowhttp://www.aspnetguy.com/projects/testarea/psf.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head> <title>Photoshop Federation</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style>	html, body	{  background-color: #5A6573;  height: 100%;	}	.wrapper	{  width: 726px;  margin: 0 auto;  padding: 0px;	}	.MainContent	{  background-image: url(images/wrapper_bg.gif);  margin: 0px;	}	.header	{  background-image: url(images/wrapper_bg.gif);  margin: 0px;	}	.LeftColumn	{  padding-left: 7px;  margin: 0px;	}	.LeftBoxMiddle	{  background-image: url(images/left_box_middle.gif);  padding:5px;  margin: 0px;	}	.LeftBoxBtm	{  margin: 0px;  margin-bottom: 5px;	}	.RightBoxMiddle	{  background-image: url(images/right_box_middle.gif);  padding:5px;  height:100%;  margin: 0px;	}	.RightBoxBtm	{  margin: 0px;  	} </style></head><body><div class="wrapper" style="height:100%">	<div class="header">  <img src="images/header.gif" alt="" />	</div>	<div class="MainContent">  <table cellspacing="2" cellpadding="0" style="height:100%">    <tr>      <td class="LeftColumn" valign="top">  	<div><img src="images/banner_welcome.gif" alt="" /></div>  	<div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  	<div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>  	<div><img src="images/banner_links.gif" alt="" /></div>  	<div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  	<div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>  	<div><img src="images/banner_linkus.gif" alt="" /></div>  	<div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  	<div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>      </td>      <td class="RightColumn" valign="top" style="height:100%">  	<div><img src="images/banner_news.gif" alt="" /></div>  	<div class="RightBoxMiddle">filler text<br/><br/><br/><br/></div>  	<div class="RightBoxBtm"><img src="images/right_box_btm.gif" alt="" /></div>      </td>    </tr>  </table>	</div>	<div class="footer">  <img src="images/footer.gif" alt="" />	</div></div></body></html>

Just copy the source and I am sure you know how to get the images. If not I'll email them to you.BTW. It has some weird spacing bugs in FF. I only made it work for IE and it works good. I would have fixed the FF problems but don;t have time. This is a good start for you anyways...I am sure someone else here can solve the FF issues.

Link to comment
Share on other sites
aspnetguy Sacred Member

aspnetguy

Posted
Posted

Thanks F-ManI have updated the code to fix the FF spacing problem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title>Photoshop Federation</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style>	html, body	{  background-color: #5A6573;  height: 100%;	}	.wrapper	{  width: 726px;  margin: 0 auto;  padding: 0px;	}	.MainContent	{  background-image: url(images/wrapper_bg.gif);  margin: 0px;  height: 100%;	}	.header	{  background-image: url(images/wrapper_bg.gif);  margin: 0px;	}	.LeftColumn	{  padding-left: 7px;  margin: 0px;	}	.LeftBoxMiddle	{  background-image: url(images/left_box_middle.gif);  padding:5px;  margin: 0px;	}	.LeftBoxBtm	{  margin: 0px;  margin-bottom: 5px;	}	.RightBoxMiddle	{  background-image: url(images/right_box_middle.gif);  padding:5px;  height:100%;  margin: 0px;	}	.RightBoxBtm	{  margin: 0px;  	} </style></head><body><div class="wrapper" style="height:100%">	<div class="header">  <img src="images/header.gif" alt="" />	</div>	<div class="MainContent">  <table cellspacing="2" cellpadding="0" style="height:100%">    <tr>      <td class="LeftColumn" valign="top">  	<div><img src="images/banner_welcome.gif" alt="" /></div>  	<div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  	<div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>  	<div><img src="images/banner_links.gif" alt="" /></div>  	<div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  	<div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>  	<div><img src="images/banner_linkus.gif" alt="" /></div>  	<div class="LeftBoxMiddle">filler text<br/><br/><br/><br/></div>  	<div class="LeftBoxBtm"><img src="images/left_box_btm.gif" alt="" /></div>      </td>      <td class="RightColumn" valign="top" style="height:100%">  	<div><img src="images/banner_news.gif" alt="" /></div>  	<div class="RightBoxMiddle">filler text<br/><br/><br/><br/></div>  	<div class="RightBoxBtm"><img src="images/right_box_btm.gif" alt="" /></div>      </td>    </tr>  </table>	</div>	<div class="footer">  <img src="images/footer.gif" alt="" />	</div></div></body></html>

also, f-man. I removed the media type from xhtml 1.1 with no difference made. XHTML 1.0 strict had same troubles. What media type should be used with XHTML 1.0, and 1.1??? Would that have solved the problems and still be able to use XHTML 1.1???

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...