Member Avatar for Down2Skills

Hey, i need help with webpages resizing so it fits all browsers/screen sizes, This is my front page of a website, those images are sliced so i get confuzed how to do it all.

<html>
<head>
<title>new size</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../site_layout.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (new size.psd) -->
<div id="Site_Layout">
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
    <tr>
      <td colspan="3">
        <img src="images/new-size_01.jpg" width="1680" height="593" alt=""></td>
    </tr>
    <tr>
      <td rowspan="2">
        <img src="images/new-size_02.jpg" width="547" height="457" alt=""></td>
      <td>
        <img src="images/new-size_03.jpg" width="606" height="179" alt=""></td>
      <td rowspan="2">
        <img src="images/new-size_04.jpg" width="527" height="457" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/new-size_05.jpg" alt="" width="606" height="278" align="baseline"></td>
    </tr>
  </table>
</div>

<!-- End Save for Web Slices -->

</body>
</html>
Edited by Down2Skills because: n/a
  • 4 Contributors
  • 6 Replies
  • 124 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Down2Skills

Dani AI

Generated

The page posted by is a classic case of a table-based, sliced-image layout with fixed pixel widths. That approach locks the design to specific sizes and won't adapt across devices. and were right to point toward relative sizing; 's warning about readable line-length and using a max-width is also important — replacing the table with a flexible container is the next step.

Practical checklist and an example pattern to follow:

  • Add the viewport meta so browsers scale layouts correctly on mobile.
  • Replace table cells with semantic DIVs and use Flexbox or Grid to layout columns.
  • Make images scale by CSS instead of fixed attributes; allow them to shrink with the container.
  • Constrain very wide layouts with a centered container and a sensible max-width to preserve readability.

A minimal example (meta + CSS pattern):

<meta name="viewport" content="width=device-width, initial-scale=1">

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
img.responsive {
  max-width: 100%;
  height: auto;
  display: block;
}
.row { display: flex; gap: 16px; }
.row > * { flex: 1; }
@media (max-width: 720px) {
  .row { flex-direction: column; }
}

For sliced artwork: combine slices into a single banner where possible, or use CSS background images with background-size: cover for decorative sections. For content images, use srcset/picture so browsers pick appropriate file sizes and DPR variants. Compress images and test at multiple widths with browser devtools.

Further reading: responsive images and sizing on MDN: Responsive images, and a quick Flexbox primer: Flexbox layout. Common breakpoints, removing fixed width attributes on images/tables, and checking the viewport meta solve most responsiveness problems.

Recommended Answers

All 6 Replies

Member Avatar for mohamedasif18

Is that you want to RESIZE your page in all screens means (GOOGLE), Just present your values pixels into percentage(%).. thats all.. Use all the DIV'S values as %, and include this on your style, * { margin:0; padding:0; }..

Member Avatar for judryn27

Adjusting a website to fit all types of resolution can be done by simply using the concept of relative width of a web page. The relative width of a webpage changes with the screen resolution of the computer screen which is used to view the web page. By defining the width in percentage and not in unit number, the page can adjusted according to the percentage defined.The minimum width or maximum width property can also be used while adjusting the website to fit all types of resolution.

Edited by judryn27 because: n/a
Member Avatar for Down2Skills

Could you adjust the code above and show me? Im new to HTML :/ Mainly a C++ Programmer. HTML seems pretty basic, but need to learn it :)

Member Avatar for mohamedasif18

Hi Down2Skills ,
First learn CSS which must need to design your HTML page . All the division's in CSS must be in % if you are trying to fix your web page in any size of monitor . insert * { margin:0; padding:0; } for avoid unwanted spaces in your webpage .
For Example i will giv you the undergoing site URL :

Change your monitor resolution and check this , More contents size wont change..

Member Avatar for drjohn

If your page expands to fill the screen totally and the browser is maximised, then on a 21" or 24" monitor, the user will be trying to read lines of text up to 21" or 23" in length!

This is a very BAD thing - finding the beginning of the next line of text is difficult.
So you should also set a max-width on your outermost div to prevent it becoming too large and difficult to read.
Upsetting users makes them leave your site.

Don't use tables for layout control.

Edited by drjohn because: n/a
Member Avatar for Down2Skills

thanks John

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.