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.

CSS

Martin Norberg
Martin Norberg
1,663 Points

Help 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:

  1. How come the site-map ul at the bottom can't be paddened away? And why does it start so far in?
  2. I have troubles designing the menu well, any recommendations that would fit the site?
  3. Same thing with the slogan.
  4. Font tips and suggestions? I barely know any fonts and I find it hard to chose a good one.
  5. General suggestions for improvements are always welcome.

You can view the site here: http://nlsn.se/siv/

7 Answers

Michael Watson
STAFF
Michael Watson
Treehouse Teacher

Hi Martin Norberg

I think some fellow Treehouse students should be able to help out...my Swedish is non-existant so can't really help on the slogan :smile:

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
Martin Norberg
1,663 Points

I 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
Matt Campbell
9,767 Points

I'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
Martin Norberg
1,663 Points

That 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
John Locke
15,479 Points

@Martin It looks like all the ul menus are padded evenly.

Martin Norberg
Martin Norberg
1,663 Points

Is 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
John Locke
15,479 Points

You 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
Martin Norberg
1,663 Points

I 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
James Barnett
39,199 Points

Martin Norberg -

Font 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
Martin Norberg
1,663 Points

Thanks 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.

Matthew McCulloch
Matthew McCulloch
5,341 Points

If 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.