Member Avatar for DSLKeper

Hi!

I’m learning how to write basic HTML code.

This HTML page http://www.directsellinglive.com/POWER50Success/POWER50Success.htm 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(http://www.directsellinglive.com/POWER50Success/Success-Weekend-Flyer-Coming-Page-2.jpg); 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
  • 412 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by shibin vadayatt
Member Avatar for Feemacbee

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="http://www.directsellinglive.com/POWER50Success/Success-Weekend-Flyer-Coming-Page-2.jpg" 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.