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
Robert Niemczewski
4,560 PointsAlmost 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/
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 )
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?
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!
6 Answers
danielcroft
7,438 PointsErm 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
17,640 PointsSimply add "border-bottom: 8px solid #f5f5f5;" to your navbtn class to fix the issue.
Robert Niemczewski
4,560 PointsWon't do it. It will just change the color of the bottom-border. Page still moves.
danielcroft
7,438 PointsIt 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
17,640 PointsI 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
4,560 PointsYes, I dont want it to move the page when it is on hover, any idea how?
Christopher Warren
17,640 PointsSimply 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
4,560 PointsThank you Chris!
That was a smart move!
Derek Hanson
7,838 PointsYou could try adding this using Chris' solution.
nav {
max-height: 152px;
}
This along with the 8px should help it from expanding.
Derek Hanson
7,838 PointsAdd that to your .navbtn
Robert Niemczewski
4,560 PointsYes sir, it worked.
Robert Niemczewski
4,560 PointsWhat you think of the overall site?
Christopher Warren
17,640 PointsSorry 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
7,838 PointsYour 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
4,560 PointsYes, 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
4,560 PointsI 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
4,560 PointsProblem fixed, I used normalize.css to fix this.
Robert Niemczewski
4,560 PointsRobert Niemczewski
4,560 PointsFor the menu going backwards I fixed that by styling nav not the links. So that is done!