Home>

Please write your question in detail here.
I'm making a hobby page.
I want to display the "Back to TOP" button at the bottom right of the page (next to the video).

Applicable source code
<! DOCTYPE html>
<html>
    <head>
        <title>NARUTO loves</title>
        <style type = "text/css">
            .nav {
  width: 750px;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  display: flex;
}
.nav li {
  position: relative;
  list-style: none;
}
.nav li a {
  display: block;
  width: 150px;
  height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  line-height: 2.8;
  background: # 9fb7d4;
  text-decoration: none;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}
.nav>li: hover>a {/ * layer-1 * /
  color: orange;
  background: # afc6e2;
}
.nav>li li: hover>a {/ * layer-2 * /
  color: olive;
  background: # afc6e2;
}
.nav li ul {
  top: 40px;
  left: -40px;
  position: absolute;
}
.nav li ul li {
  overflow: hidden;
  height: 0;
}
.nav li ul li a {
  border-top: 1px solid #eee;
}
.nav li: hover>ul>li {
  overflow: visible;
  height: 40px;
}
  .nav li ul li ul {
    top: 0;
    left: 110px;
  }
  .nav li ul li ul: before {/ * layer-2 ▷ * /
    position: absolute;
    content: "";
    top: 15px;
    left: 30px;
    border: 5px solid transparent;
    border-left: 5px solid #fff;
  }
  .nav li ul li ul li: hover>a {/ * layer-3 * /
    color: pink;background: # afc6e2;
  }
  .nav li ul li ul.left {
    top: 0;
    left: -190px;
  }
  .nav li ul li ul.left: before,/* layer-2-left ▷ * /
  .nav li ul li ul li ul.left: before {/ * layer-3-left ▷ * /
    position: absolute;
    content: "";
    top: 15px;
    left: 190px;
    border: 5px solid transparent;
    border-right: 5px solid #fff;
  }
  .nav li ul li ul.left li: hover>a {/ * layer-2-left * /
    color: pink;
    background: # afc6e2;
  }
  .nav li ul li ul li ul.left li: hover>a {/ * layer-3-left * /
    color: purple;
    background: # afc6e2;
  }
.content {
  width: 750px;
  height: 200px;
  background: #eee;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
}
            .TOP {
                border: 1px solid #cccccc;
                height: 200px;
                position: relative;
            }
        </style>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width = device-width, initial-scale = 1">
        <!-pull-down menu->
        <ul>
            <li><a href = "#">Home</a>
            </li>
        <li><a href = "#">Naruto Uzumaki</a>
            <ul>
                <li><img src = "uzumakinaruto.jpg" width = 150px height = "200px"></li>
            </ul>
        </li>
        <!-<ul>
            <li><a href = "#">b2</a></li>
            <li><a href = "#">b2</a></li>
        </ul>->

        <!-</li>->
        <li><a href = "#">Sasuke Uchiha</a>
            <ul>
                <li><img src = "uchihasasuke.jpg" width = "150px" height = "200px"></li>
            </ul>
        </li>
        <li><a href = "#">Haruno Sakura</a>
        <ul>
            <li><img src = "harunosakura.jpg" width = "150px" height = "200px"></li>
        <ul>
            <li><a href = "#">d2</a></li>
            <li><a href = "#">d2</a></li>
            <!-<ul>
            <li><a href = "#">d3</a></li>
            <li><a href = "#">d3</a></li>
            </ul>->
        </ul>
        </ul></li>
        <li><a href = "#">Kakashi Hatake</a>
        <ul>
        <li><img src = "hatakekakashi.jpg" width = "150px" height = "200px"></li>
        <!-<ul>
            <li><a href = "#">e2-1</a></li>
            <li><a href = "#">e2-1</a></li>
        </ul>->
        <ul>
        <li><a href = "#">e2-2</a></li>
        <li><a href = "#">e2-2</a></li>
        </ul>
        </ul>
        </li>
        <!-nav-></ul>
    </head>
    <body>
        <h1>NARUTO's favorite people gather!</h1>
        <h2>We love NARUTO!</h2>
        <hr>
        <h2>NARUTO character introduction</h2>
        <table border>
            <thead>
                <tr>
                    <th>Character No.</th>
                    <th>Character name</th>
                    <th>Character Introduction</th>
                    <th>Character Image</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>No.1</td>
                    <td>Naruto Uzumaki</td>
                    <td>Surprising Number One Ninja</td>
                    <td><a href = "https://en.wikipedia.org/wiki/%E3%81%86%E3%81%9A%E3%81%BE%E3%81%8D%E3%83 % 8A% E3% 83% AB% E3% 83% 88 "><img src =" uzumakinaruto.jpg "width =" 100 "height =" 100 "></td>
                </tr>
                <tr>
                    <td>No.2</td>
                    <td>Sasuke Uchiha</td>
                    <td>Uchi clan elite ninja</td>
                    <td><a href = "https://en.wikipedia.org/wiki/%E3%81%86%E3%81%A1%E3%81%AF%E3%82%B5%E3%82 % B9% E3% 82% B1 "><img src =" uchihasasuke.jpg "width =" 100 "height =" 100 "></td>
                </tr>
                <tr>
                    <td>No.3</td>
                    <td>Haru no Sakura</td>
                    <td>Medical Ninja and Mysterious Power</td>
                    <td><a href = "https://en.wikipedia.org/wiki/%E6%98%A5%E9%87%8E%E3%82%B5%E3%82%AF%E3%83 % A9 "><img src =" harunosakura.jpg "width =" 100 "height =" 100 "></td>
                </tr>
                <tr>
                    <td>No.4</td>
                    <td>Kakashi Hatake</td>
                    <td>Sharing Eyes Copy Ninja</td>
                    <td><a href = "https://en.wikipedia.org/wiki/%E3%81%AF%E3%81%9F%E3%81%91%E3%82%AB%E3%82 % AB% E3% 82% B7 "><img src =" hatakekakashi.jpg "width =" 100 "height =" 100 "></td>
                </tr>
                <p>The most interesting anime I have seen since I was in elementary school,
                This is the anime I am watching now. Recently it became BORUTO, but it is still recorded and watched. Click<br>character image to jump to wikipedia.</p>
            </tbody>
        </table>
        <img src = "uzumakinaruto-shippuden.jpg"><img src = "utihasasuke-shippuden.jpg"><img src = "harunosakura-shippuden.jpg">
        <img src = "hatakekakashi-shippuden.jpg">
        <iframe width = "560" height = "315" src = "https://www.youtube.com/embed/G75445vc1u8" frameborder = "0" allow = "autoplay;encrypted-media" allowfullscreen></iframe&gt ;
    </body>
    <footer>
        <div>Back to TOP</div>
    </footer>
</html>
Tried

I tried using div, class, etc., but it did not work because it was displayed in the middle of the page.

Supplemental information (FW/tool version etc.)

Browser: GoogleChrome
OS: windows10

  • Answer # 1

    If you just want to fix the top right all the way back to the top

    .TOP {
                    border: 1px solid #cccccc;
                    height: 200px;
                    position: fixed;
                    bottom: 0;
                    right: 0;
                }
    You can also change it to

    .
    However, there are parts that have broken down as HTML as pointed out in the correction requests and responses.
    I tried to fix it as much as possible, but there may be parts that have not been fixed yet.
    The images and links are dummy and the description is simplified.

    <! DOCTYPE html>
    <html>
      <head>
        <meta charset = "UTF-8">
        <meta name = "viewport" content = "width = device-width, initial-scale = 1">
        <title>NARUTO loves</title>
        <style type = "text/css">
          .nav {
            width: 750px;
            height: 40px;
            margin: 0 auto;
            padding: 0;
            display: flex;
          }
          .nav li {
            position: relative;
            list-style: none;
          }
          .nav li a {
            display: block;
            width: 150px;
            height: 40px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            line-height: 2.8;
            background: # 9fb7d4;
            text-decoration: none;
            border-right: 1px solid #eee;
            box-sizing: border-box;
          }
          .nav>li: hover>a {
            / * layer-1 * /
            color: orange;
            background: # afc6e2;
          }
          .nav>li li: hover>a {
            / * layer-2 * /
            color: olive;
            background: # afc6e2;
          }
          .nav li ul {
            top: 40px;
            left: -40px;
            position: absolute;
          }
          .nav li ul li {
            overflow: hidden;
            height: 0;
          }.nav li ul li a {
            border-top: 1px solid #eee;
          }
          .nav li: hover>ul>li {
            overflow: visible;
            height: 40px;
          }
          .nav li ul li ul {
            top: 0;
            left: 110px;
          }
          .nav li ul li ul: before {
            / * layer-2 ▷ * /
            position: absolute;
            content: "";
            top: 15px;
            left: 30px;
            border: 5px solid transparent;
            border-left: 5px solid #fff;
          }
          .nav li ul li ul li: hover>a {
            / * layer-3 * /
            color: pink;
            background: # afc6e2;
          }
          .nav li ul li ul.left {
            top: 0;
            left: -190px;
          }
          .nav li ul li ul.left: before,
          / * layer-2-left ▷ * /
          .nav li ul li ul li ul.left: before {
            / * layer-3-left ▷ * /
            position: absolute;
            content: "";
            top: 15px;
            left: 190px;
            border: 5px solid transparent;
            border-right: 5px solid #fff;
          }
          .nav li ul li ul.left li: hover>a {
            / * layer-2-left * /
            color: pink;
            background: # afc6e2;
          }
          .nav li ul li ul li ul.left li: hover>a {
            / * layer-3-left * /
            color: purple;
            background: # afc6e2;
          }
          / * .content is not used anywhere but ok? * /
          .content {
            width: 750px;
            height: 200px;
            background: #eee;
            margin: 0 auto;
            padding: 10px;
            text-align: left;
            box-sizing: border-box;
          }
          .TOP {
            border: 1px solid #cccccc;height: 200px;
            position: fixed;/* change * /
            bottom: 0;/* add * /
            right: 0;/* Add * /
          }
        </style>
      </head>
      <body>
        <header>
        <!-Move ul into body-header Move b2 and other objects into li (delete if commented if unnecessary) Delete the original comment because it becomes difficult to understand->
          <ul>
            <li><a href = "#">Home</a></li>
            <li>
              <a href = "#">NARUTO</a>
              <ul>
                <li><img src = "http://placehold.jp/150x200.png" width = "150" height = "200"><!-Corrected numerical specification-></li>
              </ul>
            </li>
            <li>
              <a href = "#">SASUKE</a>
              <ul>
                <li><img src = "http://placehold.jp/150x200.png" width = "150" height = "200"></li>
              </ul>
            </li>
            <li>
              <a href = "#">SAKURA</a>
              <ul>
                <li>
                  <img src = "http://placehold.jp/150x200.png" width = "150" height = "200">
                  <ul><!-if not needed->
                    <li><a href = "#">d2</a></li>
                    <li><a href = "#">d2</a></li>
                  </ul><!-Delete here->
                </li>
              </ul>
            </li>
            <li>
              <a href = "#">KAKASHI</a>
              <ul>
                <li>
                  <img src = "http://placehold.jp/150x200.png" width = "150" height = "200">
                  <ul><!-if not needed->
                    <li><a href = "#">e2-2</a></li>
                    <li><a href = "#">e2-2</a></li>
                  </ul><!-Delete here->
                </li>
              </ul>
            </li>
          </ul><!-/.nav->
        </header>
        <h1>NARUTO's favorite people gather!</h1>
        <h2>We love NARUTO!</h2>
        <hr>
        <h2>NARUTO character introduction</h2>
        <table border>
          <thead>
            <tr>
              <th>Character No.</th>
              <th>Character name</th>
              <th>Character Introduction</th>
              <th>Character Image</th>
            </tr></thead>
          <tbody>
            <tr>
              <td>No.1</td>
              <td>name1</td>
              <td>Description1</td>
              <td><a href = "#"><img src = "http://placehold.jp/100x100.png" width = "100" height = "100"></a>< ;!-</a>missed-></td>
            </tr>
            <tr>
              <td>No.2</td>
              <td>name2</td>
              <td>Description2</td>
              <td><a href = "#"><img src = "http://placehold.jp/100x100.png" width = "100" height = "100"></a>< ;!-</a>missed-></td>
            </tr>
            <tr>
              <td>No.3</td>
              <td>name3</td>
              <td>Description3</td>
              <td><a href = "#"><img src = "http://placehold.jp/100x100.png" width = "100" height = "100"></a>< ;!-</a>missed-></td>
            </tr>
            <tr>
              <td>No.4</td>
              <td>name4</td>
              <td>Description4</td>
              <td><a href = "#"><img src = "http://placehold.jp/100x100.png" width = "100" height = "100"></a>< ;!-</a>missed-></td>
            </tr>
          </tbody>
        </table>
        <!-p can't be put under tbody! ->
        <p>This is the funniest anime I've seen since I was in elementary school. Recently it became BORUTO, but it is still recorded and watched. Click<br>character image to jump to wikipedia.</p>
        <div><!-I don't know what to do with this image, but put it in a div to distinguish it from iframe->
          <img src = "http://placehold.jp/100x100.png" width = "100" height = "100">
          <img src = "http://placehold.jp/100x100.png" width = "100" height = "100">
          <img src = "http://placehold.jp/100x100.png" width = "100" height = "100">
          <img src = "http://placehold.jp/100x100.png" width = "100" height = "100">
        </div>
        <iframe width = "560" height = "315" src = "https://www.youtube.com/embed/G75445vc1u8" frameborder = "0" allow = "autoplay;encrypted-media" allowfullscreen></iframe> ;
        <!-footer into body->
        <footer>
          <div>Back to TOP</div>
        </footer>
      </body>
    </html>

  • Answer # 2

    I just knew recently, but when I copy and paste to LiveWeave, "Ctrl + A" → "Shift + Tab", it automatically adjusts the indentation. . Because this is convenient, it comes in handy when indented messy code comes out (it opens faster than the editor)

    Main topic

    Although it is the main topic, it is from the modification of HTML first, but do you know that HTML basically has to write a start tag and an end tag as a set? (There are exceptions, of course)

    The missing tag was the a tag closing tag. It's also brilliantly "with all a tags"
    I don't know if this is because the indent is messed up, or if this is why the indent is messed up, but let's make the code easy to read

    As you can see, just fix the closing tag

    By the way, the reason why indentation is important is that HTML is a language that describes the structure of a document (mostly a web page recently).

    When you are given a blueprint for a building, you don't know if there is a bathroom in the middle of the living room or a corner of the kitchen is a parking lot.
    If you make a mistake in the HTML description, this will happen

    As a way to prevent this, it is encouraged to arrange indents. By arranging indents, it is possible to visually determine which elements are contained in which elements.

    In addition, what happens when you are instructed to say, "Paint the parking lot in a high-quality black, and then paint the kitchen in a clean white." Imagine that.
    Inadvertently, because the parking lot was placed in the kitchen, the parking lot would be painted white.

    Please write the contents after writing the start tag and the end tag as a set (if you use a dedicated editor such as Brackets, it will be inserted automatically)

    Now, I'll finally put it in the main subject

    ... I wanted to say that, but when I looked closely at the HTML, I found an even bigger mistake
    If you find out what's wrong, please fix it immediately ↓

    Tags such asmeta,link,script,styleare certainlyheadtags Should be grouped together. But why is there aulhere? It appears suddenly as a construction vehicle arrives while deciding on a new house budget at the family meeting (original location is inbody)

    It's too meaningless (please fix it)

    By the way, "Be sure to paint the parking lot in a high-quality black,then, and paint the kitchen in a clean white". It is an important point. Because if this order is reversed, it may be possible to paint well

    About the priority order to which CSS is applied

    [A little bit of knowledge] CSS priority

    http://specificity.keegan.st/: Site that can calculate selector priority

    ... Okay, let's get into the main topic!
    It was when I thought so. I once again witnessed something incomprehensible

      

    <tbody> ;: Table body element | MDN
      

    I wanted to make a table?
    So why is there a singleptag ...
    Do you want to put it on the table or write it outside the table ... The truth is in the darkness ...

    Okay, let's get into the main topic soon ... What was the main subject (fatigue

      

    I want to display the "Back to TOP Page" button at the bottom right of the page (next to the video).

    ... Yes, yes, this is very easy. There is no need to think complicatedly.

    footer {
      text-align: right;/* right-justified * /
    }
    .TOP {
      border: 1px solid #cccccc;
      height: 200px;
      position: relative;
      display: inline-block;/* Height can be set + Right alignment works * /
      background: skyblue;/* Background color added for clarity * /
    }


    display: inline-block;is a specification that allows styling to be performed as an element that has been called an inline element/block element until a while ago. > If this isdisplay: inline;, the specification ofheightwill not work. If it isdisplay: block;,widthwill be changed. Even if shortened,text-alignis a specification that determines the position of the string, so it cannot be right-justified
    So I wrote this code

    There is another way. All this is needed

    footer {
      display: flex;
      flex-direction: row-reverse;/* Arrange in the horizontal direction, reverse to the string * /
    }


      

    No, Flexbox is really good ~
      Haruro Mizuno, Youtube

    It's not all about using Flexbox. The values ​​ofwidthandheightchange dynamically in the child elements of Flexbox.

    Detailed explanation of how to use CSS Flexbox properties

    Change the value of thedisplayproperty to suit your needs


      

    Do you have any other questions?

    Please use the comment function. Someone will answer me