The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
pandy
post Jun 17 2019, 06:31 PM
Post #2


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

Group: WDG Moderators
Posts: 18,403
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

Posts in this topic


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: 21st October 2019 - 10:15 PM