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

Design

Sharina V. Jones
Sharina V. Jones
11,459 Points
Posted by Sharina V. Jones
Sharina V. Jones
11,459 Points

Layout frustration

So, I'm finally to the point where I'm trying to design things from scratch. This is my first solo project and all I'm trying to do is get the links to look like clickable buttons underneath my name using table formatting. It's pretty important that I use table formatting for this one, but I'll be trying other projects with floats, flex boxes, etc later.

I'm trying to use the mobile first approach.

I have the buttons on the page, the hover behavior is what I want, but they're all different sizes and they move around when hovered over and clicked. I have no idea why. I'm extremely frustrated because I didn't expect to be stumped on the navigation. Any help would be appreciated.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Personal Portfolio of Sharina V. Jones</title>
    <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div class="wrapper">
      <header>
        <h1 class="banner">Portfolio</h1>
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <section class="main">
      <h2>The Short of it</h2>
      <p>I'm an entry level web developer. I'm currently in my junior year at the University of South Florida.</p>
        <p>Although most of my experience is in technical support, my interests lean more toward programming and design.</p>
      </section>

      <footer>
        <p>&copy; 2014 Sharina V. Jones</p>
      </footer>
    </div>  
  </body>
</html>

@import url(http://fonts.googleapis.com/css?family=Handlee);

body {
  background: #f1f1f5;
  font-family: 'Handlee', cursive;
  font-size: medium;
}

* {
  box-sizing: border-box;
}


.wrapper {
    max-width: 80%;
    margin: auto;
}

header {
  background: #5f5f5f;
  height: 30%;
  color: white;
  padding: 15px;

  display: table;
  width: 100%;  
}

h1, 
nav {
  display: table-row;
}

nav li {
  display: inline-block;
  white-space: nowrap;
}

nav li a {
  text-decoration: none;
  color: inherit;
  text-align: center;
  background: #a60043;
  border-radius: 50%;
  padding: 10%;
}

nav li a:hover,
nav li a:active {
  background: #c14d7b;
}

footer {
  background: #5f5f5f;
  height: 10%;
  color: white;
  padding: 15px;  
}

2 Answers

Christopher Steurer
Christopher Steurer
4,582 Points
Christopher Steurer
Christopher Steurer
4,582 Points

I just threw your code into a code pen without using the normalize CSS. With this setup I did not see any weird jumping around with the buttons. The reason that the buttons are different sizes is because you are using padding. This means that the size of the button is altered by the size of the element that it contains, which in this case your link, and more importantly, the link text. If you replace your "About" link with the word "Portfolio" you should see that they are the same size. This effect is much more apparent when using the border radius property, so keep that in mind in future work.

There is no perfect solution for this that I am aware of, but a simple solution would be to add something like this:

nav li a { min-width: 80px; display: block; }

What this does is it ensures that that you have a minimum size for all the buttons, so that when any of them have text (or image or any other element) that is not large enough it will still take up the same amount of room.

Hope that helps!

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

I added the padding to make sure the clickable area was big enough for the buttons. When I add minimum width, the buttons wrap to the next line unless I remove the width from the main wrapper. I've increased the max-width to 90% but the navigation still wraps before 480px. When I remove the max-width from the wrapper, the design looks terrible.

Christopher Steurer
Christopher Steurer
4,582 Points
Christopher Steurer
Christopher Steurer
4,582 Points

I can only get the navigation buttons to get bumped to the next line down when the wrapper is set to 80%, at 90% I do no see this happening until the low 300's.

Here is what I would recommend at this point.

.wrapper { max-width: 1400px; width:100%; margin: auto; }

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

How can you tell what the width of the browser is? I've been using my cell phone screen to try to estimate the size of the browser on my computer.

Christopher Steurer
Christopher Steurer
4,582 Points
Christopher Steurer
Christopher Steurer
4,582 Points

Personally, I use a plugin for Chrome called Window Resizer that tells you the current browser dimensions as you resize the window (in addition to letting you switch to different browser sizes on the fly). You can also do essentially the same thing with the Chrome Inspector tool, simply find the root "< html >" element in the page and then look at the box dimensions located in the central blue box in the Box Model Preview (not actually sure what its called, but here is a photo for reference http://www.dropmocks.com/mFJNF8).

Christopher Steurer
Christopher Steurer
4,582 Points
Christopher Steurer
Christopher Steurer
4,582 Points

Sure thing! If you are still having issues with your design, message via twitter.

Justin Horner
STAFF
Justin Horner
Treehouse Guest Teacher
Justin Horner
Justin Horner
Treehouse Guest Teacher

Hello fallencloud,

Thank you for providing your code with the initial post! I took the code and made a few changes in hopes it might lead you in the right direction. On my end, I don't see the jumping you're referring to so I didn't address that.

I've created a Code Pen that you may be able to use. It's most likely not exactly or all that you need but hopefully will be of use.

I hope this helps.

Sharina V. Jones
Sharina V. Jones
11,459 Points
Sharina V. Jones
Sharina V. Jones
11,459 Points

Justin,

The navigation wraps when the screen is narrowed to cell phone width. It's doing the same in my code. The buttons are the same size now, but if I add whitespace: nowrap, they revert back to their inconsistent styles. Here's what my code currently looks like.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Personal Portfolio of Sharina V. Jones</title>
    <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div class="wrapper">
      <header>
        <h1 class="banner">Portfolio</h1>
        <nav>
          <ul>
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
      <section class="main">
      <h2>The Short of it</h2>
      <p>I'm an entry level web developer. I'm currently in my junior year at the University of South Florida.</p>
        <p>Although most of my experience is in technical support, my interests lean more toward programming and design.</p>
      </section>

      <footer>
        <p>&copy; 2014 Sharina V. Jones</p>
      </footer>
    </div>  
  </body>
</html>

@import url(http://fonts.googleapis.com/css?family=Handlee);

body {
  background: #f1f1f5;
  font-family: 'Handlee', cursive;
  font-size: medium;
}

* {
  box-sizing: border-box;
}


.wrapper {
   max-width: 90%;  
    margin: auto;
}

header {
  background: #5f5f5f;
  height: 30%;
  color: white;
  padding: 15px;

  display: table;
  width: 100%;  
}

h1, 
nav {
  display: table-row;
}

nav li{
  display: inline-block;
}

nav li a {
  display: inline-block;
  min-width: 80px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  background: #a60043;
  border-radius: 50%;
  padding: 10%;
}

nav li a:hover,
nav li a:active {
  background: #c14d7b;
}

footer {
  background: #5f5f5f;
  height: 10%;
  color: white;
  padding: 15px;  
}