Member Avatar for DSLKeper

Hi!

I’m learning how to write basic HTML code.

This HTML page that I created
does not show scroll bars in any browser. What code do I need to add to get the vertical and horizontal scroll bars in a browser to show in a smaller monitor when the page is larger than the monitor size?

If you would please add directly into code below so I can see where it goes. I learn best that way.

This is my 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>
<title> POWER 50 Success Seminar </</title>
</head>
<body style="background:#000000
url(); background-repeat:no-repeat; background-position:top center;">
<table style="margin:0 auto; text-align:center; width:100%; min-width:800px;">
<TBODY>
<TR><td>


</TD></TR></TBODY></TABLE>
</body>
</html>

  • 4 Contributors
  • 6 Replies
  • 435 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by shibin vadayatt

Dani AI

Generated

Quick diagnosis: no scrollbars appeared because the flyer was set as a decorative background while the page layout was effectively full‑width. Background images do not change an element’s layout size, so the browser has nothing that overflows the viewport to trigger scrollbars. The fixes from the thread are on target, but each has tradeoffs, so here’s how to choose and implement the right one.

Credit where due: ’s idea to put the image in the document will let browsers compute layout and show scrollbars naturally, and ’s point about using a sized element explains why a large fixed box produces overflow. ’s overflow suggestion works when applied to an element that actually has constrained dimensions — overflow won’t force scrolling unless content exceeds a box’s width/height.

Practical options (pick one):

  • Make the flyer real content: use an <img> so the page size follows the image. For a much better UX across devices, serve a responsive image. Example CSS (use in a stylesheet or a small style block):

    <img src="flyer.jpg" alt="POWER 50 Success flyer" class="flyer">

/* CSS */
.flyer { max-width: 100%; height: auto; display: block; margin: 0 auto; }

    That preserves the image but prevents forced horizontal scrolling on small screens and lets vertical scroll appear when needed.

  • If the site must be a fixed‑pixel mockup (not recommended), wrap the flyer in a container with an explicit pixel width or set min-width to the flyer’s pixel width; that will cause horizontal scrolling on narrow monitors.

  • If you want the background approach to scale instead of scroll, use CSS background sizing (e.g., background-size: cover or contain) so the flyer fits available space instead of creating scrollbars.

Extra notes: avoid tables for layout (use CSS), include descriptive alt text for accessibility, and optimize/compress large images for load speed. For a new project use the simple HTML5 doctype (<!doctype html>) to keep validation and future changes straightforward.

Recommended Answers

All 6 Replies

Member Avatar for Member #920377

Hi DSLKeper,
Because your image is placed as a background image you won't get any scroll bars. You could consider placing your image between the <TD></TD> tags instead.
i.e:

<table width="800px" height="600px">
<TBODY>
<TR><td><img src="" width="1916" height="1067" alt="description goes here" />

</TD></TR></TBODY></TABLE>

However, it is not considered good practice to use tables like this. Because you are a beginner I won't tell anyone ;)

Member Avatar for Dandello

What's happening is the table is 100% wide. Period. No scroll bars. Vertical scroll bars will show up when you have content in the table.

If all you want is the image and nothing else on the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title> POWER 50 Success Seminar </title>
</head>
<body style="background:#000000
url(http://www.directsellinglive.com/POW...g-Page-2.jpg); background-repeat:no-repeat; background-position:top center;">
<div style="width:1916px; height:1067px;">&nbsp;
</div>
</body>
</html>

You may as well learn 'strict'. It'll be easier when you decide to go to HTML5.

Edited by Dandello because: n/a
Member Avatar for DSLKeper

Wow, it worked! But of course you knew it would.

What is 'strict'?

Feemacbee, Dandello and the Daniweb community you all are amazing! I had no idea there was help out there like this.

Member Avatar for Dandello

Well, even though this marked as solved: 'strict' means only going by the xhtml specification with no provisions for some of the things older versions of html allowed. When validating, it means more things will be flagged because they are no longer part of the xhmtl specification. But it also means that most of your code will be valid for html5 when you get there.

And while not exactly part of the specification, tables should only be used for tabular data. Css is used for all other design and positioning.

Member Avatar for shibin vadayatt

use style="overflow:auto" inside body tag..
example:
<body style="overflow:auto">
.................
.................
..............
</body>

Member Avatar for shibin vadayatt

define the height of body and include "overflow:auto" style
use style="overflow:auto" inside body tag..
example:
<body style="overflow:auto; height:768px">
.................
.................
..............
</body>

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.