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
Jay Valentine
Courses Plus Student 4,389 PointsHelp? my web page doesn't looks like Nicks, (images not floating and such)
I dont know what's wrong with my HTML code or CSS, i tried to copy exactly what nicks done (apart from colour schemes etc) and my webpage isnt floating the gallery and the bulletpoints arent going? any help? i'll post my HTML and CSS code below;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>James Valentine | Designer </title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Questrial|PT+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>James Valentine</h1>
<h2>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 Colour 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 80s style of glows.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using 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/JamesValentine_"> <img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="https://facebook.com/MrValentineYO"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2014 James Valentine ♣</p>
</footer>
</div>
</body>
</html>
and my CSS is
/*****************************************
GENERAL
******************************************/
body {
font-family: 'questrial', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
/*****************************************
HEADING
******************************************/
#logo {
text-align:center;
margin: 0;
}
h1 {
font-family: 'PT SANS', sans-serif;
Margin: 15px 0px;
font-size: 1.75em;
font-weight: normal;
}
h2 {
font-size: 1em;
margin: -5px 0 0;
font-weight: normal;
}
h1, h2 {
text-align: center;
}
/*****************************************
NAVIGATION
******************************************/
nav {
text-align:center;
padding: 10px 0;
margin: 10px 0 0;
}
/*****************************************
FOOTER
******************************************/
footer {
text-align: center;
font-size: 0.75em;
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: white;
color: #999;
}
/* Bergundy header */
header {
background: #880000;
border-color: #B00000;
}
/* Nav background on mobile */
nav {
background: #900000;
}
/* LOGO TEXT */
h1, h2 { color: #fff;
}
/*LINKS*/
a {
color: #880000;
}
/*NAV LINKS*/
nav a, nav a:visited; {
color: #fff;
}
/*SELECTED NAV LINK*/
nav a.selected, nav a:hover; {
color:#1f1f1f; }
eck
43,038 PointsTake a look at the Markdown Cheatsheet link located above the comment button. There it is explained how to format code in a post. :)
Jay Valentine
Courses Plus Student 4,389 PointsI did? i am still confused?
Aimee Ault
29,193 PointsFixed it for you :) You need to enclose your code in ```s or indent your code 4 spaces in for it to work with Markdown.
3 Answers
jessicakafor
7,004 PointsHave you tried running it in w3c to see if there is a simple code error?
Ashley Livingston
6,931 PointsYou've got #Gallery where it should be #gallery in your CSS - that should help your bullet issue!
Jason Anello
Courses Plus Student 94,610 PointsGood catch Ashley.
The other part of the problem is that in your html you applied the "gallery" id to your navigation list when it should have been applied to your portfolio list. You'll need to move the id to the other ul.
<div id="wrapper">
<section>
<ul id="gallery">
Ashley Livingston
6,931 PointsI'm not sure what your intended final product is but it looks like the width on your #gallery li items is too big - you've got a width of 45% for each item, but three li items so there's no way they could all fit in one row. Hope that helps.
Update: Nevermind this post, Jason's post above clarifies my own confusion.
Jay Valentine
Courses Plus Student 4,389 PointsJay Valentine
Courses Plus Student 4,389 PointsHow do i get my CSS to look like the HTML above? ^^