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!

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

Adam Hirschovits
Adam Hirschovits
4,983 Points
Posted by Adam Hirschovits
Adam Hirschovits
4,983 Points

I have some basic HTML / CSS code that is not working and would be grateful for some input

Hi all

I am trying to make a basic site whilst doing the course "How to Make a Website". Anyway, I have two questions:

  1. I have a navigation bar below my page header that reads in HTML like this:

    <nav> <ul class="topper"> <li><a href="index.html" class="selected">Homepage</a></li> <li><a href="contact.html">Contact me</a></li> <li><a href="about.html">About me</a></li> </ul> </nav>

Anyway, I would like all this section to appear in one colour and, currently, I cannot work out how to do this without just highlighting the words with one colour. Can anyone help?

http://port-80-qt3costr1l.treehouse-app.com

Apologies as I am sure this is quite a basic question (I tried giving the nav a class and using that in CSS and applying a background-color but that did not seem to work.

  1. I do not understand how to fix a specified width between my photos on this website (i.e. as the screen re-sizes, the images do not overlap). My CSS is this:

abroad li {

float: left; width: 45%; max-width: 45%; margin: 2.5%; list-style: none; }

abroad li a {

text-decoration: none; width: 45%; max-width: 45%; margin: 2.5%; }

Any advice?

Thanks everyone!

Best Adam

6 Answers

V. T van der Vlugt
V. T van der Vlugt
14,883 Points
V. T van der Vlugt
V. T van der Vlugt
14,883 Points

I've cleared abit of styles from your workspace environment, deleted the floats and changed display of most elements.

If you want to center list items, you can change display to block on the parent element and change it's width to 100%. Then you only need to add 

text-align: center

to center the list items. Also add a padding to the #abroad li selector so that you can add space between your items. They will stack when the screen size becomes smaller.

snapshot source code live preview

V. T van der Vlugt
V. T van der Vlugt
14,883 Points
V. T van der Vlugt
V. T van der Vlugt
14,883 Points

Hey,

The floats take your elements out of normal document flow that is why the background-color styling didn't work. Below is a link for more information.

float bg

i'd advise against using floats and, if you want to center item(depending on the element) try it with 

text-align: center;

or

margin: 0 auto;

or

display: inline-block.

Could you share your workspace so I could play around with it abit?

Adam Hirschovits
Adam Hirschovits
4,983 Points
Adam Hirschovits
Adam Hirschovits
4,983 Points

Thank you so much VT!!!

Here is the shared workspace (the colouring already works so great!)! Once again - thank you:

https://w.trhou.se/2qqyyan9a6

Best Adam

V. T van der Vlugt
V. T van der Vlugt
14,883 Points
V. T van der Vlugt
V. T van der Vlugt
14,883 Points

What does it need to contain, how do you want it to look like? I might be able to help you if you've got some sort of wireframe or mockup.

Adam Hirschovits
Adam Hirschovits
4,983 Points
Adam Hirschovits
Adam Hirschovits
4,983 Points

Thanks VT

To be honest, I am so new to coding (two weeks in) that I have no real intention as to final form wireframes (albeit I am familiar with how wireframes should look as I am working with a graphic designer to set up a side business in the Fantasy Sports industry), but I just want to be able to "mess around" with some very basic structure, and am purely experimenting at this stage. For the moment, I want to ensure that, as the screen gets smaller, the images do not overlap, and a gap remains between them whilst the screen becomes smaller, such that the images get more squeezed (I would have thought a "width" together with a "max-width" and "margin" in CSS would be sufficient, together with media rules to ensure that over / under certain thresholds, the images became stacked).

Best Adam