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.

HTML How to Make a Website Adding Pages to a Website Add Iconography

Liberty Bollen
Liberty Bollen
729 Points

I'm replicating everything, but it's not all showing in my preview browser, e.g. Contact us text alignment and imagery.

For example, I've included the below, but the images are no appearing in my preview. I've checked all the coding in index.html and contact.html and it replicates everything I've been shown. This is happening for text alignment as well. I'm using Firefox as Google kept crashing...would this be an issue?

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.phone a { background-image: url('../img/mail.png'); }

.contact-info li.phone a { background-image: url('../img/twitter.png'); }

4 Answers

Liberty Bollen
Liberty Bollen
729 Points

Hi Filipe and thanks for getting back to me.

I realised that I hadn't put </ul> after the list items in contact.html, but instead before them. So that has resolved the image issue. However, the paragraphs under <h3> on About us and Contact pages are not matching the video results, but are aligning tightly to the left of the page. See what I mean here http://port-80-h49ko4f14i.treehouse-app.com/about.html

The <h3> coding in the css under General is:

h3 { margin: 0 0 1em 0; }

With no <p> styling

This is what I have for About and Contact in CSS

/******************************** PAGE ABOUT *********************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/******************************** PAGE CONTACT *********************************/

.contact-info { list-style: none; Padding: 0; margin: 0 20px; font-size: 0.9em: }

.contact-info p { margin: 0 20px; padding: 20px 0; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

Can you see anything obvious I'm missing?

Thanks

Liberty

Robert Tyree
Robert Tyree
13,335 Points

Hi there,

I'm not sure what your end goal is, but if you're trying to center align the profile photo, about and contact info you'll want to center your div with the id "wrapper" by setting the margin to auto.

#wrapper { max-width: 940px; margin: auto; }

You can center the text using this CSS, but again, not entirely sure centering is the end goal

h3, p { text-align: center; margin: auto; }

Good luck!

Liberty Bollen
Liberty Bollen
729 Points

Hi Robert

Thank you so much for your help. I will want to centrally align eventually, so this has been very helpful.

I'm getting there slowly!