kevmeister Posted January 19, 2006 Share Posted January 19, 2006 Hi there,I have designed a basic page and all is looking good. I have made the picture and tables auto adjust to the size of the screen so what ever size screen the user has it appears exactly the same.My only problem is the text. Is there a way to make the text in a cell in a table, auto adjust to the size of the table?Many ThanksKev Link to comment Share on other sites More sharing options...
boen_robot Posted January 19, 2006 Share Posted January 19, 2006 Percentage values? Also, I thought that text inside a table is wraped(thus resized) by default . Link to comment Share on other sites More sharing options...
Skemcin Posted January 19, 2006 Share Posted January 19, 2006 post your code so we can provide a specific solutions:) Link to comment Share on other sites More sharing options...
kevmeister Posted January 20, 2006 Author Share Posted January 20, 2006 Hi there, thanks for your response. Basically I want the text to shrink when the user shrinks the browser window, so what ever size the browser window is the text looks the same just a little smaller. As it stands the text does indeed word wrap, but word wraps off the page as i have set it not to scroll with any overflow. Here is the code:index.html <html><head><style>html,body{background:GRAY;margin:30px;}</style></head><body style="overflow: hidden"><iframe src="frame1.html" style="width:100%;height:100%" frameborder="no"></iframe></body></html> frame1.html <html><body style="overflow: hidden"><div align="center"><table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="navy" height="65%"><tr height="65%"><td colspan="3" height="65%"><div align="center"><img src="images/skyline.jpg" alt="" height="100%" width="100%" border="0"></div></td></tr></table><table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="navy" height="5%"><tr height="5%"><td align="center" height="5%"><font color="white" face="Century Gothic">home</font></td><td align="center" height="5%"><font color="white" face="Century Gothic">wholesale</font></td><td align="center" height="5%"><font color="white" face="Century Gothic">brands</font></td><td align="center" height="5%"><font color="white" face="Century Gothic">financial</font></td><td align="center" height="5%"><font color="white" face="Century Gothic">contact</font></td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="10" height="30%"><tr height="30%"><td valign="top" bgcolor="white" height="30%"><font size="2" color="#404040" face="Century Gothic">FSD is a global leader in the residual wholesale of branded foods, beverages, toiletries and homecare. Built on more than 3 decades of quality and innovation, FSD International has grown from modest beginnings to become the largest residual wholesaler in the UK and?</font></td><td valign="top" bgcolor="white" height="30%"><img src="images/logo.gif" alt="" height="104" width="206" border="0"></td><td valign="top" bgcolor="white" height="30%"><font size="2" color="#404040" face="Century Gothic">FSD is a global leader in the residual wholesale of branded foods, beverages, toiletries and homecare. Built on more than 3 decades of quality and innovation, FSD International has grown from modest beginnings to become the largest residual wholesaler in the UK and?</font></td></tr></table></div> </html> Thanks again for any input.Kev Link to comment Share on other sites More sharing options...
kevmeister Posted January 20, 2006 Author Share Posted January 20, 2006 I just had a brainwave which really hurt my head If the auto size font isn't possible, then how about adding a data overflow scrollbar to the individual table cells, the only 2 cells that need the scroll is bottom left and right, so is it possible to make them scrollable, but only if the browser window is too small?ThanksKev Link to comment Share on other sites More sharing options...
Patriot Posted January 21, 2006 Share Posted January 21, 2006 i am interested in the whole auto resizing of the entire content of awebsite depending on the screen size of the visitor.Could you put a link to your site so I can see it? Link to comment Share on other sites More sharing options...
scott100 Posted January 22, 2006 Share Posted January 22, 2006 Hi there,I have designed a basic page and all is looking good. I have made the picture and tables auto adjust to the size of the screen so what ever size screen the user has it appears exactly the same.My only problem is the text. Is there a way to make the text in a cell in a table, auto adjust to the size of the table?Many ThanksKev<{POST_SNAPBACK}> You can make text auto adjust depending on the size of the window, use dhtml -To dectect when the window changes put this in the body tag: onresize="" Then find out the current height: findLivePageHeight()Use an if statement to set new text size: if((livePageHeight>0)&&(livePageHeight<200))newHeigh=2;change the font size: document.getElementsByTagName("table").item(i).style.fontSize = newHeigh+"pt";the code below should work ok. took me ages <html><head><script>function findLivePageHeight() { if (window.innerHeight) { //alert ('uses Inner'); return window.innerHeight; } if (document.body.clientHeight) { //alert ('uses Client'); return document.body.clientHeight; } return (null);}function classChange() {livePageHeight = findLivePageHeight();var newHeigh=0;if((livePageHeight>0)&&(livePageHeight<200))newHeigh=2;else if((livePageHeight>200)&&(livePageHeight<400))newHeigh=5;else if((livePageHeight>400)&&(livePageHeight<600))newHeigh=9;else if((livePageHeight>600)&&(livePageHeight<800))newHeigh=12;else newHeigh=15; for (i=0;i<document.getElementsByTagName("table").length; i++) { if (document.getElementsByTagName("table").item(i).className == "foo") { document.getElementsByTagName("table").item(i).style.fontSize = newHeigh+"pt"; } }}</script><style>table.foo{font size:15px}</style></head><body onresize="classChange();" style="overflow: hidden"><div align="center"><table class="foo" width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="navy" height="65%"><tr height="65%"><td colspan="3" height="65%"><div align="center"><img src="images/skyline.jpg" alt="" height="100%" width="100%" border="0"></div></td></tr></table><table class="foo" width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="navy" height="5%"><tr height="5%"><td align="center" height="5%"><font color="white" face="Century Gothic">home</font></td><td align="center" height="5%"><font color="white" face="Century Gothic">wholesale</font></td><td align="center" height="5%"><font color="white" face="Century Gothic">brands</font></td><td align="center" height="5%"><font color="white" face="Century Gothic">financial</font></td><td align="center" height="5%"><font color="white" face="Century Gothic">contact</font></td></tr></table><table class="foo" width="100%" border="0" cellspacing="0" cellpadding="10" height="30%"><tr height="30%"><td valign="top" bgcolor="white" height="30%"><font face="Century Gothic">FSD is a global leader in the residual wholesale of branded foods, beverages, toiletries and homecare. Built on more than 3 decades of quality and innovation, FSD International has grown from modest beginnings to become the largest residual wholesaler in the UK and?</font></td><td valign="top" bgcolor="white" height="30%"><img src="images/logo.gif" alt="" height="104" width="206" border="0"></td><td valign="top" bgcolor="white" height="30%"><font face="Century Gothic">FSD is a global leader in the residual wholesale of branded foods, beverages, toiletries and homecare. Built on more than 3 decades of quality and innovation, FSD International has grown from modest beginnings to become the largest residual wholesaler in the UK and?</font></td></tr></table></div></html> Link to comment Share on other sites More sharing options...
alzable Posted January 23, 2006 Share Posted January 23, 2006 Yea a java script is probably what you are looking for. Link to comment Share on other sites More sharing options...
kevmeister Posted January 24, 2006 Author Share Posted January 24, 2006 absolutely amazing, that's exactly what i was looking for. My page is nearly complete now:My Webpage LinkIt just needs some ironing out now as it's not perfect, but i'm sure it wont take long now. Scott100 you are a legend mate. ThanksOne more quickie, the auto font doesn't start until you have actually resized the window, is it possible to get it to auto resize as the page initally loads? Link to comment Share on other sites More sharing options...
scott100 Posted January 24, 2006 Share Posted January 24, 2006 No probs kevmeister glad i could help, enjoyed the challange The answer to your quickie is yes, you can use an onload event handler that will run the function when the page loads and check the screen size, replace the current body with this one.<body onload="classChange();" onresize="classChange();" style="overflow: hidden"> Link to comment Share on other sites More sharing options...
kevmeister Posted January 25, 2006 Author Share Posted January 25, 2006 wow its easy when you have a brain the size of a planet. ;O)Thanks mate it works perfectMany many thanksKev Link to comment Share on other sites More sharing options...
Mimika Posted January 25, 2006 Share Posted January 25, 2006 I would take away all the font codes and add it to the style <style>table.foo {font size:15px}tr {color: #FFFFFF;font-family: Century Gothic;}</style> not a big fan of font code seens i learend CSS :)just a hint to resize the code you use ^^ Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now