Clever Geek Handbook

My submit buttons and select the button shift all words on this page on the left

As you can see in Figure 1, my "rights reserved" are centered. But in Figure 2, the words are shifted to the left.

Here is my HTML code for image 1:

<form action="Chapter 1.html" data-inline="true" style="float:right"> 
    <input type="submit" value="Next >">
  </form>
  </style>

  <div align="right">
    <select id="change" onchange="location = this.options[this.selectedIndex].value;">
      <option value="Introduction.html">1. Introduction</option>
      <option value="Chapter 1.html">2. Chapter 1</option>
    </select>
  </div>
Run codeHide result


And my code for image 2:

  <form action="Chapter 2.html" data-inline="true" style="float:right"> 
    <input type="submit" value="Next >">
  </form>
  </style>

  <select id="change" onchange="location = this.options[this.selectedIndex].value;" style="float:right">
    <option value="Introduction.html">1. Introduction</option>
    <option value="Chapter 1.html">2. Chapter 1</option>
  </select>

  <form action="Introduction.html" style="float:right"> 
    <input type="submit" value="< Prev" id="previous">
  </form>
  </style>
Run codeHide result


My css code for both pictures:

input[type=submit] {
    width: 5em;  height: 2em;
    border-radius: 5px;
    webkit-border-radius: 5px;
    background: webkit-linear-gradient(#fff, #ddd);
    background: linear-gradient(#fff, #ddd);
}
input[type=submit]:hover {
    background: #ddd;
}
#previous {
    width: 5em; height 2em;
    border-radius: 5px;
    webkit-border-radius: 5px;
}

#change{
    width: 9em; height: 2em;
    border-radius: 5px;
    webkit-border-radius: 5px;
}
Run codeHide result


As requested, here's my code reserved for rights, the html code is the first and the second is the jScript code and the third is the css code:

<footer id="foot01"></footer>

      

        
        
        
      

    

document.getElementById("foot01").innerHTML =
"<p><center>&copy;  "+ new Date().getFullYear() + " Richard. All rights reserved.</center></p>";
Run codeHide result


footer#foot01 {
    color: #000;
    align:center;
}
Run codeHide result


What am I doing wrong here?: /

+3


source to share


1 answer


You float objects forms

and select

up right

. Then you need to apply clear

to footer

:

footer#foot01 {
    clear: right;
}


DEMO

Note. There are also other people's mistakes, for example, tags </style>

in HTML and align:center;

, which should be text-align: center;

.

+1


source






More articles:


All Articles