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
Martin Norberg
1,663 PointsHelp with ul not moving and general suggestions
I've been working on a site for my friend who runs a company that services and repairs computers and servers. I know the site is not the best looking but I did what I could with the knowledge I have (going through CSS Deep Dive at the moment). I have some questions though:
- How come the site-map ul at the bottom can't be paddened away? And why does it start so far in?
- I have troubles designing the menu well, any recommendations that would fit the site?
- Same thing with the slogan.
- Font tips and suggestions? I barely know any fonts and I find it hard to chose a good one.
- General suggestions for improvements are always welcome.
You can view the site here: http://nlsn.se/siv/
7 Answers
Michael Watson
Treehouse TeacherI think some fellow Treehouse students should be able to help out...my Swedish is non-existant so can't really help on the slogan 
For your first question, if I understand what you're asking correctly try going into your "style.css" file and adjusting the "padding-top" to a smaller pixel number in your "#footer" selector.
RE general suggestions: it's probably a good idea to try and get some sort of clear call-to-action on there...Contact Us for Help, Set up an Appointment, whatever makes sense...
Martin Norberg
1,663 PointsI mean the styling of it all, not the content. If you check the footer, it's indented 10-20px more than the rest of the page without me doing specifying it (well obviously I have but I dont see where) , I do not understand why.
So I'm talking stlying of menu, styling of slogan, general stlying of the page and the fonts.
Matt Campbell
9,767 PointsI'm not seeing what you mean about the footer indented. Indented from where?
As for fonts. Google top 20 web fonts or something. There's a tonne of sites, all of which have the same few as a theme so you know they're the ones to go for.
Key with fonts is readability first and then does it fit the style of the site.
A tip for you, if you like developing and that's what you think you'll be good at, leave the design to someone who is good at design. Personally, I'm fine with laying out a page and formatting everything so it looks nice and has a good UX but, colours and the like I'm not so good at. A designer has a different talent set to me so I asked friends I know who like to draw etc for some help. I even put a thread up here and met a very nice chap who is working with me now.
As aspiring developers, we need to build free sites to get our portfolio up, it's the same for designers so bare that in mind.
Martin Norberg
1,663 PointsThat is quite true. I'm a beginner in every field when it comes to web developing, but I'd like to design and code every site myself because I enjoy both parts equally.
Excuse me about the footer, I mean the ul in the footer is indented. The footer itself I do not worry about. I tried using padding: 0 in the ul property but nothing happens. I don't understand my code well enough to know what's causing it.
John Locke
15,479 Points@Martin It looks like all the ul menus are padded evenly.
Martin Norberg
1,663 PointsIs it my browser acting up? I don't understand. Doesn't it look like this: http://i.nlsn.se/xWfk3M.png?
Site map is way off compared to the lorem ipsum paragraphs above.
John Locke
15,479 PointsYou might need to declare a min-height on the footer, or your list items if they are all floated. My browser didn't show that effect.
Martin Norberg
1,663 PointsI seem to be confusing everyone. I don't mean it cutting off at the bottom, that's just what I captured. I mean the text, that is indented more to the right than the paragraphs. How does that have to do with min-heigh? I do not understand.
James Barnett
39,199 PointsFont tips and suggestions? I barely know any fonts and I find it hard to chose a good one.
Check out this presentation on All the fonts you'll ever need
Also here are some tips getting better with Typography:
Martin Norberg
1,663 PointsThanks for the links. I've been meaning to read Design for Hackers for a while now and it really seems to be an excellent book.
James Barnett
39,199 PointsMartin Norberg - I think the Principles of Beautiful Web Design is a better choice for a web design book.
Matthew McCulloch
5,341 PointsIf I'm understanding what you're asking, it looks like you have a margin-left: 30px rule targeting li in your text.css file. If you want to troubleshoot styling in a website, I can't recommend using a browser tool like chrome's console enough. When I discovered this tool it made previous nightmares trying to get styling down a breeze.
In Google Chrome, right click on the screen and choose 'Inspect element'. Alternatively, press "Ctrl + Shift + I" on a windows box to bring up the console. It should default to the elements tab, from there you can click on any element in the console to bring up a variety of information on it on the properties screen to the right. You can check the "Styles" section of the properties screen to figure out what styles are effecting the element and where they're coming from. Two other extremely helpful tabs are Network (shows all resources downloaded from server and indicates resources not received) and Console (for testing/troubleshooting javascript).
There are alternatives to this for Firefox(Firebug?) and I believe IE, I never looked into it much though as the Chrome tool has handled everything I've needed it to do so far.