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
seth hinkle
1,090 PointsWhen adding more images to my gallery.html, the CSS for my images does not style the new images, what's wrong?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Seth Hinkle | Designer></title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Niconne%7CCantarell:400,700italic,400italic%7CBilbo' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Volkhov:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Skare Krow Design Inc</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="gallery.html" class="selected">Gallery</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contacts</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="image02/dead%20tree.jpg"> <img src="image02/dead%20tree.jpg" alt=""> <p>Tattoo of a dead tree designed by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Rachels%20Clown%20Mask.jpg"> <img src="image02/Rachels%20Clown%20Mask.jpg" alt=""> <p>Tattoo of a feathered Mardi Gras Clown Mask. Designed by Rachel Hinkle.</p> </a> </li> <li> <a href="image02/Pirate%20Love.jpg"> <img src="image02/Pirate%20Love.jpg" alt=""> <p>Sketch of a Tribal Skull accompanied by a dirk and dead daisy. Image by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Charlie%20Brown%20Tatt.jpg"> <img src="image02/Charlie%20Brown%20Tatt.jpg" alt=""> <p>Tattoo of Charlie Brown flying a kite. Designed by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Rebel%20Death.jpg"> <img src="image02/Rebel%20Death.jpg" alt=""> <p>Image of a skull painted like the confederate flag. Designed by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Snake%20Eyes.jpg"> <img src="image02/Snake%20Eyes.jpg" alt=""> <p>Image of a skull with one normal eye, one die with the single dot showing. Designed by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Sad%20Donald%20Duck.jpg"> <img src="image02/Sad%20Donald%20Duck.jpg" alt=""> <p>Tattoo of a sad looking Donald Duck, designed by Seth Mosby Hinkle.</p> </a> </li> <li> <a href="image02/Rose%20Portrait.jpg"> <img src="image02/Rose%20Portrait.jpg" alt=""> <p>A beautiful Rose Portrait tattoo, designed by Rachel Hinkle.</p> </a> </li> <li> <a href="image02/Clown%20Moon.jpg"> <img src="image02/Clown%20Moon.jpg" alt=""> <p>Tattoo of a Festive Clown Moon, designed by Rachel Hinkle.</p> </a> </li> <li> <a href="image02/Wikked%20Iron%20Cross.jpg"> <img src="image02/Wikked%20Iron%20Cross.jpg" alt=""> <p>Tattoo of a Sinister Iron Cross, designed by Seth Mosby Hinkle.</p> </a> </li> </ul> <li> <a href="image02/Aries%20Tribal.jpg"> <img src="image02/Aries%20Tribal.jpg" alt=""> <p>Design of a tribal Aries symbol, created by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Comic%20Book%20Idea-01.jpg"> <img src="image02/Comic%20Book%20Idea-01.jpg" alt=""> <p>Design for a comic book/strip idea, created by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Dopey%20Smoking.jpg"> <img src="image02/Dopey%20Smoking.jpg" alt=""> <p>Tattoo of Dopey the dwarf Smoking, designed by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Elder%20Water%20Dragon.jpg"> <img src="image02/Elder%20Water%20Dragon.jpg" alt=""> <p>Image of an Elderly Water Dragon, created by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Everlasting%20Love.jpg"> <img src="image02/Everlasting%20Love.jpg" alt=""> <p>Image of a beautiful heart and flowers, created by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Jedi%20Stitch.jpg"> <img src="image02/Jedi%20Stitch.jpg" alt=""> <p>Sketch of the character Stitch as a Jedi Knight, created by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Genie%20Outline.jpg"> <img src="image02/Genie%20Outline.jpg" alt=""> <p>Tattoo outline of the Character Genie, designed by Seth Mosby Hinkle</p> </a> </li> <li> <a href="image02/Owl-01.jpg"> <img src="image02/Owl-01.jpg" alt=""> <p>Sketch of a tribal owl, created by Seth Mosby Hinkle</p> </a> </li> </section> <footer> <a href="http://twitter.com/skrow81"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a> <a href="http://facebook.com/seth.hinkle2"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a> <p>© Seth Mosby Hinkle.</p> </footer> </div> </body> </html>
this is my gallery.html
/********** GENERAL **********/
body { font-family: 'Volkhov', serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; background: #60ff00; }
/* links */ a { text-decoration: none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 30px; color: #000; }
/********** 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: 'Niconne', cursive; margin: 15px 0; font-size: 2.25em; font-weight: normal; }
h2 { font-family: 'Volkhov', serif; font-size: 1.00em; 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 15px; padding: 2px; }
nav li { display: inline-block; margin: 2px 2px 10px 2px; text-shadow: 2px 3px 1px #05ff22; }
nav a { font-weight: 800; padding: 15px 10px; }
/********** FOOTER **********/
footer { font-size: 1.00em; text-align: center; clear: both; padding-top: 50px; color: #333; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/****************** PAGE: GALLERY ******************/
.home-photo { display: block; clear: both; max-width: 250px; margin: 0 auto 30px; border-radius: 90em; box-shadow: 7px 9px 10px black; }
/****************** PAGE: GALLERY ******************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #563178; color: #df0; box-shadow: 7px 9px 15px black; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #f3f315; }
/****************** PAGE: ABOUT ******************/
.profile-photo { display: block; clear: both; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; box-shadow: 9px 9px 20px black; }
/****************** PAGE: CONTACT ******************/
.contact-info { list-style: none; padding: 0 0 1em 30px; margin: 5px; 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: url('../img/phone.png'); text-shadow: 3px 3px 1px black; color: #efefef; }
.contact-info li.mail a { background-image: url('../img/mail.png'); color: #efefef; text-shadow: 3px 3px 1px black; }
.contact-info li.twitter a { background-image: url('../img/twitter.png'); text-shadow: 3px 3px 1px black; color: #efefef; }
/********** COLORS **********/
/* site body */ body { background-color: #888; color: #f3f315; }
/* green header */ header { background: #000; border-color: #222; }
/* nav background on mobile */ nav { background: #333; }
/* logo text */ h1, h2 { color: #ff0; }
/* nav link */ nav a, nav:visited { color: #f3f315; }
/* selected nav link */ nav a.selected, nav a:hover { color: #999; }
p { color: #000; }
This is my main.css
@media screen and (min-width: 480px) {
/****************** TWO COLUMN LAYOUT ******************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/****************** PAGE: GALLERY ******************/
#gallery li { width: 28.333%; }
#gallery li:nth-child(4n) { clear: left; }
/****************** PAGE: ABOUT ******************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 660px) {
/****************** HEADER ******************/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.25em; margin-bottom: 20px; }
header { border-bottom: 5px solid #777; margin-bottom: 60px; }
}
this is my responsive.css
The first few pictures in my gallery are styled just fine, but after them, the images lose all styling, gain bullet points, and are not sized properly. What can I do to fix this issue??
4 Answers
Cassie Koelsch
8,801 PointsIt looks like the rest of your list items are not in the unordered list. Your ul closing tag is right after the "Tattoo of a Sinister Iron Cross" list item. The closing ul tag should be at the bottom right above the section closing tag.
Jasen Carroll
9,958 PointsIt doesn't look like you have CSS applied to your images on the gallery page. You'll need the following selector:
gallery li a img {
however you want to style the images;
}
seth hinkle
1,090 Pointswill gallery li a img {} be able to fix my image problem? Do you have a better example of how to use this rule in my CSS?
Jasen Carroll
9,958 PointsUnfortunately I don't know how you want your images formatted so I can't provide a better example.
If you set everything up as follows, and then replace the styles with how you'd like to apply to your images, it should all work. These could be things like margins, height, width, position, so on and so forth.
#gallery li a img {
style 1;
style 2;
style 3;
style 4;
}
Jasen Carroll
9,958 PointsAlso Cassie is right, move the closing ul tag to the end of the images, right now it is directly after Wikked Iron Cross Image which is why that is the last image that appears correctly.
seth hinkle
1,090 Pointsseth hinkle
1,090 Pointsit starts messing up right after my Wikked Iron Cross Image. It also puts a bullet point at the very top right of my page. CAn anyone help me?