Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Robert Niemczewski
Robert Niemczewski
4,560 Points

Almost there, just couple quick fixes? HTML/CSS coding from PSD

Hello there,

I am almost done with transferring my design from psd to html5/css3 but I have couple problems that I can't seem to fix.

http://t0ms0nsdesign.com/site/

  1. When hover on the menu the border-bottom displays, yet it moves the whole page down - is there any trick to that? Or should I just use CSS Spirtes? (The buttons are created in css though )

  2. I know I did something wrong, because the Menu goes from back to end; it was suppose to be About, Work, Contact, and it is Contact, Work, About - a CSS issue?

  3. Any ideas how to better-style up the contact form?

Overall, what you think?

As soon as I am done with the coding it, i want to make it responsive but that has to wait until I fix those problems.

P.S, for the portfolio I am going to use prettyPhoto js so they can pop-out.

Thank you!

Robert Niemczewski
Robert Niemczewski
4,560 Points

For the menu going backwards I fixed that by styling nav not the links. So that is done!

6 Answers

Erm for the navigation to stop it moving the page down i think adding a margin-bottom:1em; should fix that.

The contact form id say add some spacing the colors are fine as they match your layout

Christopher Warren
Christopher Warren
17,640 Points

Simply add "border-bottom: 8px solid #f5f5f5;" to your navbtn class to fix the issue.

Robert Niemczewski
Robert Niemczewski
4,560 Points

Won't do it. It will just change the color of the bottom-border. Page still moves.

It moves because it only shows on hover so when you dont hover its not there which is why its moving it down as there is no space between.

Christopher Warren
Christopher Warren
17,640 Points

I added the code via chromes inspector and I can confirm it no longer moves the page up and down. I don't know about other browsers however.

Robert Niemczewski
Robert Niemczewski
4,560 Points

Yes, I dont want it to move the page when it is on hover, any idea how?

Christopher Warren
Christopher Warren
17,640 Points

Simply add "border-bottom: 8px solid #f5f5f5;" to your navbtn class to fix the issue.

On hover your adding 8 pixels to the height of the menu item. By adding that 8 pixels on the menu item by default fixes the issue.

Robert Niemczewski
Robert Niemczewski
4,560 Points

Thank you Chris!

That was a smart move!

Derek Hanson
Derek Hanson
7,838 Points

You could try adding this using Chris' solution.

nav { 
     max-height: 152px;

}

This along with the 8px should help it from expanding.

Robert Niemczewski
Robert Niemczewski
4,560 Points

What you think of the overall site?

Christopher Warren
Christopher Warren
17,640 Points

Sorry if this critique is a bit blunt.

First of all, excellent use of colours.

Second, Add transition effects for anything that transitions states. (Your menu and social icons)

Add -webkit-transition: all .15s linear; -moz-transition: all .15s linear; transition: all .15s linear; to your navbtn class

Third, Get rid of the download button. Have a single button to view your work page. (Add a title to that section as well)

Fourth, instead of using images for social icons and your "my toolbox" icons is an icon font. http://fontello.com/

Fifth, place your comments text box side by side the other text boxes.

Derek Hanson
Derek Hanson
7,838 Points

Your site looks good. You need to edit some of your icons as they look a little blurry. On your form you can add a little margin and round the edges a little as it would go with your navigation.

Is this your first website?

Robert Niemczewski
Robert Niemczewski
4,560 Points

Yes, I am still looking for the ideas on the form.

Acutally, this is my 3rd website, my old one is http://t0ms0nsdesign.com ..

but for this one I actually took time to sketch it off and come up with ideas so I feel good :)

Thanks

Robert Niemczewski
Robert Niemczewski
4,560 Points

I found one more problem,

http://t0ms0nsdesign.com/site/

When you look at the whole page it looks like header is not skretched to the whole page, I tried adding widht:100%; but it not help, also the #about div has the same problem.. any quick fix?

Robert Niemczewski
Robert Niemczewski
4,560 Points

Problem fixed, I used normalize.css to fix this.