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

CSS

George S-T
George S-T
6,624 Points
Posted by George S-T
George S-T
6,624 Points

My website design - How to build it?

Here is a picture of my mockup: [IMG]http://i60.tinypic.com/2443xx1.png[/IMG]

I wanted to make this website myself but I don't understand about the positioning of elements.

For example, I managed to make the background the correct colour and add in the top black bar using this code:

html {
    background-color: #332A2A;
}

.title {
    width: 100%;
    height: 4.5em;
    background-color: #1C1717;
    position: fixed;
    top:0;
    right:0;
    left:0;
}

I now want to add in the blue bar that's below however Im not sure how to position it where is should be.

Should I be using a grid? Flexbox? position: ?

Any help towards building this would be awesome! Thanks.

9 Answers

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

The blue bar is a navigation bar. You want to add it in your html code using a nav element with an unordered list in it, then style it in css.

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Also, technically you should be giving the body element the background color, not the html.

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Thanks for the help. So far it looks like this: [IMG]http://i57.tinypic.com/2a98d9z.png[/IMG]

Problems Im having:

  1. I can't get the light blue box into the right position. How should I move it to where it should be?

  2. On the nav bar, the list items are horizontally centred, but not vertically. How do I make them vertically centred?

Thanks!

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Another problem Im also having is adding the text-overflow: and word-wrap: properties. Sublime text 2 doesn't seem to recognise them. Any ideas?

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

The light blue box should be styled with css and given with margin: 0 auto; That will center it on the page. It's also too high - you have to give it it's own div in the html - call it container or content and place it in its own div after the nav bar. On the nav bar, you can add some top padding to the list items in css, that will push them down a little.

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Thanks! I will keep you posted on my progress and let you know of any other problems!

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

I'm not sure what problem you're having with text overflow and word-wrap. Check out (http://www.w3schools.com/cssref/css3_pr_text-overflow.asp) and (http://www.w3schools.com/cssref/css3_pr_word-wrap.asp).

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Good luck!

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Made loads of progress but one thing: I can't get the footer bar to stay at the bottom! [IMG]http://i61.tinypic.com/2i06pw7.png[/IMG]

Here is CSS for the footer:

.footer {
    background-color: #444444;
    width:100%;
    height: 35px;
    position: static;
    bottom: 0;
    left: 0;
    right: 0;
}

.footer p {
    padding-top: 10px;
    padding-left: 10px;
    color: #f7f7f7;
}

Thanks!

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

It looks great! try position: fixed instead of static.

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Sorry, I must have explained wrong! I want the bar to be at the bottom of the page in the picture I showed you, but not fixed there. So people only see it when they scroll to the very bottom of the page? Cheers.

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

The footer is appearing at the end of your content, which is where it should be. You have to make your content div longer or you can place the footer HTML after the div which contains the background color. Hope this makes sense!

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Hey Diane! Check out the site now! :D

http://www.fs.x10.mx/index.html

I clearly used loads of media queries in order to make my site work on different devices, however I just tried opening the site on my iphone and it comes up like it does on a desktop. How do I change this so my site is phone compatible? Thanks!

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Hey George, the site looks great - to make it mobile device compatible, add this code to the head of your html:

<meta name="viewport" content="width=device-width, initial-scale=1">