Dividing a Web Page into 20 Equally Sized Rectangles?

rushindo · 03-12-2010, 12:28 PM

Can anyone explain how to divide a web page equally into 20 equally size rectangles (that will actually be photos) so that the photos fill the entire page in every browser?

Thanks,
Brandon

Selena85 · 03-12-2010, 01:19 PM

I'm not sure I understood your question but.. There are lots of different monitor resolutions out there... I don't think you can find a solution that works the same way in all of them. In smaller resolutions the photos may create a scrollbar and on higher resolutions there may be some empty space left.

You can try a fluid layout, but it won't be perfect. (fluid changes according to the size of your browser window). Try this: CSS Fluid layout tutorial | NowCSS

fr0ke · 03-12-2010, 03:47 PM

This could be done with some javascript functions that take the current viewport size of the browser and then calculate the size of each image, then resize and load the images accordingly.

Of course, if the images are all different dimensions, it makes the problem exponentially more difficult, so the above assumes the 20 images are all the same dimension.

rushindo · 03-12-2010, 08:05 PM

Quote:

Originally Posted by Selena85

I'm not sure I understood your question but.. There are lots of different monitor resolutions out there... I don't think you can find a solution that works the same way in all of them. In smaller resolutions the photos may create a scrollbar and on higher resolutions there may be some empty space left.

You can try a fluid layout, but it won't be perfect. (fluid changes according to the size of your browser window). Try this: CSS Fluid layout tutorial | NowCSS

Hi there. Basically I mean the web page consists of nothing but 20 different photos. I want it to look neat.

Hmmmm... fluid layouts. I'll check it out. Thanks.

rushindo · 03-12-2010, 08:14 PM

Quote:

Originally Posted by fr0ke

This could be done with some javascript functions that take the current viewport size of the browser and then calculate the size of each image, then resize and load the images accordingly.

Of course, if the images are all different dimensions, it makes the problem exponentially more difficult, so the above assumes the 20 images are all the same dimension.

Yes the photos are all the exact same dimension. Is there a name for what you described with javascript?

Thanks

Don Schenk · 03-12-2010, 10:59 PM

Most webdesign software lets you specify the exact size of tables or cells within a table. Your webpage can be one rectangluar table with cells for the photos - 4 across or 5 across.

So you would make one table with 20 cells in it and spcify the size of the table and the size of each cell. In Dreamweaver the cell size boxes appear at the bottom of the design page. In KompoZer and Nvu, the table with its number of cells appears when you click on insert - table. Then you go to format and table specs then cell specs.

You then insert a photo into each table - one at a time. You can make each photo be a link if you wish.

The size of the page on the monitor of the person viewing the page is determined by the resolution setting of their monitor. You can not control how they have set their system. Your Webpage could appear large or small. You can make the size of cells be determined as a percentage rather than as a specific size. Off hand I don't recall whether you can set the table size as a percentage of the Webpage. If so, make it 100%

:-Don

rushindo · 03-13-2010, 02:07 AM

Don, thanks a lot for the in depth reply! Much appreciated.

naffets77 · 03-15-2010, 05:30 PM

You could do it in css (avoiding tables) by assigning the images widths based on %, the result would be something like

Code:

<div id='img_block_holder' style='width:90%;'>
 <div class='img' style='width:18%; float:left;'>[img goes here]</div>
 <div class='img' style='width:18%; float:left;'>[img goes here]</div>
 <div class='img' style='width:18%; float:left;'>[img goes here]</div>
 <div class='img' style='width:18%; float:left;'>[img goes here]</div>
 <div class='img' style='width:18%; float:left;'>[img goes here]</div>
</div>

So basically it's saying spread them across 90% of the page (you'd center align that div so it looks nice.. if you want it fully across just make it 100%).

Then Each img is 18% w/a little room for Spacing between the images (rather than 20%) - you'd have to set some margins in the css i.e. margin:1%; - which would put a 1% margin on each side of the img.

Code's not tested, and the inline styles should be put in a external css file but something like that should work across all resolutions.

kjcardona · 03-15-2010, 08:45 PM

One thing that you may encounter is the quality of the photos as they get stretched, or the different screen Aspect Ratios from regular to wide screen make a difference.

So just keep that in mind. Thanks

03-12-2010, 12:28 PM	#1
rushindo Ever Learning Warrior War Room Member Join Date: Feb 2005 Posts: 761 Thanks: 38 Thanked 27 Times in 13 Posts	Dividing a Web Page into 20 Equally Sized Rectangles? Can anyone explain how to divide a web page equally into 20 equally size rectangles (that will actually be photos) so that the photos fill the entire page in every browser? Thanks, Brandon
	Top Lawyers in America National Consumer Protection Last edited by rushindo; 03-12-2010 at 08:17 PM. Reason: More clarification

