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!

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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Derryl Frazier
PLUS
Derryl Frazier
Courses Plus Student 2,011 Points

tried almost everything. page not showing as displayed in example. (common issue Im assuming)

well, images are too large, not shrinking, 1 column, and isk , maybe a few other problems too. I believe i have the code exactly as displayed. maybe you all can take a look.

HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Derryl Frazier | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css? family=Changa+One|Open+Sans:400,400italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/Main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Derryl Frazier</h1> <h2>Front End Web Designer</h2> </a> <nav> <ul id="gallery"> <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> <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 create an 80's style of glows</P> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt""> <p>Drips created by photoshop brushes</P> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt""> <p>Creating shapes using repitition</P> </a> </li> </ul> </section> <footer> <a href="https://twitter.com/_bossware"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="https://www.facebook.com/derryl.frazier.5"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>Ā© 2016 Derryl Frazier </p> </footer> </Div> </body>

</html>

CSS:

/******************************* general *******************************/

body{ font-family: 'open sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

image{ max-width: 100%; }

/******************************* Heading *******************************/

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.75em; margin: -5px 0 0; font-weight: normal; }

/******************************* Navigation *******************************/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/******************************* Footer *******************************/ footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;

}

/******************************* Page:Portfolio *******************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

/******************************* Colors *******************************/

/site body/ body { background-color: #fff; color: #999; }

/green header/ header{ background: #6ab47b; border-color: #599a68; }

/nav background on mobile/ nav { background: #599a68;

/Top page logo text/ h1, h2 { color: #fff; }

/links/ a{ color: #6ab47b; }

/nav link/ nav a, nav a:visited { color:#fff; }

/hover over nav link/ nav a.selected, nav a:hover { color: #32673f; }

/nav background on mobile/ nav { background: #599a68; }

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ok, removed my answer since we've confirmed that you are linking to your stylesheet. Will review the code and see if I can see any issues. You said you've tried about everything, but I have to ask. Have you tried clearing your browser cache and reloading the page?

Derryl Frazier
Derryl Frazier
Courses Plus Student 2,011 Points

absolutely. Ive even tried several other browsers. However, I have run the css code through a invalidator and am getting 2 error messages regarding parse errors for line 133 in the code. here it is again, Ive marked a note at the bottom of code for 131-133. not sure if thats whats causing the problem

/******************************* general *******************************/

body{ font-family: 'open sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

image{ max-width: 100%; }

/******************************* Heading *******************************/

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.75em; margin: -5px 0 0; font-weight: normal; }

/******************************* Navigation *******************************/ nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/******************************* Footer *******************************/ footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;

}

/******************************* Page:Portfolio *******************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

/******************************* Colors *******************************/

/site body/ body { background-color: #fff; color: #999; }

/green header/ header{ background: #6ab47b; border-color: #599a68; }

/nav background on mobile/ nav { background: #599a68;

/Top page logo text/

h1, h2 { color: #fff; }

/links/ a { color: #6ab47b; }

/nav link/

nav a, nav a:visited { color:#fff; }

/hover over nav link/ nav a.selected, nav a:hover { color: #32673f; }

/********************************************************************************* LINES 131-133 BELOW


/nav background on mobile/ nav { background: #599a68; }

5 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I think I see the problem. You've given the unordered list inside of your nav the id of "gallery". Try removing the id from there and place it in the unordered list inside of "wrapper".

Change this:

<nav>
                <ul id="gallery">  <!-- REMOVE id from here --->
                    <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> <!--- place id HERE --->
                    <li>
                        <a href="img/numbers-01.jpg">
                        <img src="img/numbers-01.jpg" alt"">
                        <p>Experimentation with color and texture</P>
                        </a>
                    </li>
Derryl Frazier
Derryl Frazier
Courses Plus Student 2,011 Points

yes im using nicks pics. I will try that but i put it there because nick did. Thats why we use the # in css right? when using an id in html? I'll let you know how it comes out.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Right we use the # to target an id. I think maybe you managed to give the incorrect element the id of gallery. Right now your nav bar has the id of "gallery" and I'm fairly sure the actual gallery should have the id of "gallery" :)

Derryl Frazier
Derryl Frazier
Courses Plus Student 2,011 Points

i know ur trying to help lol idk anymore. maybe ill just move on n see where things go with it

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ok the only line I see that is definitely wrong is this one:

image{ max-width: 100%; }

It should be:

img{ max-width: 100%; }

Try changing that one and see if you notice a difference. It's in the wrapper near the top of your css.

Derryl Frazier
PLUS
Derryl Frazier
Courses Plus Student 2,011 Points

what do u mean the actual "gallery"? Im pretty sure I can set the name to anything as long as its matching in the style seet

Derryl Frazier
Derryl Frazier
Courses Plus Student 2,011 Points

ya Jennifer Nordell ill definitely let u know how things turn im gonna try your nav suggestion now

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I mean that in the code you posted at the beginning you have this:

 <nav>
                <ul id="gallery">
                    <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>

Here the nav bar with the links to your different pages has the id of "gallery". When I say "actual gallery" I mean the place where you're displaying the artwork. Which is the second unordered list inside your section element.

<section>
                <ul>  <!-- THIS should have the id of "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 create an 80's style of glows</P>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-09.jpg">
                        <img src="img/numbers-09.jpg" alt"">
                        <p>Drips created by photoshop brushes</P>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-12.jpg">
                        <img src="img/numbers-12.jpg" alt"">
                        <p>Creating shapes using repitition</P>
                        </a>
                    </li>
                </ul>
Derryl Frazier
PLUS
Derryl Frazier
Courses Plus Student 2,011 Points

its funny that you point that out because I had noticed that before and later made somechanges n made matters worst so i executed undo on everything n brought that back. thanks for pointing it out. That handles the image resize but not the issue of the 1 column, and bullets.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

The markdown can be weird I know. But when I look at your CSS in the post here I don't see a # before the wrapper and other parts with an id. I'm assuming they have one in the file but just didn't print out here?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I'm really trying to help, but not immediately seeing the problem Did you happen to upload your own pictures to use, or are you using Nick's?