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

HTML

Posted by Andrew O'Reilly
Andrew O'Reilly
3,350 Points

Im struggling a huge amount with positioning of HTML elements

HI there, so below is a site i want to make for my portfolio but i cant position the "about" on the home page. This is a common issue for me( positioning). I have been learning HTML and css for about 4 months and still get stuck with this issue. Any help would be amazing ( by means of explanation because i want to learn and improve not just get the answer and forget the solution)

Thanks guys :)

https://codepen.io/0nly/pen/ZeOgWd

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Do you mean the word "About" that appears under the navigation bar? And if so, where do you want it to be?

Andrew O'Reilly
Andrew O'Reilly
3,350 Points

Jennifer Nordell thank you for your fast response. i would like to move it further away from the Nav bar (centre it between the nav bar and the text below it )

1 Answer

Evgeniia Mas
Evgeniia Mas
4,452 Points
Evgeniia Mas
Evgeniia Mas
4,452 Points

Hello, Andrew! If you want to make About at the center horizontally use text-align: center and for vertical-align there are some tricks, such one of the most modern and easy to use - flexbox. As here you have only one line of text you can use the most easy tarditional way: line-height, which is larger than font size of your h4.

Don't you think it is not a very good idea to use such concise big width and margins in px? I changed it a little. As I understood you want this desktop version with image and Lorem text on the same line. Sorry if it is not so.

I also advice you one moment which helped me a lot. When you try to "struggle with positioning" as you said give a bright color to your parent element bright background color, so you will see it's borders, height and how element inside of it moves when you try different styles. Getting the result, just remove it. It will make the struggle more clear and obvious to you. Here is part of your html (inside of wrapper) and whole css not to mess changes. 

   <div id="about-section">
  <h4 class="about-title">About</h4>
  </div>

   <section>
   <img src="https://res.cloudinary.com/ddrhwvcui/image/upload/c_scale,h_400,q_100,w_497/v1492779062/outside_the_oak_l3wqgb.jpg" alt="outside photo" class="about-photo">

    <p id="about-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

      </section>



  body {
      font-family: lora sans-serif;
      background: #E0E0E0;
    }
    .nav-pills {
      font-family: lora;
      font-size: 2em;
      color: rgb(0,0,0);
      display: inline-block;
      background-color: #36926e;
      margin: 35px 0 35px 0;

    }
    .nav-pills li {
      display: inline;

    }

    .logo {
      background-color: #36926e;
      margin: 0 auto;
      display: block;
    }

    .pageOne {
      display: block;
      margin: 0 auto;
      max-width: 1200px;
      text-align: center;

    }

    .about-photo {
        width: 30%;
        padding: 5px;
        display: inline-block;
        margin: 30px 5px 30px 30px;
        float: left;


    }
    #about-paragraph {
      width: 55%;
      margin: 30px 30px;
      display: inline-block;
      float: right;
       }

    footer {
      font-size: 1em;
      text-align: center;
      clear: both;
      padding-top: 50px;
      color: #ccc;
    }


    #about-section {

     width: 100%;

    }

    h4.about-title {

       text-align: center;
       display: block;
       line-height: 100px;  

    }  

@media screen and (max-width: 771px) {
  img.about-photo {
        width: 80%;
        margin: 30px 30px 30px 30px;
        display: inline-block;
        text-align: center;
        float: none;


    }
    #about-paragraph {
        width: 90%;
        float: none;

       }
}
}