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
Zahid Ceron
489 PointsWhy is my text on other pages not the same as my index page?
So, I'm basically trying to get the same font, color, etc on the body of all my pages, however this doesn't seem to be the case in my current code. could someone explain why? here are both my css first, and both my index file, and a extra about page. thank you in advance!
/**********************************************************
general ***********************************************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
h3 {margin: 0 0 1em 0;}
/********************************************************** 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: '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; }
nav ul {list-style: none; margin; 0 10px; padding: 0; } nav li {display: inline-block;}
nav a {font-weight: 800; padding: 15px 10px;} /********************************************************** FOOTER ***********************************************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon {width: 20px; height: 20px; margin: 0px;} /********************************************************** PAGE PORTFOLIO ***********************************************************/
nav ul,
gallery{margin: 0; padding: 0; }
gallery li {list-style: none; float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {margin: 0; padding; 5% font-size: 0.75em; color: #bdc3c7}
/********************************************************** PAGE ABOUT ***********************************************************/
.profile-photo {display:block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%;}
/**********************************************************
***********************************************************/
/* site body */ body { background-color: #fff color: #999; }
/* blue header */ header { background:#4775FF; border-color: #6C91FF }
/* nav background on nombile*/ nav { background: #6C91FF; } /* logo links / h1, h2 { color: #fff; } / colored links */ a { color: #4775FF; }
/* nav link */ nav a, nav a:visited { color: #fff; } /*selected nav link */ nav a.selected, nav a:hover { color: #3252B2; } </style>
And now here is my index file
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Zahid || Desginer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Zahid Ceron</h1> <h2>Designer</h2> </a> <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 id="gallery"> <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 glow</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/likeomgjordan"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/jordan.resendiz.56"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2015 Zahid Ceron. </p> </footer> </div> </body> </html>
and last is my about file
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Zahid || Desginer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Zahid Ceron</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html"> Portfolio</a></li> <li><a href="about.html" class="selected">About </a> </li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="gallery"> <img src="img/jordan.jpg" alt="Photograph of Zahid Ceron" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Zahid and this is just a test site! Thank you for checking it out! </p> <p>If you'd like to follow me my twitter name is, <a href="https://twitter.com/likeomgjordan"> @likeomjordan </a> </p> </section> <footer> <a href="https://twitter.com/likeomgjordan"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/jordan.resendiz.56"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2015 Zahid Ceron. </p> </footer> </div> </body> </html>
Zahid Ceron
489 Pointshere is my snapshot https://w.trhou.se/shajzzyqno
Marcus Parsons
15,719 PointsZahid,
They are both using the same text and styles. So can you clarify your question further?
Zahid Ceron
489 PointsYes, so if you go to: http://port-80-xk1zk0fc1x.treehouse-app.com/ you will see that the main page has a different text and color than the text in the about & contact page.
1 Answer
Marcus Parsons
15,719 PointsZahid,
I don't know why you would want really light text on your white background. It's not going to show up well. But, the reason why they are different is that the selectors in your main.css target the gallery elements in a specific order of children. The paragraphs (descriptive text) in your index are children of the gallery, then a list item, then an anchor. Your paragraphs in your about page do not follow this pattern. Look over your CSS and you'll see what I mean.
Zahid Ceron
489 PointsHaha thank you so much! I know what I'm trying to do seems weird, but check out the link again. I fixed it. I get what you mean now by the children of the gallery. It all just clicked. Thank you!
Marcus Parsons
15,719 PointsYou're welcome! I was just about to post a comment saying that it was the "#gallery li a p" selector that made your description text for the images in your index page look the way they are. Good luck, Zahid!
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsHey Zahid,
Can I get you to post a link to a snapshot of your workspace? I'm not seeing anything out of the ordinary in your code. Here's how to post one if you don't know: http://www.teamtreehouse.com/forum/workspace-snapshots