macattack Posted August 20, 2008 Share Posted August 20, 2008 Hello, I'm currently designing a website (my first complex one with CSS), and I have a navbar that displays at the top of every page. I want this navbar to be one colour, and the rest of the page another. I set a class of the <body> tag to "navbar", and set it to a blue colour, and the default body tag to white, however, the whole page renders with the blue colour. Here is the offending stylesheet snippet: body {background-color: white; } body.navbar {background-color: #041374; } and here is the offending implementation (the navbar is "topbar.php"): print "<body class='navbar'>"; include "topbar.php"; print "<body class='none'>"; and here is the navbar: <?php print ("<img class='header' src='images/de18.jpg'> <h1>Welcome to the Silver Fox Curling & Yacht Club</h1> <h3> <a class='header' href='events.php'>Events</a> <a class='header' href='entertainment.php'>Entertainment</a> <a class='header' href='curling.php'>Curling</a> <a class='header' href='sailing.php'>Sailing</a> <a class='header' href='contact.php'>Contact Us</a> <a class='header' href='management.php'>Management</a> <a class='header' href='virtual.php'>Virtual Tour</a> </h2><br/> "); ?> The only part that doesn't work is the change back to a white background. If you could direct me in the right direction, that would be wonderful. Thank you in advance! Link to comment https://forums.phpfreaks.com/topic/120588-solved-body-class-colour/ Share on other sites More sharing options...
haku Posted August 21, 2008 Share Posted August 21, 2008 CSS is cascading. This means that it reads in all the CSS declarations from top two bottom, and if there are two declarations on the same element, it uses the one that comes last (or is more specific, but that's a different topic). You have declared a background color for the same body tag, twice. The second tag is the one that comes after (and its more specific, but again, different topic), so it is the one that is used. You applied the class of navbar to the body. So when you change the color of that class, it changes the color of that tag, the whole body. If you want the background of the navbar itself to be a different color, you should wrap a div around it, and give THAT div a background color. That way the body will have one background color for the whole page, and that div will have a different background color just for that div. Link to comment https://forums.phpfreaks.com/topic/120588-solved-body-class-colour/#findComment-621594 Share on other sites More sharing options...
macattack Posted August 21, 2008 Author Share Posted August 21, 2008 Thanks! That was the trick I was missing. I've never had something with this complexity before, so it was confusing. Link to comment https://forums.phpfreaks.com/topic/120588-solved-body-class-colour/#findComment-621621 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.