PAGE SHIFT ALIGNMENT

Report · Feb 24, 2024

Minor alignment issue driving me crazy.

Along the top gray box I have links to six pages (including the home main page).

Clicking the MAIN PAGE, TRAVEL, RACING and MISC IMAGES link, the pages all seem to open and line up the same, but if you click the MARKETPLACE and CONTACT link, the pages open and seem to shift slighly to the right. The code for all the pages look identical (unless the obvious right in front of your nose error. Again no big deal, but I see it!

Walter

Report · Feb 24, 2024

'Contact' and 'Marketplace' are pages where the content (because it's short) do NOT evoke a vertical browser scroll bar, whilst the other pages evoke a scroll bar because they have more content. The page shift you see is as a result of the browser not having to, or having to, allocate room for the vertical scrollbar.

Report · Feb 24, 2024

Adding to @osgood_'s reply, the shift that you are seeing is normal behaviour.

The shift that you are not seeing (e.g. homepage) and which is far more important!

See here for more.

Also, make sure that the pages have a meta description and a meta viewport as in

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="My page description">

There are many more problems, like no headings and no aria attributes. If you questions, please Google first before coming back here.

Wappler, the only real Dreamweaver alternative.

Report · Feb 24, 2024

SHORT ANSWER: Browser scoll bars take up space on long pages. They don't appear on short pages.

There is a work around for keeping footers locked to the bottom of screen on long & short pages but it requires valid code.

Fix your code errors first.

https://validator.w3.org/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 25, 2024

Copy & paste this into a new blank document.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Flexbox Footer at Bottom</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin:0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

main {display:flex;width:95%;}

.col {padding:0 2%; }

.flex1 {width:25%}

.light {background:#DDD;}

.dark {background:#222; color:#FFF}

/**OPTIONAL FOOTER AT SCREEN BOTTOM**/
footer {margin-top:auto}

/* Special Rules for mobiles */
@media only screen and (max-width: 800px) {
main {flex-wrap: wrap}
}

</style>
</head>
<body>
<nav class="dark">
<p>Navigation here</p>
</nav>

<header>
<h1>Hello World</h1>
</header>

<main>
<div class="col light flex1">
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
</div>
<div class="col">
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. </p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>

<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>

<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
</div>
<div class="col light flex1">
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. </p>
<p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. </p>
</div>
</main>

<footer class="dark">
<p>Footer goes here</p>
</footer>

</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator