The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How to stop text scrolling into background?
Janesdf
post Jun 17 2019, 12:32 PM
Post #1





Group: Members
Posts: 4
Joined: 17-June 19
Member No.: 26,910



Hi,

I'm new to this forum. I am in the beginning stage of creating a website for myself and I am a novice with html. When I scroll to the end of the text instead of the entire page scrolling to the bottom, the text scrolls up into the background. Attached are two images. In the second image, you can see how my text is now spread across the background image after scrolling. I would like to avoid that and I know it is possible, I just don't know the code for it.

Thank you for any help you can provide.

Jane

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 17 2019, 06:31 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,458
Joined: 9-August 06
Member No.: 6



Hi Jane smile.gif

Do you mean you want the text to scroll and everything else to stay put? You can do that with CSS, position: fixed.
http://www.w3.org/TR/CSS2/visuren.html#propdef-position

It works like this.

CODE
#topstuff   { position: fixed; top: 0;
              height: 6em; width: 100%; background: red }
#leftstuff  { position: fixed; top: 8em;
              width: 8em; background: yellow }
#main       { margin: 8em 0 0 9em }


HTML
<div id="topstuff">
<p>
Top</p>
<p>
Top</p>
</div>

<div id="leftstuff">
<p>
Left</p>
<p>
Left</p>
<p>
Left</p>
<p>
Left</p>
</div>

<div id="main">
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
</div>


You need to give the text box margins so it goes free of the positioned boxes, or they will be on top of the text and cover it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Janesdf
post Jun 19 2019, 05:48 AM
Post #3





Group: Members
Posts: 4
Joined: 17-June 19
Member No.: 26,910



I added the code you provided to my web page, substituting my paragraphs, and still have the same problem. I don't think you understand what I am asking, or, there is something missing from the code that you provided.

Below is the url to my page. If you scroll, you will see what happens. I want the entire page to scroll, not just the text.

http://teaherbmilksoaps.angelfire.com/

QUOTE(pandy @ Jun 17 2019, 07:31 PM) *

Hi Jane smile.gif

Do you mean you want the text to scroll and everything else to stay put? You can do that with CSS, position: fixed.
http://www.w3.org/TR/CSS2/visuren.html#propdef-position

It works like this.

CODE
#topstuff   { position: fixed; top: 0;
              height: 6em; width: 100%; background: red }
#leftstuff  { position: fixed; top: 8em;
              width: 8em; background: yellow }
#main       { margin: 8em 0 0 9em }


HTML
<div id="topstuff">
<p>
Top</p>
<p>
Top</p>
</div>

<div id="leftstuff">
<p>
Left</p>
<p>
Left</p>
<p>
Left</p>
<p>
Left</p>
</div>

<div id="main">
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
<p>
The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings</p>
</div>


You need to give the text box margins so it goes free of the positioned boxes, or they will be on top of the text and cover it.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 19 2019, 07:06 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,255
Joined: 10-August 06
Member No.: 7



Currently this DIV with the large image:
CODE
<div id="page-background"><img src="http://teaherbmilksoaps.angelfire.com/images/background3.jpg" width="100%" height="100%" alt=" "></div>


is positioned fixed:
CODE
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

If you remove the fixed positioning it should scroll along with the page.

However, then its canvas-like beige background may not be tall enough for the text (depending on amount of text). One way to avoid that is to make only the text area scrollable; however, I think the best solution is to make the beige canvas a different image, and use it as a tiling CSS background for the text, while the header part remains in an IMG element at the top.

...

As a sidenote, there are some HTML errors. The HTML file currently begins with this:

CODE
----<html>

You should replace that with this:

CODE
<!doctype html>
<html>

in order to make the browser interpret CSS correctly.

There is also at least two BODY sections, which is invalid HTML. I also saw some stray CSS in the HTML, and a few more errors like that.

User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 19 2019, 10:17 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,458
Joined: 9-August 06
Member No.: 6



Yeah, if you want the whole page to scroll, don't do any fixed positioning. That's the default behaviour, so not that hard to accomplish. wink.gif
I totally misunderstood what you wanted. Sorry about that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Janesdf
post Jun 19 2019, 03:03 PM
Post #6





Group: Members
Posts: 4
Joined: 17-June 19
Member No.: 26,910



Thank you both so much!

The page now scrolls as I wanted. I removed the beige canvas background as it was part of the image. However, what code would I use to add the beige canvas as a background for the text per your comment "I think the best solution is to make the beige canvas a different image, and use it as a tiling CSS background for the text".

I removed the errors per your suggestions above, but, since I am such a beginner, I'm not sure if I caught all of the errors.

