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
missfit
18,561 PointsHi! I have been following along to the videos and have been creating my website; however, I am having a bit of trouble.
My first problem I am running into is that the photos on my home webpage are not aligned correctly within their borders. In addition, my links for: Portfolio, About, & Contact do not link out. Lastly, I have not been able to minimize my facebook and twitter icons.
I believe there is something wrong with my code either in my index.html, about.html, contact.html or main.css. I have provided the current link to my website, as well as the code to each of my files below. Also, Am I supposed to have a normalize.css file?....
If someone could help me out that would be fantastic!!! I apologize in advance for all of info! Thank you!!! :D
website: http://port-80-c88r6z3l7x.treehouse-app.com/
CODE:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ellie Grace | Potty Training Pro</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Courgette|Dosis:400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ellie Grace</h1>
<h2>Potty Trainer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/images-01.jpg">
<img src="img/images-01.jpg" alt="">
<p>Hey!! It's me EG!! Let me tell you a little about myself...</p>
</a>
</li>
<li>
<a href="img/images-02.jpg">
<img src="img/images-02.jpg" alt="">
<p>I'm a popsicle lover.</p>
</a>
</li>
<li>
<a href="img/images-03.jpg">
<img src="img/images-03.jpg" alt="">
<p>Who loves spending time eating pancakes with her Nona.</p>
</a>
</li>
<li>
<a href="img/images-04.jpg">
<img src="img/images-04.jpg" alt="">
<p>And going on walks with my Papa.</p>
</a>
</li>
<li>
<a href="img/images-13.jpg">
<img src="img/images-13.jpg" alt="">
<p> This is my Nona and Papa! We are having a lovely day at The Biltmore!</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/missybur"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/missybur"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 Ellie Grace.</p>
</footer>
</div>
</body>
</html>
main.css:
/********************************** GENERAL ***********************************/
body { font-family: 'Dosis', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
logo {
text-align: center; margin: 0; }
a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin: 0 0 len 0; }
/********************************** HEADING ***********************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Crafty Girls', sans-serif; margin: 15px 0; font-size: 2.75em; font-weight: normal; line-height: 1em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/********************************** NAVIGATION ***********************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/********************************** FOOTER ***********************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #c0c0c0; } .social-icon { width: 20px; height: 20px; margin: 0 5px; }
/********************************** PAGE PORTFOLIO ***********************************/
img { max-width: 100%; }
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color:#99FB98; color: #ff69b4; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #ff69b4; }
/********************************** 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; font-size: 0.9em; }
.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: urk('../imp/phone.png'); }
.contact-info li.mail a { background-image: urk('../imp/mail.png'); }
.contact-info li.twitter a { background-image: urk('../imp/twitter.png'); }
/********************************** COLORS ***********************************/
/* site body */ body { background-color: #FF69B4; color: #999; }
/* green header */ header { background: #99FB98; border-color: #00ff00; }
/* nav background on mobile */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #ff69b4; }
/* links */ a { color: #ff69b4; }
/* nav link */ nav a, nav a:visited { color: #ff69b4; }
/* selected nav link */ nav a.selected, nav a:hover { color: #COCOCO; }
contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ellie Grace | Potty Training Pro</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Courgette|Dosis:400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ellie Grace</h1>
<h2>Potty Trainer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<h3>General Information</h3>
<p>Feel free to contact my Aunt Nemo Missy!</p>
</section>
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-659-5555"></a></li>
<li class="mail"><a href="mailto:missybur@gmail.com">missybur@gmail.com</a></li>
<li class="twitter"><a href="http://twitter.com/missybur"></a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com/missybur"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/missybur"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
<p>© 2014 Ellie Grace.</p>
</footer>
</div>
</body>
</html>
about.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ellie Grace | Potty Training Pro</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Crafty+Girls|Courgette|Dosis:400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Ellie Grace</h1>
<h2>Potty Trainer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/images-10.jpg" alt="Pic of Ellie Angie and Ben at beach" class="profile-photo">
<h3>About</h3>
<p>Hi, I'm Ellie Grace! Some people, including myself, like to refer to me as EG. I love playing with my friends, riding horses, searching for turles on the beach and playing with my Missy Emo!</p>
<p>If you would like to follow me on twitter, you better just follow my aunt Missy instead, because I've got better things to do for now! Her username is <a href="http://twitter.com/missybur">@missybur</a>.</p>
</section>
<footer>
<a href="http://twitter.com/missybur"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/missybur"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
<p>© 2014 Ellie Grace.</p>
</footer>
</div>
</body>
</html>
Thanks again!!!!! :)
2 Answers
Samuel Webb
25,370 PointsSo first off, I'll start with the social media icons since that's the easiest. Basically, you'll want to put a class on each of the img tags that hold the FB and Twitter images. Something obvious like .sm_logo or whatever. That would look like this:
<img src="blah" alt="blah" class="sm_logo">
Then in your CSS, you'll want to target that class and either set it to a specific width and height in pixels/ems or you could set it with percentages. Its up to you.
.sm_logo {
width: 20px;
height: 20px;
}
For the links all I can think of is that you might have them in a different directory than your index.html file. If that's the case, you'll have to navigate to that folder to get to your other pages. Example:
<a href="contact/contact.html">Contact</a>
File navigation is something that is very, very important in web dev so make sure you get a complete grasp on relative and absolute paths.
For the gallery images, I'll have to get back to you on that.
Samuel Webb
25,370 PointsOops, I wrote up this long elaborate thing after reading what you asked incorrectly. To make your images take up the full span of their borders, do this CSS:
#gallery img {
width: 100%;
}
missfit
18,561 PointsHi Samuel! Thanks for answering all my questions! I am only going to post things one at a time from now on because giving feedback to your solutions is getting complicated. :P Sorry for the delay.
Below is a list of my problems, your solutions to them, and my feedback:
- Problem: Photos on my home webpage are not aligned correctly within their borders.
Your Solution: Oops, I wrote up this long elaborate thing after reading what you asked incorrectly. To make your images take up the full span of their borders, do this CSS:
gallery img {
width: 100%;
}
My feedback: Yup, that worked!
- Problem: My links for: Portfolio, About, & Contact do not link out.
Your Solution: For the links all I can think of is that you might have them in a different directory than your index.html file. If that's the case, you'll have to navigate to that folder to get to your other pages. Example:
<a href="contact/contact.html">Contact</a>
File navigation is something that is very, very important in web dev so make sure you get a complete grasp on relative and absolute paths.
My Feedback: It finally worked. For some reason I had:
<li><a href="css/contact.html">Contact</a></li>
instead of:
<li><a href="contact.html">Contact</a></li>
- Problem: I have not been able to minimize my facebook and twitter icons.
Your Solution: So first off, I'll start with the social media icons since that's the easiest. Basically, you'll want to put a class on each of the img tags that hold the FB and Twitter images. Something obvious like .sm_logo or whatever. That would look like this:
<img src="blah" alt="blah" class="sm_logo">
Then in your CSS, you'll want to target that class and either set it to a specific width and height in pixels/ems or you could set it with percentages. Its up to you.
.sm_logo { width: 20px; height: 20px;
My Feedback:
That worked! However, I liked my social icon images a little bigger, so I ended up changing them back to the size that they were at.
Thanks so much for all your help!!!!
I have another question, but I learned my lesson and am going to post it separately.
Samuel Webb
25,370 PointsNo problem. Glad to help.
Samuel Webb
25,370 PointsSamuel Webb
25,370 PointsI just noticed that there's CSS there for the social media icons, but the problem is that you never put those classes in the HTML.