I noticed on checking my website that, as one scrolls down, content creeps from left to right across the screen until, at the end of 30+ screens, the image has shifted perhaps as much as 150 pixels. All screens are made to fit a desktop monitor (fitting to other screens is a task yet to be attempted) without horizontal scrolling. The shifting of displayed images occurs when scrolling with the mouse or the down-arrow key.
Searching reveals articles about automatic horizontal scrolling but none (that Iāve found) describe the gradual move of display content to the right as one scrolls.
Iāve checked display settings in windows and updated the driver for my monitor.
Iāve checked my HTML and find nothing that I can identify that would cause the creeping.
Without being able to actually see your site, I would suggest checking your CSS, as itās responsible for the page layout. If thereās Javascript involved, you might check there also to see if it is making changes to the styling as you move down the page.
There is no javascript involved in my website, so far. It consists entirely of HTML and CSS code. Iāve been reluctant to post the URL because a) it is meant for consumption by family and extended family, and b) Iām afraid that security is inadequate, despite the fact that there are no data entry forms.
I have not attempted to post code here before. If Iāve done it wrong, please tell me. The HTML is from the file that I have the ādrift to the rightā problem with. There are more than 500 lines of HTML; so I deleted most of it. Know that the pattern you see in the 3 screens repeats for 30+ screens. With so few iterations, the drift to the right will be imperceptible. As hosted, the file is not presently accessing the images which is a problem Iām trying to find. There may well be other errors.
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css"
rel="stylesheet" href="CSS/clan.css" media="screen">
<!-- MAY 2025 -->
<title>Phyllis' Scrapbook</title>
</head>
<body>
<!-- Scrapbook Page main-menu -->
<div class="page-background">
<div class="page-heading">The Hutchins Clan
<div class="page-subheading">Phyllis' Scrapbook
</div>
<div class="scrapbook-frame">
<div class="scrapbook-left"> <img src="images/scrapbook/page01.jpg" alt="page 1" class="scrapbook-left">
</div>
<div class="scrapbook-right"> <img src="images/scrapbook/page02.jpg" alt="page 1" class="scrapbook-right">
</div>
<div class="scrapbook-page-number">Pages 1-2
</div>
</div> <!-- END of .scrapbook-frame -->
</div> <!-- END of .page-heading -->
</div> <!-- END of .page-background -->
<br><br>
<div class="page-background">
<div class="page-heading">The Hutchins Clan
<div class="page-subheading">Phyllis' Scrapbook
</div>
<div class="scrapbook-frame">
<div class="scrapbook-left"> <img src="images/scrapbook/page03.jpg" alt="page 2" class="scrapbook-left">
</div>
<div class="scrapbook-right"> <img src="images/scrapbook/page04.jpg" alt="page 2" class="scrapbook-right">
</div>
<div class="scrapbook-page-number">Pages 3-4
</div>
</div> <!-- END of .scrapbook-frame -->
</div> <!-- END of .page-heading -->
</div> <!-- END of .page-background -->
<br><br>
<div class="page-background">
<div class="page-heading">The Hutchins Clan
<div class="page-subheading">Phyllis' Scrapbook
</div>
<div class="scrapbook-frame">
<div class="scrapbook-left"> <img src="images/scrapbook/page05.jpg" alt="page 3" class="scrapbook-left">
</div>
<div class="scrapbook-right"> <img src="images/scrapbook/page06.jpg" alt="page 3" class="scrapbook-right">
</div>
<div class="scrapbook-page-number">Pages 5-6
</div>
</div> <!-- END of .scrapbook-frame -->
</div> <!-- END of .page-heading -->
</div> <!-- END of .page-background -->
<br><br>
</div> <!-- END of .page-heading -->
</div> <!-- END of . page-background -->
</body>
</html>
CSS Snippet. I think I got all the relevant CSS. The entire file runs to over 600 lines.
The boxes arenāt creeping to the right, no matter how many of the āpage-backgroundā divs I include. I made it about 800 lines long and they are all still lined up right above each other. Can you post the whole CSS file? It seems that must be where the issue isā¦
I canāt see any creep with the code you posted either but I do notice that at the end of the code you posted you have 2 divs that donāt belong there. If you have similar misplaced divs in your actual code and if some had margins applied to them you get a creep if they are all nested producing a new margin each time.
There are logic flaws in your css though and although they probably wonāt relate to the creep you see they are very fragile and prone to break. You set too many fixed sizes and heights making this very difficult to keep track of where you are especially when you add padding, borders and margins into the mix so you are getting overflow on some of your elements.
You only need to set a max-width on the grid and not size all the internal elements and then you already have a responsive page right from the beginning with no effort.
Youāve called it a page heading but didnāt use a heading tag? Youāve also nested the whole grid inside your heading rule which means all the styles cascade through to other elements that donāt need it. The āhutchins clanā text then in html terms becomes an anonymous box and the browser handles it as though its a block element. If you wanted to color the Hutchins text you would end up targeting everything in that grid as there is no unique identifier for the text
I realise you are probably too invested in your original code but I would look at changing it to something more reliable and structured. You donāt need to code widths and heights on everything but use a more natural flow. Hereās a quick example that will work on any device in a few lines of code.
However if you still want us to debug your original code further then as @tracknut said above we could do with some more of the css and perhaps a bigger chunk of html to see if you have problems with the nesting of divs.
Itās obvious that I have much to learn. I fear that my early training in COBOL and BAL have carried over and color my understanding of CSS and HTML. Iāll look into the issues you pointed out and try to learn from my mistakes.
I found the issues with misplaced divs by running my code through an online validator. That helps find and fix code lapses but doesnāt address logic problems. Similarly my CSS code passes a validator with similar warnings as you gave me. Iāll have to work harder to understand the errors and fix them. For now, however, my pages are displaying as I wish them to.
On a happy note, the issue of content drifting to the right across the screen went away. I wish I could say that I knew what fixed it, but I do not. I had a problem with some files not being properly referenced. Actually the href statements were OK but I had loaded files in the wrong place on my hosting site when I did a full replace. When I got that sorted, the creeping went away.
Your response caused me to learn some more about CSS. I have started to incorporate the styling changes your recommended but before I make them permanent, I wanted to ask a favor. May I ask, if itās not too great an imposition, specific questions about some of the code you supplied so I will understand it better and learn more about CSS? If you are amenable, should I post those questions here on the forum or is there a way to do that through PMs (that might be better than cluttering the board with neophyte questions)?
If it helps any, Iāve created a repo on github. It has my website code as hosted but none of the changes you suggested.
Before I post questions, I should post the name of my github repo: website-in-progress. There are a couple of other HTML files besides the scrapbook file. FWIW thatās why my CSS declares the background that you called .scrapbook as .page-background as it is used to style HTML in other files besides the scrapbook file.
Questions:
rem is new to me. My dad was a printer; so I know a little about typefaces and type sizes including picas, points, ems and ens. In the CSS code you kindly provided me, I see where rem is used but I donāt see where the root font size was declared that it is based on. Is it based on a default? I read that in āmostā browsers the default typesize is 16 points. By declaring the font, Birthstone, does that infer a default type size of 16pts, and therefore the size of a rem wherever it occurs? I ask because as an old mainframe programmer, I learned to be explicit for every element I used.
margin: 1rem auto 2rem; Itās my understanding that when declaring a group of margins, the arguments apply clockwise from the top; therefore I infer that your statement sets the top (1rem), the left and right to automatic meaning to center it and and the bottom (2rem). Do I read that correctly?
In the snippet above, h2.page heading h3.page-subheading sets attributes for both tags then the h3 tag is declared again with different margins and type size. Why declare it twice? I see that margin and type-size are different in the second declaration. Also could you explain what margins are addressed in each instance (top, right, bottom left). I guess I donāt understand the syntax a multiple margin attribute declarations.
@media: I searched this tag and found that it is used to fit content to smaller screensizes. What code - if any - needs to be placed in HTML to invoke this screen resizing for phones and iPads (assuming thatās what it does)?
Again, thanks for the help. I hope I donāt try your patience.
REM stands for Root EM. 1rem will be the root size of the device that it is displayed on. You donāt need to know what that will be as it may be changed by the user and in āolden daysā there were various defaults. These days its probably 16px but not guaranteed. The point being that a user may have changed the default root size in their user stylesheet and therefore want all font sizes based on that. If you use px then you disrespect the user choices.
The rem unit unlike the em unit does not compound on nested elements so is an easier method to use, em refers to the parent element but rem refers to the root element. Therefore its best to use rems for all your font-sizes and that means that users get what they wanted.
The class page-background is too literal a class name and if at some later date you decided you didnāt want a background there then you would have a class called page-background that doesnāt have a background! By using the class .scrapbook you can have a background or not and the element still makes sense. Donāt use classes to describe what things are visually but rather what things do. e.g. donāt say class=āredā but perhaps say class=āwarningā.
Itās ok to have a few utility classes. but iften they are more triuble than they are worth unless its a large project with well rganised themes etc.
Yes youāve got that right. Clockwise if there are four values. Three values are top (left and right) and bottom. 2 values are (top and bottom) and (left and right). Remember that elements like headings, ol, ul and p tags (and some others) have a browser default margin so you often need to be explicit as not all browsers have the same defaults
It saves code (sometimes masses of code) if a group of elements share many common styles. You can comma separate them then just define the differences.
Although the saving in the above is only a few lines it can make a massive difference over a whole site (and if there were more common styles than shown above). It also makes it easy to edit later on as you can read it more easily.
The @media queries allow you to specify a size when the display should change to something else. Generally you want to be device agnostic as there are hundreds of devices at hundreds of different sizes and you canāt possibly know them all. The ipad for example has many versions at different sizes and also if you turn it sideways you now have many different landcape sizes. therefore you cannot chase devices.
What do you do then?
Its best to ignore devices and base your media queries on the logistics of your design. If you grab your browser window and slowly make it smaller and at some point your design starts to look awkward or breaks then at that point you would consider adding a media query to make it look better. It may mean going from 2 columns down to one or scaling things a little smaller. The point is that you concentrate on the needs of the design and in that way you cater for all devices now and in. the future without having to know anything about them.
Note that for mobile devices to obey media queries you must put the viewport meta tag in the head of your page.
Without that tag devices will take a best guess and just scale the desktop to fit a small screen which makes it unreadable.
No that just declares the font-family that you want to use. It does nothing to the font-size. However birthstone is not a standard font so unless you are linking (or have downloaded) a google font or similar then users will just get what their default font happens to be on their system. When you apply a font-family to the body element then most of the elements on the page will automatically inherit that font and you donāt need to repeat it again (there are a few exceptions such as some form elements and a couple of other special tags but if you do a search on default reset styles you will learn some more about them).
No you just place it in your stylesheet at the point you want to make changes.
The styles in the media query will apply once the criteria has been met but that doesnāt mean that any styles that follow after the media query will be ignored so the placement of media queries is important.
The screens at 600px and smaller would be red because the body style follows the media query. You would therefore need to structure your styles like this:
Some people like to put their media queries at the bottom of the css file which is fine for small sites but on a large site you may want to put your header media queries under the code for the header styles. That means being logical and consistent is of great importance.
Another āgotchaā with media queries is people do this.
@media screen and (max-width: 600px) {
body{background:blue;}
}
@media screen and (max-width: 900px) {
body{background:green;}
}
They then wonder why the body is green at 600px and not blue. The reason is the same as the other example in that anything smaller than 900px is green which includes 600px. Therefore you have to order the media queries so they descend nicely (or ascend if using min-width).
e.g.
@media screen and (max-width: 900px) {
body{background:green;}
}
@media screen and (max-width: 600px) {
body{background:blue;}
}
Now the screen will be green at 900px and under and then turn green at 600px and under.
There are more complicated versions using ranges and min-widths but for small sites it doesnāt need to be that complicated. keeping things simple is generally easier even if sometimes its more verbose.
#PaulOB
Iāve run across another question about your CSS.
Originally I designed content to fit my screen without scrolling. I defined a width and height in my .page-background tag. You provided the .scrapbook tag which defines the page background; however in it you define no explicit width but use a max-width. You define no height.
I want all my screens to have the same framed background. My .page-background did that. When I try to substitue your .scrapbook for my .page-background I lose that. Another HTML file, index.html, has my navbar and a couple of images that have titles and captions. Their position and the background no longer fit as intended if I use your .scrapbook tag . The background frameās width is OK but the height shrinks and the images donāt fit in the background. I donāt know how to reconcile your code in .scrapbook with what I want to accomplish.
Iād post a screenshot but there seems to be no facility for that here. Hereās the index file:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css"
rel="stylesheet" href="CSS/clan.css" media="screen">
<!-- MAY 2025 -->
<title>Home</title>
</head>
<body>
<!-- Main Menu/Home Page main-menu -->
<div class="page-background">
<h2 class="page-heading">The Hutchins Clan</h2></h2>
<div class="home-page"> <!-- Defined as "display: grid" -->
<div class="main-menu"> <!-- grid box 1; row 1 column 1 -->
<ul class="no-bullets">
<li>
<a href="index.html">Home</a><br>
<a href="Phyllis-Scrapbook.html">Phyllis' Scrapbook</a><br>
<a href="personal-pages.html">Personal Pages</a><br>
<a href="hutchins-line.html">Hutchins Surname Line</a> <br>
<!--<a href="baker-line.html">Baker Surname Line</a> <br>
<a href="histories.html">Histories</a> <br>
<a href="anecdotes.html">Anecdotes</a> <br>
<a href="submissions.html">Submissions</a> <br>
<a href="search.html">Search</a> <br>
<a href="help.html">Help</a> <br>-->
</li>
</ul>
</div> <!-- END of .main-menu -->
<h3 class="parents-photo-heading">Healy and Pa</h3> <!-- grid box 2; row 1 column 2 -->
<div class="parents-photo">
<img src="images/healy-and-pa-ca-1956.jpg" alt="Healy and Pa" class="parents-photo">
</div> <!-- grid box 4; row 2 column 2 -->
<div class="parents-photo-caption">
Standing in front of their home at<br>527 N. East Street, Raleigh, NC (circa 1956)
</div>
<h3 class="family-photo-heading">The Entire Clan</h3> <!-- grid box 3; row 1 column 3 -->
<div class="family-photo"> <!-- grid box 5; row 2 column 3 -->
<img src="images/the-clan-in-color-cropped-with-blur.png" alt="the clan" class="family-photo">
</div>
<div class="family-photo-caption">The
<u>Only</u> Photograph Ever Taken of the Whole Clan<br>Left to right,
front row: Robert Haddon, Nancy Catherine, Mary JoAn
"Mary Jo", Healy (Healy Heady Mauden Baker), Pa (Charles Haddon Spurgeon Hutchins), William Spurgeon "Bill"<br> Back row: John Fox, James Alfred, Elizabeth Lee "Baby Lee", Frank Tabor, Charles Baker<br>
Photo taken at Nancy's wedding rehearsal party, July 1958
</div>
</div> <!-- END of .home-page -->
</div> <!-- END of .page-background -->
</body>
</html>
You can easily upload an image by selecting the upload icon (the 7th icon along from the left on this edit window). The one that show a black bar at the bottom and an upwards arrow above it.
Ok lets get one thing clear before I make you dance through a lot of hoops that you may not want
If this site is just for you and for no one else then you can do exactly as you want because you are the only one who will see it. However, it would seem pointless to put it on the web if it was just for you but we have had members in the past who want the page only for themselves and care about no one else. If thatās you then that is fine and we can tailor the answers to suit only you. It makes no difference to me if its just for you and thatās fine.
However if the page is for online consumption and multiple viewers then you cannot use the one big page background image approach unless everyone in the world has exactly the same computer, browser, os, monitor, resolution etc etc.. We simply do not design sites in that way with one big background image fitting fluid text. Its a no go right from the start and something that is never seen on professional sites. All I would have to do is increase the text size from my browser (which I am prone to do) and that would blow out the whole page as the text would overflow your fixed height.
Fixed heights on any element that holds fluid content (like text) is anathema to responsive design. Itās just not done. What you have to do instead is use images that can scale and stretch to suit the purpose of the design. After all for your scenario you could just use an image for the whole page including text but of course that is not accessible or useful.
If you let me know whether this is just for you then we can see about matching your image to your computer screen height only?
On the other hand if youād like to make a responsive site then Iād need to see what image you were using and then we can decide whether we can still keep the same look but make it scale.
Hope that makes sense? I donāt want to force you to learn best practices if this is just for personal consumption.
My ignorance is very apparent. Being self-taught, iāve read tutorials and articles then adapted what I learned to give a screen I liked. I gave little thought to the bigger world.
(I donāt know if you saw my introductory post. You might benefit from knowing that Iām 83 yo and taking this project on as hobby and pastime. I was a mainframe programmer back in the '70s using COBOL and BAL, mostly; but itās been a donkeyās age since I called myself a programmer.)
While my website will never be for the world, itās intended audience is my extended, mult-igenrational family and friends. That might run to 500 or so people. Iām the last of my generation but there are 4 more behind me who might like to see what Iām presenting. They will use all sorts of platforms to view the content.
So, as you seem willing to help overcome my ignorance, Iām eager to learn.
Thanks for the heads up on the upload icon and for all the help youāve given me.
Iām nearly 73 so I commend you for persevering. The mistakes you are making are the same mistakes we all made at the start but that is part of the learning process.
Iām sure youāll be able to create something that is more responsive with a few design tweaks.
