So I'm having a hard time sizing my pages. I'm doing my designs on a widescreen lap top, so what I see is different from what most people see. One page I'm having trouble with is, http://www.nascentdescent.zxq.net. Honestly I didn't think this page looked terrible on my parents pc, but it looked zoomed in but not blurry. I'm getting ready to create a page for a client and I want to get it right. Is there a way that I can make the page addjust to the screen size? so it fits. If so, how? If not, then what size should i create my designs? I ussaly do 1200 pixels wide, then how ever tall i need it to be.
Thanks
Kevin
Full Version: Webpage Sizing Problems.
If your using DIV tags, make the width in the css 100% or 80% or something like that. That way it will always be 100% of the screen or if you used 80% then 10% of each side will be the background.
I use a site called http://browsershots.org/ to check if the web page looks the same on all screens. It will also check different browsers for you even on different operating systems. Check it out.
Note that the http://browsershots.org/ site uses actual peoples computers to take the screen shots, so sometimes the screen shots can take a long time to be made, especially on rare computers or browsers. Just keep reloading the page and the screen shots will reload. There is even a button to keep your set running longer so you can make sure you get all the screen shots loaded.
I use a site called http://browsershots.org/ to check if the web page looks the same on all screens. It will also check different browsers for you even on different operating systems. Check it out.
Note that the http://browsershots.org/ site uses actual peoples computers to take the screen shots, so sometimes the screen shots can take a long time to be made, especially on rare computers or browsers. Just keep reloading the page and the screen shots will reload. There is even a button to keep your set running longer so you can make sure you get all the screen shots loaded.
QUOTE(Trippin7464 @ Apr 26 2008, 08:22 AM) 
If your using DIV tags, make the width in the css 100% or 80% or something like that. That way it will always be 100% of the screen or if you used 80% then 10% of each side will be the background.
I use a site called http://browsershots.org/ to check if the web page looks the same on all screens. It will also check different browsers for you even on different operating systems. Check it out.
Note that the http://browsershots.org/ site uses actual peoples computers to take the screen shots, so sometimes the screen shots can take a long time to be made, especially on rare computers or browsers. Just keep reloading the page and the screen shots will reload. There is even a button to keep your set running longer so you can make sure you get all the screen shots loaded.
I use a site called http://browsershots.org/ to check if the web page looks the same on all screens. It will also check different browsers for you even on different operating systems. Check it out.
Note that the http://browsershots.org/ site uses actual peoples computers to take the screen shots, so sometimes the screen shots can take a long time to be made, especially on rare computers or browsers. Just keep reloading the page and the screen shots will reload. There is even a button to keep your set running longer so you can make sure you get all the screen shots loaded.
thanks for the advice, im familar with wat a div tag is, but I'm not sure how to insert the 100% of screen thing in to my code. Here's an example of my index for the site listed in my original post. How would i add the 100% tag to it?
Would i just change the red highlighted part to 100%?
CODE
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nascent Descent</title>
</head>
<body>
<body bgcolor="#383838" text="#000000">
<img src="Layout.gif" width="[color="#FF0000"]1200[/color]" height="[color="#FF0000"]900[/color]" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="191,2,242,20" href="http://www.yahoo.com" />
<area shape="rect" coords="161,3,192,19" href="http://www.google.com" />
<area shape="rect" coords="143,373,331,434" href="http://www.reverbnation.com" />
<area shape="rect" coords="142,445,328,504" href="http://www.ursession.com" />
<area shape="rect" coords="143,519,330,579" href="http://www.google.com" />
<area shape="rect" coords="132,839,601,899" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="600,840,1067,900" href="http://www.ursession.com/nascentdescent" />
<area shape="rect" coords="132,3,161,18" href="http://www.yahoo.com" />
<area shape="rect" coords="955,2,988,17" href="http://www.ebay.com" />
<area shape="rect" coords="567,91,650,119" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="650,91,732,119" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="983,92,1065,120" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="734,91,816,119" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="816,91,897,120" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="899,91,980,120" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="989,3,1021,16" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="1022,2,1067,17" href="http://www.reverbnation.com/nascentdescent" />
</map>
<div id="bv_" style="position:absolute;left:619px;top:352px;width:400px;height:325px;z-index:1" align="left">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="400" height="325">
<param name="flash_component" value="ImageViewer.swc" />
<param name="movie" value="example.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana',showControls:true,frameShow:false,slideDelay:5,captionSize:10,captionColor:#333333,titleSize:10,transitionsType:'Random',titleColor:#333333,slideAutoPlay:false,imageURLs:['http://i269.photobucket.com'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#FFFFFF,imageCaptions:[]}" />
<embed src="example.swf" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana',showControls:true,frameShow:false,slideDelay:5,captionSize:10,captionColor:#333333,titleSize:10,transitionsType:'Random',titleColor:#333333,slideAutoPlay:false,imageURLs:['http://i269.photobucket.com/albums/jj66/ihclub_hockey/tempsmall.gif'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#FFFFFF,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="325"> </embed>
</object>
</div>
<div>
<a href="http://www.emailmeform.com/fid.php?formid=72388" target="_new">Nascent Descent</a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Nascent Descent</title>
</head>
<body>
<body bgcolor="#383838" text="#000000">
<img src="Layout.gif" width="[color="#FF0000"]1200[/color]" height="[color="#FF0000"]900[/color]" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="191,2,242,20" href="http://www.yahoo.com" />
<area shape="rect" coords="161,3,192,19" href="http://www.google.com" />
<area shape="rect" coords="143,373,331,434" href="http://www.reverbnation.com" />
<area shape="rect" coords="142,445,328,504" href="http://www.ursession.com" />
<area shape="rect" coords="143,519,330,579" href="http://www.google.com" />
<area shape="rect" coords="132,839,601,899" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="600,840,1067,900" href="http://www.ursession.com/nascentdescent" />
<area shape="rect" coords="132,3,161,18" href="http://www.yahoo.com" />
<area shape="rect" coords="955,2,988,17" href="http://www.ebay.com" />
<area shape="rect" coords="567,91,650,119" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="650,91,732,119" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="983,92,1065,120" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="734,91,816,119" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="816,91,897,120" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="899,91,980,120" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="989,3,1021,16" href="http://www.reverbnation.com/nascentdescent" />
<area shape="rect" coords="1022,2,1067,17" href="http://www.reverbnation.com/nascentdescent" />
</map>
<div id="bv_" style="position:absolute;left:619px;top:352px;width:400px;height:325px;z-index:1" align="left">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="400" height="325">
<param name="flash_component" value="ImageViewer.swc" />
<param name="movie" value="example.swf" />
<param name="quality" value="high" />
<param name="FlashVars" value="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana',showControls:true,frameShow:false,slideDelay:5,captionSize:10,captionColor:#333333,titleSize:10,transitionsType:'Random',titleColor:#333333,slideAutoPlay:false,imageURLs:['http://i269.photobucket.com'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#FFFFFF,imageCaptions:[]}" />
<embed src="example.swf" quality="high" flashvars="flashlet={imageLinkTarget:'_blank',captionFont:'Verdana',titleFont:'Verdana',showControls:true,frameShow:false,slideDelay:5,captionSize:10,captionColor:#333333,titleSize:10,transitionsType:'Random',titleColor:#333333,slideAutoPlay:false,imageURLs:['http://i269.photobucket.com/albums/jj66/ihclub_hockey/tempsmall.gif'],slideLoop:false,frameThickness:2,imageLinks:['http://macromedia.com/','http://macromedia.com/','http://macromedia.com/'],frameColor:#333333,bgColor:#FFFFFF,imageCaptions:[]}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="325"> </embed>
</object>
</div>
<div>
<a href="http://www.emailmeform.com/fid.php?formid=72388" target="_new">Nascent Descent</a>
</div>
</body>
</html>
Wow bro, I'm pretty sure you can't.
I didn't realize you take the whole layout image and use image maps. I really don't mean to sound offensive, but I remember doing layouts like that the first couple times. But then I learned about table layouts, and now table-less layouts (using just divs)
Since your image is solid, there is no way to make it resize to a smaller width or wider width.
I didn't realize you take the whole layout image and use image maps. I really don't mean to sound offensive, but I remember doing layouts like that the first couple times. But then I learned about table layouts, and now table-less layouts (using just divs)
Since your image is solid, there is no way to make it resize to a smaller width or wider width.
QUOTE(Trippin7464 @ Apr 26 2008, 08:11 PM)
Wow bro, I'm pretty sure you can't.
I didn't realize you take the whole layout image and use image maps. I really don't mean to sound offensive, but I remember doing layouts like that the first couple times. But then I learned about table layouts, and now table-less layouts (using just divs)
Since your image is solid, there is no way to make it resize to a smaller width or wider width.
I didn't realize you take the whole layout image and use image maps. I really don't mean to sound offensive, but I remember doing layouts like that the first couple times. But then I learned about table layouts, and now table-less layouts (using just divs)
Since your image is solid, there is no way to make it resize to a smaller width or wider width.
hmmmm, unfortuantly Im still learning
, I acutally adjusted the thing and it looks better. Still a little off. But any ways, im getting ready to start a new web page, and i dont want to make this same mistake. Is there any way you can either create, or point me toward a sample of what a correct page using divs only would look like? maybe ill try it if i can see how to do it.Thanks,
Kevin
After a quick google search (search terms: simple css layout) I came up with this link
http://www.456bereastreet.com/lab/developi...sslayout/2-col/
It explains what and why you are doing the whole way.
Now before you go and say "I don't know anything about css either" well thats fine. I was very reluctant to learn css, but once I did I can say it helped me ALOT.
Another quick google search (search terms: simple css tutorial) and I found this GREAT looking tutorial
http://www.w3.org/Style/Examples/011/firstcss
If along the way through these examples you can ask here or search and i'm sure you will get your answer!
http://www.456bereastreet.com/lab/developi...sslayout/2-col/
It explains what and why you are doing the whole way.
Now before you go and say "I don't know anything about css either" well thats fine. I was very reluctant to learn css, but once I did I can say it helped me ALOT.
Another quick google search (search terms: simple css tutorial) and I found this GREAT looking tutorial
http://www.w3.org/Style/Examples/011/firstcss
If along the way through these examples you can ask here or search and i'm sure you will get your answer!
QUOTE(Trippin7464 @ Apr 26 2008, 09:53 PM)
After a quick google search (search terms: simple css layout) I came up with this link
http://www.456bereastreet.com/lab/developi...sslayout/2-col/
It explains what and why you are doing the whole way.
Now before you go and say "I don't know anything about css either" well thats fine. I was very reluctant to learn css, but once I did I can say it helped me ALOT.
Another quick google search (search terms: simple css tutorial) and I found this GREAT looking tutorial
http://www.w3.org/Style/Examples/011/firstcss
If along the way through these examples you can ask here or search and i'm sure you will get your answer!
http://www.456bereastreet.com/lab/developi...sslayout/2-col/
It explains what and why you are doing the whole way.
Now before you go and say "I don't know anything about css either" well thats fine. I was very reluctant to learn css, but once I did I can say it helped me ALOT.
Another quick google search (search terms: simple css tutorial) and I found this GREAT looking tutorial
http://www.w3.org/Style/Examples/011/firstcss
If along the way through these examples you can ask here or search and i'm sure you will get your answer!
thanks a bunch trippin, ill defenitely check these both out.
-Kevin
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.