03-12-2010, 01:19 PM	#2
Selena85 PLR-Diva.com War Room Member Join Date: Nov 2009 Posts: 188 Thanks: 6 Thanked 99 Times in 25 Posts	Re: Dividing a Web Page Equally into 20 Photos? I'm not sure I understood your question but.. There are lots of different monitor resolutions out there... I don't think you can find a solution that works the same way in all of them. In smaller resolutions the photos may create a scrollbar and on higher resolutions there may be some empty space left. You can try a fluid layout, but it won't be perfect. (fluid changes according to the size of your browser window). Try this: CSS Fluid layout tutorial \| NowCSS
	>>> Jaw Dropping Niche PLR Blogs - Completely Done-For-You With Hot Graphics, Quality Articles, And Priced To Sell! - Grab One Quick! <<< PLR-Diva.com: PLR Articles & Turnkey Websites

03-12-2010, 03:47 PM	#3
fr0ke Warrior Member Join Date: Feb 2010 Posts: 11 Thanks: 0 Thanked 2 Times in 2 Posts	Re: Dividing a Web Page Equally into 20 Photos? This could be done with some javascript functions that take the current viewport size of the browser and then calculate the size of each image, then resize and load the images accordingly. Of course, if the images are all different dimensions, it makes the problem exponentially more difficult, so the above assumes the 20 images are all the same dimension.

03-12-2010, 10:59 PM	#6
Don Schenk Senior Warrior Member War Room Member Join Date: Sep 2007 Location: Cincinnati, OH and beautiful Park City, UT Posts: 1,649 Thanks: 774 Thanked 495 Times in 335 Posts	Re: Dividing a Web Page into 20 Equally Sized Rectangles? Most webdesign software lets you specify the exact size of tables or cells within a table. Your webpage can be one rectangluar table with cells for the photos - 4 across or 5 across. So you would make one table with 20 cells in it and spcify the size of the table and the size of each cell. In Dreamweaver the cell size boxes appear at the bottom of the design page. In KompoZer and Nvu, the table with its number of cells appears when you click on insert - table. Then you go to format and table specs then cell specs. You then insert a photo into each table - one at a time. You can make each photo be a link if you wish. The size of the page on the monitor of the person viewing the page is determined by the resolution setting of their monitor. You can not control how they have set their system. Your Webpage could appear large or small. You can make the size of cells be determined as a percentage rather than as a specific size. Off hand I don't recall whether you can set the table size as a percentage of the Webpage. If so, make it 100% :-Don
	"The 25 Profit Thieves and The 14-Day Turnaround - How To Build Any Business Fast." Get the downloadable book FREE! It's NOT a sales pitch.http://www.BuildAnyBusinessFast.com

03-13-2010, 02:07 AM	#7
rushindo Ever Learning Warrior War Room Member Join Date: Feb 2005 Posts: 761 Thanks: 38 Thanked 27 Times in 13 Posts	Re: Dividing a Web Page into 20 Equally Sized Rectangles? Don, thanks a lot for the in depth reply! Much appreciated.
	Top Lawyers in America National Consumer Protection

03-15-2010, 05:30 PM	#8
naffets77 Warrior Member Join Date: Jul 2009 Posts: 17 Thanks: 1 Thanked 0 Times in 0 Posts	Re: Dividing a Web Page into 20 Equally Sized Rectangles? You could do it in css (avoiding tables) by assigning the images widths based on %, the result would be something like Code: <div id='img_block_holder' style='width:90%;'> <div class='img' style='width:18%; float:left;'>[img goes here]</div> <div class='img' style='width:18%; float:left;'>[img goes here]</div> <div class='img' style='width:18%; float:left;'>[img goes here]</div> <div class='img' style='width:18%; float:left;'>[img goes here]</div> <div class='img' style='width:18%; float:left;'>[img goes here]</div> </div> So basically it's saying spread them across 90% of the page (you'd center align that div so it looks nice.. if you want it fully across just make it 100%). Then Each img is 18% w/a little room for Spacing between the images (rather than 20%) - you'd have to set some margins in the css i.e. margin:1%; - which would put a 1% margin on each side of the img. Code's not tested, and the inline styles should be put in a external css file but something like that should work across all resolutions.
	RankPay - Don't Pay Until You Rank - The best in SEO Services. RankPay features expert SEO analysis. They will REFUSE your generic keywords and will work with you to pick keywords FREE OF CHARGE.

03-15-2010, 08:45 PM	#9
kjcardona Web Result Guru War Room Member Join Date: Mar 2010 Location: Azusa, California Posts: 21 Thanks: 2 Thanked 1 Time in 1 Post Social Networking Contact Info	Re: Dividing a Web Page into 20 Equally Sized Rectangles? One thing that you may encounter is the quality of the photos as they get stretched, or the different screen Aspect Ratios from regular to wide screen make a difference. So just keep that in mind. Thanks
	[aKa] Web Results Guru - Web Strategist and Internet Enthusiast, Netsologist, Internet Marketer, Father, Husband, Success and Challenge Junky Chief Netsologist @ netsology.com \| Twitter \| Facebook \| Personal Site \| Resource Site