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

CSS

Posted by Asim Shah
Asim Shah
5,378 Points

Only reading css till the navigation bar

Parallel to the course i am working on my own project.

Now i finished one full page but the brrowser is only reading the css untill the navigation bar. Below the navigation i only have blank page.

The IDE i am using is telling no bugs and in the source coude which i checked in production environment it is showing up all the code below the navigation bar.

I code the site in php.

The navigation bar is horizontal and made with an ul-class.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

It would be nice if we can see your code mate.

Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points
Rasbin Rijal
Rasbin Rijal
Courses Plus Student 10,864 Points

Hello Asim,

You should post the code somehow via new workspace link, or placing your code in some other websites and posting with your link here.

7 Answers

Asim Shah
Asim Shah
5,378 Points
Asim Shah
Asim Shah
5,378 Points

index.php:

<?php $page = basename($_SERVER['PHP_SELF']); $pageposition = strrpos($page, '.'); $page = substr($page, 0, $pageposition); require("inc/config.php"); require("inc/pageidentifyer.php"); ?> <!doctype html> <html> <head> <title><? echo $title ?></title> <meta name=description content="<? echo $description ?>" > <meta name=keywords content="<? echo $keywords ?>" > <link rel="stylesheet" type="text/css" href="<? echo $cssurl ?>"> </head> <body> <?php require("templates/header.php"); ?> <div id="container"> <div id="welcome"> <?php $sql = "SELECT text FROM pages WHERE name = '$page'"; $result = $conn->query($sql); $row = $result->fetch_assoc(); $welcome = $row["text"]; echo $welcome; ?> </div> </div> <?php require("templates/footer.php"); ?> </body> </html>

Asim Shah
Asim Shah
5,378 Points
Asim Shah
Asim Shah
5,378 Points

header.php:

/* <?php require("inc/config.php"); require("inc/pageidentifyer.php"); ?> <header> <div id="header"> <div id="logo"> <img src="/templates/images/logo.png" alt="Logo"> </div> <ul class="navbar"> <li><a href="/index.php">Home</a></li> <li><a href="/design.php">Web Design</a></li> <li><a href="/hosting.php">Web Hosting</a></li> <li><a href="/programming.php">Programming</a></li> <li><a href="/domains.php">Domains</a></li> </ul> </div> </header> */

Asim Shah
Asim Shah
5,378 Points
Asim Shah
Asim Shah
5,378 Points

index.css:

@CHARSET "ISO-8859-1";

header {

position: fixed;
top: 0;
left: 0;
height: 120px;
width: 100%;
background-color: white;

}

logo {

height: 100px; width: 150px; margin-top: 10px; margin-left: 10px; }

ul.navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }

ul.navbar li { float: left; }

ul.navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }

ul.navbar li a:hover:not(.active) { background-color: #111; }

ul.navbar li a.active { background-color: #4CAF50; }

@media screen and (max-width: 600px){ ul.navbar li {float: none;} }

container {

margin_top: 20px;
background-color: white;
color: black;

}

welcome {

width: 100%;
margin-top: 20px;
margin-left: 0px auto;
text-align: center;

}

footer {

color: white;
background-color: black;

}

ul.bottomnav { margin: 0px auto; list-style-type: none; margin: 10px; padding: 0px; overflow: hidden; }

ul.bottomnav li { display: inline-block; margin: 10px; text-align: center; }

ul.bottomnav li a { text-align: center; }

copyright {

margin: 0 auto 0 auto;

}

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Hi Asim,

Check all your id's and class make sure they are correct.

We can see that your id's for container, welcome, footer and copyright does not have the pound sign / hashtag if you're declaring them as class OR the .(dot) if you're declaring them as a class. (must be entered as the first character)

Try updating them to :

header {

position: fixed;
top: 0;
left: 0;
height: 120px;
width: 100%;
background-color: white;
}

#logo {

height: 100px; width: 150px; margin-top: 10px; margin-left: 10px; }

ul.navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }

ul.navbar li { float: left; }

ul.navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }

