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
Dimitri Coukos
2,819 PointsNone of the new styling is being applied
Hi everybody, none of the new styling is being applied from the last two videos (i.e. my images aren't in two columns , the twitter and facebook logos are not at the bottom of the page, and the new margins/colors for object backgrounds and text are not being applied. Please help!! Sincerely, someone who has no idea what's wrong
Full HTML gallery :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dimitri Coukos | Expert Person</title>
<link rel ='stylesheet' href ="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,300italic|Open+Sans:400italic,700italic,800italic,400,700|Changa+One' rel='stylesheet' type='text/css'>
<link rel ='stylesheet' href ="css/main.css">
</head>
<body>
<header>
<div id="logo">
<a href="index.html">
<h1>Dimitri Coukos</h1>
<h2>Designer</h2>
</a>
</div>
<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/numbers-01.jpg" >
<img src="img/numbers-01.jpg" alt="">
<p> Experimentation with color and texture</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg" >
<img src="img/numbers-02.jpg" alt="">
<p> Playing with blending modes in Photoshop</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg" >
<img src="img/numbers-06.jpg" alt="">
<p> Trying to reate 80's style flows</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg" >
<img src="img/numbers-09.jpg" alt="">
<p> Drips</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg" >
<img src="img/numbers-12.jpg" alt="">
<p> Creating shapes using repeptition</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.twitter.com/exampleaccount"><img src="img/twitter-wrap.png" alt = "twitter logo"></a>
<a href="http://www.facebook.com/dimitri.coukos"><img src="img/facebook-wrap.png" alt = "facebook logo"></a>
<p>© 2015 Dimitri Coukos.</p>
</footer>
</div>
</body>
</html>
FULL CSS :
/************************************
GENERAL
*************************************/
body {
font-family: 'Open Sans', sans-serif ;
}
a{
text-decoration: none ;
}
#wrapper{
max-width: 940px ;
margin: 0 auto ;
padding: 0 5% ;
}
img {
max-width = 100% ;
}
/************************************
HEADING
*************************************/
#logo{
text-align: center ;
margin: 0 ;
}
h1 {
font-family: 'Changa One', sans-serif ;
/*We do this so that in the event that google fonts goes down
or the font becomes unavailable there's still a decent looking
'generic' sans-serif font to fall back on.*/
margin: 15px 0 ;
font-size: 1.75em ;
font-weight: normal ;
line-height: 0.8em ;
}
h2 {
font-size : .75em ;
margin : -5px 0 0 ;
font-weight: normal ;
}
/************************************
NAVIGATION
*************************************/
nav {
text-align : center ;
padding : 10px 0 ;
margin : 20px 0 0 ;
}
nav ul li{
display: inline-block ;
}
nav{
float: left ;
width: 100% ;
}
nav a {
padding: 10px 15px ;
}
/************************************
FOOTER
*************************************/
footer {
clear: both ;
font-size : .75em ;
text-align: center ;
padding-top : 50px ;
color: #ccc ;
}
/************************************
PAGE: PORTFOLIO
*************************************/
#gallery{
margin: 0 ;
padding: 0 ;
list-style: none ;
}
#gallery a{
float: left ;
width: 45% ;
margin: 2.5% ;
background-color: #f5f5f5 ;
color: #bdc3c7 ;
}
#gallery li a p {
margin : 0 ;
padding: 5 ;
font-size : .75em ;
color: #bdc3c7 ;
}
/************************************
COLORS
*************************************/
body {
background: white ;
color : #999 ;
}
a {
color: #6ab47b ;
}
/*Green header*/
header {
background-color: #6ab47b ;
border-color : #599a68 ;
}
/*Nav header on mobile devices. */
nav {
background : #599a68 ;
}
/*nav link*/
nav a, nav a:visited {
color : #fff ;
}
/*Selected nav link*/
nav a.selected, nav a:hover {
color: #32673f ;
}
/*logo text*/
h1, h2 {
color: #fff ;
}
THANKS!!
5 Answers
Ilias Loukakis
20,489 Pointson your CSS file you have
img {
max-width = 100% ;
}
make that
img { max-width: 100%; }
that should fix it. Let me know :)
Ilias Loukakis
20,489 PointsHello, I might be wrong if I don't see all your html or CSS, a link of your work would be helpful.
Make sure you have closed all { } within your css rules, that all comments are properly written /**/ and that your html tags are correct. I can see that you miss </ul> at the bottom of your html
Dimitri Coukos
2,819 PointsThanks for the quick reply Ilias! I checked the comments and the brackets. Can you clarify what you mean by "missing" at the bottom of my html?
Ilias Loukakis
20,489 PointsApologies, you miss a < / ul > tag at your #gallery
Dimitri Coukos
2,819 PointsOh sorry it's actually in the full version, let me post the full version.
Dimitri Coukos
2,819 PointsOh sorry it's actually in the full version, let me post the full version.
Dimitri Coukos
2,819 PointsDimitri Coukos
2,819 PointsΕυχαριστώ πάρα πολύ Ιλιάς!