You can see it again at http://teaherbmilksoaps.angelfire.com/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 19 2019, 05:05 PM
Post #7


.
********

Group: WDG Moderators
Posts: 8,255
Joined: 10-August 06
Member No.: 7



QUOTE(Janesdf @ Jun 19 2019, 10:03 PM) *

I removed the beige canvas background as it was part of the image. However, what code would I use to add the beige canvas as a background for the text per your comment "I think the best solution is to make the beige canvas a different image, and use it as a tiling CSS background for the text".

Use a CSS background-image on the element containing the text (the table cell), or maybe on the #content DIV.

QUOTE
I removed the errors per your suggestions above, but, since I am such a beginner, I'm not sure if I caught all of the errors.

There's a nested SCRIPT element on line 48, a stray </head> end tag on line 107, </body> and </html> end tags on line 152 (even though the content continues after it).

CODE
<TD><center><b><A HREF="index.html" target="_blank"><IMG SRC="http://teaherbmilksoaps.angelfire.com/images/buttonhome.jpg"></A></center></TD>

The B element's end tag is missing (I'd rather use CSS instead of the CENTER and B elements).

Opening every link in a new window with TARGET="_blank" might be annoying.

The IMG element must always have proper ALT text, especially if the picture is used in a navigation menu (this will help e.g. search engines, that can't see pictures).

CODE
<FONT SIZE=4><b>ABOUT ME</b>

All the FONT elements's end tags are missing. But instead of FONT you might use a real heading element, like this:

CODE
<h1>ABOUT ME</h1>

and style the H1 with CSS if you want.

BTW you might also remove all the fixes for old IE browser versions, I doubt anyone is using anything older than IE11 today.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 19 2019, 11:05 PM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,458
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Jun 20 2019, 12:05 AM) *

The IMG element must always have proper ALT text, especially if the picture is used in a navigation menu (this will help e.g. search engines, that can't see pictures).

Not to speak of how much it will help people that can't see at all. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Janesdf
post Jun 20 2019, 06:07 AM
Post #9





Group: Members
Posts: 4
Joined: 17-June 19
Member No.: 26,910



I've now removed most of the errors, I say "most" because there may still be errors that I missed or that I did not realize are errors. Once I get this first page correct, I will use it as a template for the other pages.

Unfortunately, I do not understand the comment

"Use a CSS background-image on the element containing the text (the table cell), or maybe on the #content DIV. "

Could you provide the proper code to add the second image for the canvas background under the top image and, what css tutorials would you recommend so I can learn how to code a page properly? I get the impression that CSS is a better choice than html?

Thanks again for all of your help.

Jane
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 20 2019, 07:24 AM
Post #10


.
********

Group: WDG Moderators
Posts: 8,255
Joined: 10-August 06
Member No.: 7



QUOTE(Janesdf @ Jun 20 2019, 01:07 PM) *

I've now removed most of the errors, I say "most" because there may still be errors that I missed or that I did not realize are errors. Once I get this first page correct, I will use it as a template for the other pages.

You can check for more errors at https://validator.w3.org/nu/?doc=http%3A%2F...ngelfire.com%2F --just ask here if some of the error messages are hard to understand.

There's still a nested SCRIPT start tag on line 48, also I didn't notice before that the tables lack TR elements.

QUOTE
Unfortunately, I do not understand the comment

"Use a CSS background-image on the element containing the text (the table cell), or maybe on the #content DIV. "

Could you provide the proper code to add the second image for the canvas background under the top image

Maybe something like this?

CSS:

CODE
.content {color: #000; background: #fff url(background.jpg);}

(if the background-image's URL is "background.jpg").

HTML:

CODE
<td class="content">
<h1>ABOUT ME</h1>
...
</td>

or if you want the background on the entire table, just put the CLASS attribute in the <table> start tag instead. You might also add the same CLASS to the table with the nav menu links if you want.

QUOTE
and, what css tutorials would you recommend so I can learn how to code a page properly?

You could start here: http://htmlhelp.com/reference/css/ though it's quite old by now. But there are many good ones on the web.

QUOTE
I get the impression that CSS is a better choice than html?

A good page uses both: HTML for the structure and semantics of the content (like the walls and windows in a house), while CSS is used for the styling and decoration (like wallpapers and curtains).

Back in time (before CSS caught on) HTML was used for decoration as well, but such "presentational" HTML elements or -attributes are deprecated nowadays, though browsers still support them for legacy reasons (many of the validator errors in the link above are caused by this).


User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 11th December 2019 - 06:56 AM