ul.navbar li a:hover:not(.active) { background-color: #111; }

ul.navbar li a.active { background-color: #4CAF50; }

@media screen and (max-width: 600px){ ul.navbar li {float: none;} }

#container {

margin_top: 20px;
background-color: white;
color: black;
}

#welcome {

width: 100%;
margin-top: 20px;
margin-left: 0px auto;
text-align: center;
}

footer {

color: white;
background-color: black;
}

ul.bottomnav { margin: 0px auto; list-style-type: none; margin: 10px; padding: 0px; overflow: hidden; }

ul.bottomnav li { display: inline-block; margin: 10px; text-align: center; }

ul.bottomnav li a { text-align: center; }

#copyright {

margin: 0 auto 0 auto;
}

Or if your declaring them as a class 

header {
position: fixed;
top: 0;
left: 0;
height: 120px;
width: 100%;
background-color: white;
}

.logo {
height: 100px; 
width: 150px; 
margin-top: 10px; 
margin-left: 10px; 
}

ul.navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }

ul.navbar li { float: left; }

ul.navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }

ul.navbar li a:hover:not(.active) { background-color: #111; }

ul.navbar li a.active { background-color: #4CAF50; }

@media screen and (max-width: 600px){ ul.navbar li {float: none;} }

.container {
margin_top: 20px;
background-color: white;
color: black;
}

.welcome {
width: 100%;
margin-top: 20px;
margin-left: 0px auto;
text-align: center;
}

footer {
color: white;
background-color: black;
}

ul.bottomnav { margin: 0px auto; list-style-type: none; margin: 10px; padding: 0px; overflow: hidden; }

ul.bottomnav li { display: inline-block; margin: 10px; text-align: center; }

ul.bottomnav li a { text-align: center; }

.copyright {

margin: 0 auto 0 auto;
}

Hopes this helps..

Asim Shah
Asim Shah
5,378 Points
Asim Shah
Asim Shah
5,378 Points

changed from id´s to classes, same result:

header { position: fixed; top: 0; left: 0; height: 120px; width: 100%; background-color: white; }

.logo { height: 100px; width: 150px; margin-top: 10px; margin-left: 10px; }

ul.navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }

ul.navbar li { float: left; }

ul.navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }

ul.navbar li a:hover:not(.active) { background-color: #111; }

ul.navbar li a.active { background-color: #4CAF50; }

.container { margin_top: 20px; background-color: white; color: black; }

.welcome { width: 100%; margin-top: 20px; margin-left: 0px auto; text-align: center; }

footer { color: white; background-color: black; }

ul.bottomnav { margin: 0px auto; list-style-type: none; margin: 10px; padding: 0px; overflow: hidden; }

ul.bottomnav li { display: inline-block; margin: 10px; text-align: center; }

ul.bottomnav li a { text-align: center; }

.copyright { margin: 0 auto 0 auto; }

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Check if you declared them properly on your html file.

Asim Shah
Asim Shah
5,378 Points
Asim Shah
Asim Shah
5,378 Points

Problem solved, thanks. deleted the "position: fixed;" in #header and instead fixed the logo with "position: absolute;".

header {

top: 0;
left: 0;
height: 100px;
width: 100%;
background-color: white;

}

logo {

position: absolute; height: 100px; width: 150px; top: 20px; margin-left: 10px; }

ul.navbar { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; }

ul.navbar li { float: left; }

ul.navbar li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }

ul.navbar li a:hover:not(.active) { background-color: #111; }

ul.navbar li a.active { background-color: #4CAF50; }

@media screen and (max-width: 600px){ ul.navbar li {float: none;} }

.container { margin_top: 20px; background-color: white; color: black; }

.welcome { width: 100%; margin-top: 20px; margin-left: 0px auto; text-align: center; }

.footer { color: white; background-color: black; }

ul.bottomnav { margin: 0px auto; list-style-type: none; margin: 10px; padding: 0px; overflow: hidden; }

ul.bottomnav li { display: inline-block; margin: 10px; text-align: center; }

ul.bottomnav li a { text-align: center; }

.copyright { margin: 0 auto 0 auto; }

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Great job Asim! Cheers!

Asim Shah
Asim Shah
5,378 Points
Asim Shah
Asim Shah
5,378 Points

Thanks Owa !