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 Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

navigation go to + input button problems

Hi,

I'm trying to make a single page portfolio page and I want it to go to the different sections on the page when I click the navigation links.

I have a fixed navigation that follows the user when he/she scrolls down and it's causing me some problems in my project because it covers the headline on the portfolio section.

any ideas how to solve this?

<div class="container">
      <div class="main-nav">
        <p id="logo">Henrik Christensen | Web Developer</p>
        <ul class="nav">
          <li class="name">Henrik Christensen | Web Developer</li>
          <li><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>

<div id="portfolio">
  <h1 class="center-headline">Portfolio:</h1>
  <div class="portfolio-flex">
<div class="show">

I only show a little of the html otherwise this will be too long (130 lines of html).

Next problem is I made two input-fields with the type button to be my "social-page-icons" and they are working just fine but there seems to be a - between the links with I preview the site >.<

<div class="socials">
  <a href="http://www.facebook.com">
    <input type="button" value="Facebook" id="facebook" class="bolded">
  </a>

  <a href="http://www.twitter.com">
    <input type="button" value="Twitter" id="twitter" class="bolded">
  </a>
</div>

I hope someone can help me out :-)

2 Answers

Nicholas Olsen
seal-mask
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points
Nicholas Olsen
.a{fill-rule:evenodd;}techdegree
Nicholas Olsen
Front End Web Development Techdegree Student 19,342 Points

I'm not sure if this will fix your first problem, but I think I've seen people add padding to the top of the body in order to compensate for fixed navigations. So, just figure out what the height of the navigation is and then add padding-top: [whatever] to the body tag.

I don't understand the problem with the second issue but I do have a question: why use buttons?

Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

thank you very much for answering.

I use buttons because I don't have facebook icons etc :-P

Justin Barrett
Justin Barrett
27,345 Points
Justin Barrett
Justin Barrett
27,345 Points

using css, you can add padding-top to the section to give a buffer space for the header.

Example:

portfolio {

 padding-top:100px;

}

As far as your - I would have to see some of your css. What is being added by the "class="bolded""?

Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

It's very simple just to make text bold :-P

.bolded {
    font-weight: bold;
}