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.

CSS How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Dimitri Coukos
Dimitri Coukos
2,819 Points

None 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>&copy; 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
Ilias Loukakis
20,041 Points

on your CSS file you have img { max-width = 100% ;
}

make that

img { max-width: 100%; }

that should fix it. Let me know :)

Dimitri Coukos
Dimitri Coukos
2,819 Points

Ευχαριστώ πάρα πολύ Ιλιάς!

Ilias Loukakis
Ilias Loukakis
20,041 Points

Hello, 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
Dimitri Coukos
2,819 Points

Thanks 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
Ilias Loukakis
20,041 Points

Apologies, you miss a < / ul > tag at your #gallery

Dimitri Coukos
Dimitri Coukos
2,819 Points

Oh sorry it's actually in the full version, let me post the full version.

Dimitri Coukos
Dimitri Coukos
2,819 Points

Oh sorry it's actually in the full version, let me post the full version.