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
fitrobotic
1,290 PointsThe image disappeared after CSS styling
I was able to see the profile image when I initially added it to the HTML, however, once I tried to style it in CSS, it disapeared. Any thoughts?
Thanks,
Davina
7 Answers
Jason Anello
Courses Plus Student 94,610 PointsThe Notes are below that video that this discussion is linked to. It contains the fix for firefox. You may want to review that.
The problem is that the floated header hasn't been cleared.
Instead of having the profile photo clear the float as explained in the Teacher's Notes you can have your wrapper element do it since that is what comes directly after the header in the markup.
I added clear: both to your existing #wrapper rule:
#wrapper {
clear: both;
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
Thomas Regan
2,032 Pointscode please, html and css
Dustin Matlock
33,856 PointsIt's always going to be helpful for someone to view the code you're working with. Check out Posting Code to the Forum on how to do that.
Jason Anello
Courses Plus Student 94,610 PointsHi Davina,
Take a look at the Teacher's Notes if you're on firefox.
fitrobotic
1,290 PointsHere is the css:
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
}
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
/* glinks*/
a {
color: #6ab47b;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 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: 'Changa One',sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.075em;
margin:-5px 0 0;
font-weight: normal;
}
/**************************
NAVIGATION
************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-stlye: 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: #ccc;
}
.social-icon {
width: 20px;
height: 20px
margin: 0 5px;
}
/**************************
PAGE: PORTFOLIO
**************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/**************************
PAGE: ABOUT
**************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius:100%;
}
/**************************
COLOR
**************************/
/*site body*/
body {
background-color: #fff;
color: #999;
}
/* nav background on mobile devices*/
nav {
background: #599a68
}
/* green header*/
header {
background:#6ab47b;
border-color:#599a68;
}
/* logo text*/
h1, h2 {
color: #fff;
}
/* nav links*/
nav a, nav a:visited {
color: #fff;
}
/* selected nav link color*/
nav a.selected, nav a:hover {
color:#32673f;
}
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Davina Fisher | Super Mom</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700italic,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href= "index.html" id="logo">
<h1>Davina Fisher</h1>
<h2> Super Mom</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
<h3>About</h3>
<p> Hi. This is Curtis Fisher with Curtis Fitness Personal Training.</p>
<p>If you'd like to follow me on Twitter my username is <a href="http://twitter.com/curtisfitnesstv">@curtisfitnesstv</a>.</p>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"class="social-icon"></a>
<a href="http://facebook.com/nickpetit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Davina Fisher.</p>
</footer>
</div>
</body>
</html>
Thanks!
Jason Anello
Courses Plus Student 94,610 PointsDavina,
You didn't mention if you were using firefox or not and whether you looked at the Teacher's Notes if you are.
fitrobotic
1,290 PointsHi Jason
I am using Firefox and I don't know how to access the Teacher's notes.
Thanks,
Davina
fitrobotic
1,290 PointsI see the notes now. Thanks for the info!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.