How to fixed position viewport bottom and container side?

HTML-CSS
1

Hello and thank you.
I would like to have a Back-to-Top on the bottom of my viewport remain within the container. I have exaggerated this by reducing the maximum width.

How can I get the football to appear within the page-wrapper?

<!DOCTYPE html>
  <html lang="en"> 
    <head>
      <meta charset="UTF-8">
      <meta name="viewport"    content="width=device-width, initial-scale=1">
      <title>MA test.</title>
      <style>
        * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: Segoe, sans-serif;
  font-size: 110%;
  background-color: lightgrey;
  color: black;
}
page-wrapper {             /* the content holder **/
  display: block;
  width: 90%;
  max-width: 6in;
	padding: 1rem;
	background: #f9f9f9;
	text-align: left;
	border: 1px solid black; 
	/* margin: 25px auto; */
  margin-top: 25px;
  margin-bottom: 25px;
	min-height: 300vh;
	box-shadow: 10px 10px 5px #888888;
}
.back-to-top {
  position: fixed;
  display: flex;
  justify-content: center;
  padding: 2px;
  border: 1px solid black;
  border-radius: 50%;
  opacity: .6;
  right: 20px; 
  bottom: 1rem;
  width: 3.5rem;
  height: 6rem;
  text-align: center;
  line-height: 1.2rem;
  color: black;
  background: white;
  flex-direction: column;
  overflow: visible;
  }
      </style>
    </head>

    <body id="top">
      <page-wrapper>
        <main>
          <h1>A Header</h1>
          <section>
            <h2>Section 1</h2>
          </section>
        </main>
        <footer>
          <hr>
          <a href="#top" class="back-to-top"><b>&uarr;</b> To Top</a>
        </footer>
              
      </page-wrapper>
    </body>
  </html>
2

To have the “back-to-top” button appear within the page-wrapper, you can add position: relative to the page-wrapper CSS, and change the “back-to-top” CSS to have position: absolute instead of fixed .

3

Thank you, @zaklina
I had tried that, and did again. That does place it within the page-wrapper, however it stays at the bottom of the container and not the viewport. My hope is that it would be visible as the page is scrolled.

4

If I understood well your idea change the following:

  • Instead of <page-wrapper> use <div class="page-wrapper">
  • in .page-wrapper class in css, set the width to 100% (delete max-width)
5

@DobarBREND , thank you. Setting the width to 100% makes (the real project) too hard to read on a big screen. I used <page-wrapper> in stead of <div just for the semitic. That did not change the appearance and it does validate.

Edit: corrected the word semitic.

6

you have error here…
is it a class?

7

Ok. One more try. If you want to view Back-To-Top all the time within the page-wrapper change the right property into the left, and set its value to 500px. Now if you scroll page the .back-to-top will be visible all the time.

8

<page-wrapper> is not a valid HTML tag, as it is not part of the HTML specification. It is possible that this is a custom tag used by the developer to identify a specific element, but it will not be recognized by the browser and will not have any default styling or behavior.

9

back-to-top

1 Like
10

@zaklina , HTML-5 allows this as a semantic tag. I have used it in place of <section id=“page-wrapper”> or <div class=“page-wrapper”>.

This works and validates.

11

@DobarBREND , Thank you. I tried left: 500px; When the screen width is reduced the “To Top” football disappears off of the screen.

1 Like
12

@zaklina , Thank you! I am looking at the link!

1 Like
13

sorry for being curious, but do you have any article about page wrapper in html5?
I would like to read it.

14

@zaklina . Thank you.
These are from my notes: http://diveintohtml5.info/ and from
HTML Standard .
"Assigning classes to an element affects class matching in selectors in CSS, the getElementsByClassName() method in the DOM, and other such features.

There are no additional restrictions on the tokens authors can use in the class or selector attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content."

From You can still use div | HTML5 Doctor
“ is not a wrapper. The element denotes a semantic section of your content to help construct a document outline. It should contain a heading. If you’re looking for a page wrapper element (for any flavour of HTML or XHTML), consider applying literally a container for flow content*, a collection of (hopefully) more semantically marked-up content that may need to be grouped together.”

"I use a too, but I use it to differentiate the page content from possible overlays which lie outside the natural content of my page. - NIels Matthijs July 2continues with the flow.2, 2010 at 7:05 am

I believe that a browser treats this as a <div> . That is as undefined and continues with the flow.

All I can say is that it works and it does validate.

15

Thank you!!!
@ zaklina. That link solved my problem. I sure wish that I could find an index to FCC 's posts like that one.

1 Like
16

Thank you for the links, I marked them so that I can read them in peace

17

@zaklina
Hi, I was a bit nerve after reading the answers. I searched for more.

Ivan Reese wrote the following on Is it OK to use unknown HTML tags? - Stack Overflow :

I've been working with "made-up" elements for the past year, in all of my production projects, without a polyfill, and I've had no unsolvable issues (yet), and no complaints. How? By relying on the standard behaviour of <a href="http://ryanmorr.com/determine-html5-element-support-in-javascript/">[HTMLUnknownElement](http://ryanmorr.com/determine-html5-element-support-in-javascript/)</a>, the part of the W3C spec that covers the case of "made-up" elements.

`So how does HTMLUnknownElement work? It is just an extension of the HTMLElement interface, which is the standard interface underlying all HTML elements. Unlike most other elements however, HTMLUnknownElement doesn’t add any special behaviour — you get a raw element, unadorned with any special behaviour nor constraining rules about use. The HTMLDivElement interface works almost exactly the same way, extending HTMLElement and adding almost no additional behaviour. Put simply, making up your own element is almost identical to using a div or span.’

`This is absolutely an okay thing to do, so long as you’re doing it deliberately and you know enough about what you’re doing.

Therefore, if you’re going to make up your own elements and rely on HTMLUnknownElement, don’t just treat it like a wild west. You need to follow a few simple rules.

  1. You have to use a hyphen in the name of your tag. If you do, you are guaranteed to never collide with a future edition of the HTML spec. So never say <wrong>, always say <quite-right>.
  2. Made-up elements can’t be self-closing — you have to close them with a closing tag. You can’t just say <wrong> or <still-wrong />, you have to say <totally-good><totally-good>.
  3. You have to define a display property for your element in CSS, otherwise the rendering behaviour is undefined.`

To witch people.w3.org/mike replied:

Maintainer of the W3C HTML Checker (validator) here. I recently added support for custom elements to the checker. The gist of it is that the checker no longer reports errors for element names such as quite-right that have hyphens in them. For a few more details, see stackoverflow.com/questions/28508533/…– sideshowbarker

– Fred

1 Like