Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Joshua Comrie
Joshua Comrie
3,861 Points

How to stop content from moving.

Hi guys. I've being studying HTML & CSS for a few months now and having trouble woth something. I'm doing a small project for college and can't seem to get the content on the right and my footer to stay still on the page. Also any other issues or bugs with the page you can see, please assist me. It would be much appreciated!

Thanks

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="contact.css">
    <title>Contact Us</title>
</head>

<body>
<div class="block">
<div id="nav">
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="design.html">Design</a></li>
        <li><a href="create.html">Create</a></li>
        <li><a href="legal.html">Legal</a></li>
        <li><a href="publishing.html">Publishing</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<div class="wrapper">
        <section id="boxes">
            <div class="container">
            <div class="box">
            <h1>Contact Us</h1> 
            <div class="phone">
            <img src="phone.jpg" height="175px width="150px">
            </div>
            <h3>Phone +447837574081</h3>
            <h4>Opening Hours: Mon - Friday 9:00 - 17:00</h4>
            <p>Address: 123 High Street<br></p>
            <p>Rotherham</p>
            <p>South Yorkshire</p>
            <p>S60 4DH</p>
        </div>
    </section>
</div>
</section>
</div>
</wrapper>

<div class="wrapper2">
            <section id="boxes">
            <div class="container">
            <div class="box2">
                <h3>Have A Question?</h3>
                <img src="mail.png" height="175px" width="175px">
                <form><br>
                First Name:&nbsp;<input type="text" name="" placeholder="First Name...">
                </form></div><br>
                <form>
                Last Name:&nbsp;<input type="text" name="" " placeholder="Last Name...">
                </form><br>
                <form>
                Email Address:&nbsp;<input type="text" name=""" placeholder="Email Address...">
                </form><br>
                Question:&nbsp;<br><textarea>   
                </textarea rows="4" cols="50">
                <form><br>
                <button>Submit</button> 
            </div>
        </form>
    </div>
        </section>
    </div>
</wrapper>
<div class="footer">
        <p>How To Create A Web Page, Copyright &copy; 2018</p>
        </</div>
</body>
</html>
body{
    background-color: #cce6ff;
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 20px;
}
img{
    border-radius: 50%;
}
#nav {
font-size: 25px;
background-color: #0077b3;
height: 35px;
padding: 20px;
color: white;
border-bottom: white 3px solid;
display: table;
width: 100%; 
overflow: hidden;
}
#nav ul {
text-align: center;
list-style-type: none;
padding: 0;
margin: 0;
}

#nav li {
display: inline;
padding: 20px;
vertical-align: middle;
}

#nav a {
color: white;
padding: 10px 10px 10px 10px;
text-decoration: none;
vertical-align: middle;
}
#nav a:hover{
    color: black;
    text-decoration: bold;
    background-color: #80d4ff;
    border-radius: 10px;
}
button{
    color: white;
    background-color: #0066cc;
    width: 100px;
    height: 30px;
    border-radius: 10px;
    border: 3px solid #004d99;
    margin-top: 0;
}
button:hover{
    background-color: #cceeff;
    color: black;
    cursor: pointer;
}
#question{
    float: right;
}
.wrapper{
    float: left;
    margin-left: 20%;
    text-align: center;
}
.wrapper2{
    float: right;
    margin-right: 25%;
    text-align: center;
    margin-top: 5px;
}
.footer{
font-size: 25px;
background-color: #0077b3;
height: 80px;
color: white;
text-align: center;
padding-top: :0px;
margin-top: 50%;
border-top: 3px white solid;
display: block;
}
/* Media Queries */
@media (max-width: 768px){
    #nav ul li a{
        display: contents;
    }

First off, its very hard to read that. Always remember to indent your code to make it easy to read, even just for yourself. Anyway, you have two colons ( : ) in your footer class.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

It looks like the issue may have been resolved but I've added Markdown to the code for you. To learn how to share markdown code to the forum check out the great course here on Treehouse, Markdown Basics :)

2 Answers

David Perkins
David Perkins
9,607 Points

Right... there's a few things that i've addressed in your code examples in the comments, but if you have any questions with anything that i've done, it'll be easier to discuss them using the code that i've formatted below.

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="contact.css">
  <title>Contact Us</title>
</head>

<body>

  <div class="block">

    <div id="nav">
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="design.html">Design</a></li>
        <li><a href="create.html">Create</a></li>
        <li><a href="legal.html">Legal</a></li>
        <li><a href="publishing.html">Publishing</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

    <div class="wrapper">
      <section id="boxes">
        <div class="container">
          <div class="box">
            <h1>Contact Us</h1>
            <div class="phone">
              <img src="phone.jpg" height="175px" width="150px" />
            </div>

            <h3>Phone +447837574081</h3>
            <h4>Opening Hours: Mon - Friday 9:00 - 17:00</h4>

            <p>Address: 123 High Street<br></p>
            <p>Rotherham</p>
            <p>South Yorkshire</p>
            <p>S60 4DH</p>
          </div>
        </div> <!-- Needed to close the .box tag -->
      </section>
    </div>

    <!-- </section> // No opening section tag to close -->

    <!-- </div> // No opening div tag to close -->

    <!-- </wrapper> // No opening wrapper tag to close -->

    <div class="wrapper2">
      <section id="boxes">
        <div class="container">
          <div class="box2">
            <h3>Have A Question?</h3>
            <img src="mail.png" height="175px" width="175px">

            <form>
              <!--
                1. Should probably wrap your inputs in a div to style rather than adding line breaks
                2. Wrap your input labels in correct tags too
                3. You don't need seperate <form> tags for each input
                4. <textarea> needed some refactoring as it was opening with a closing tag
              -->
              <div>
                <label>First Name: </label>
                <input type="text" name="" placeholder="First Name...">
              </div>
              <div>
                <label>Last Name: </label>
                <input type="text" name="" placeholder="Last Name...">
              </div>
              <div>
                <label>Email Address: </label>
                <input type="text" name="" placeholder="Email Address...">
              </div>
              <div>
                <label>Question: </label>
                <textarea rows="4" cols="50"></textarea>
              </div>
              <div>
                <button>Submit</button>
              </div>
            </form>
          </div>
        </div> <!-- Needed to close the .container tag -->
      </section>
    </div>
    <!-- </wrapper> // No opening wrapper tag to close -->

    <div class="footer">
      <p>How To Create A Web Page, Copyright © 2018</p>
    </div>

  </div> <!-- // Needed to close the opening <div> -->
</body>

</html>
body {
  background-color: #cce6ff;
  font-family: 'Roboto Condensed', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 20px;
}

img {
  border-radius: 50%;
}

nav {
  font-size: 25px;
  background-color: #0077b3;
  height: 35px;
  padding: 20px;
  color: white;
  border-bottom: white 3px solid;
  display: table;
  width: 100%;
  overflow: hidden;
}

nav ul {
  text-align: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline;
  padding: 20px;
  vertical-align: middle;
}

nav a {
  color: white;
  padding: 10px 10px 10px 10px;
  text-decoration: none;
  vertical-align: middle;
}

nav a:hover {
  color: black;
  text-decoration: bold;
  background-color: #80d4ff;
  border-radius: 10px;
}

button {
  color: white;
  background-color: #0066cc;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  border: 3px solid #004d99;
  margin-top: 0;
}

button:hover {
  background-color: #cceeff;
  color: black;
  cursor: pointer;
}

.question {
  float: right;
}

.wrapper {
  float: left;
  margin-left: 20%;
  text-align: center;
}
.wrapper2 {
  float: right;
  margin-right: 25%;
  text-align: center;
  margin-top: 5px;
}
.footer {
  font-size: 25px;
  background-color: #0077b3;
  height: 80px;
  color: white;
  text-align: center;
  padding-top: 0px;
  margin-top: 50%;
  border-top: 3px white solid;
  display: block;
}

/* Media Queries */
@media (max-width: 768px) {
  #nav ul li a {
    display: contents;
  }
}
Joshua Comrie
Joshua Comrie
3,861 Points

Thanks for your help David, much appreciated. I feel so dumb, with how many mistakes there are! aha :|

David Perkins
David Perkins
9,607 Points

Joshua Comrie Don't say that... everyone's learning on here. Best thing to do is just read through the comments and see what i've done so that you can familiarise yourself. Once you've got this down, you'll find that future projects are a lot easier to spot and fix any bugs/issues yourself.

Joshua Comrie
Joshua Comrie
3,861 Points

David Perkins Yeah i guess you're right. Thanks for your help. I'll get there eventually! :)