11 {{ upvoteCount | shortNum }}
11 {{ upvoteCount | shortNum }}

Dividing a Web Page into 20 Equally Sized Rectangles?

by rushindo
8 replies
  • WEB DESIGN
    • |
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
#dividing #equally #page #photos #web
  • Profile picture of the author 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
    Signature
    >>>TURN YOUR TRAFFIC CAMPAIGN ON FIRE WITH THIS <<<
    FREE PINTEREST GRAPHICS PACKAGE
    {{ DiscussionBoard.errors[1857781].message }}
    • Profile picture of the author rushindo
      Originally Posted by Selena85 View Post

      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.
      {{ DiscussionBoard.errors[1859082].message }}
  • Profile picture of the author 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.
    {{ DiscussionBoard.errors[1858385].message }}
    • Profile picture of the author rushindo
      Originally Posted by fr0ke View Post

      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
      {{ DiscussionBoard.errors[1859093].message }}
  • Profile picture of the author Don Schenk
    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
    Signature

    Studies prove happier people have massively more success. It has worked for me. Use this one trick too... Click Here

    Total Competition Stomper - Simply the most powerful tactic your IM or Offline business will ever use... See it here!
    {{ DiscussionBoard.errors[1859436].message }}
    • Profile picture of the author rushindo
      Don, thanks a lot for the in depth reply! Much appreciated.
      {{ DiscussionBoard.errors[1859805].message }}
  • Profile picture of the author naffets77
    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.
    {{ DiscussionBoard.errors[1869382].message }}
    • Profile picture of the author kjcardona
      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
      {{ DiscussionBoard.errors[1870127].message }}

Trending Topics