Geocrafter Geocrafter - 2 months ago 8
HTML Question

CSS code affectecting what it is not suppose to be affecting

www.geo-village.com <- Live Example

Alright, so I have my main webpage's CSS and PHP file. i also include a navigation bar that is in a seperate PHP and CSS file. I have added a border for the navigation bar items. Why is the Login and Register buttons being affected? The login and register buttons are in the main html file and is does not have an id of #navbar which is why i am confused.

MAIN HTML FILE

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>GeoVillage - A Community</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id=header>
<img id=logo src="/image/header.png" alt="GeoVillage Community" style="width:500px;height:64px;">
<span id=logreg>
<?php
if(isset($_SESSION['loggedon']) && $_SESSION['loggedon'] == true){
echo '<a href=/logout>
<img id=logout src="/image/logout.png" alt="Logout">
</a>';
if ($_SESSION['adminsts'] == admin || $_SESSION['adminsts'] == sadmin) {
echo '<a href=/admin>
<img id=admingears src="/image/admin.png" alt="Admin Panel">
</a>';
}
} else {
echo '<a href=/login>
<img id=login src="/image/login.png" alt="Login">
</a>';
echo '<a href=/login/register.php>
<img id=register src="/image/register.png" alt="Register">
</a>';
}
?>
</span>
</div>
<?php
//NAVIGATION BAR IMPORT
echo '<div id=navbar>';
include 'navbar.php';
echo '</div>';
?>
</body>
</html>


CSS (MAIN FILE)

body {
background-color: lightgrey;
margin: 20px;
margin-left: 200px;
margin-right: 200px;
}

a {
text-decoration: none;
}
#header{
display:block;
}

#logreg{
vertical-align: top;
padding-top: 0px;
float: right;
display: inline-block;
}

#logreg a {
padding-right: 1px;
}


NAVBAR.PHP

<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/navbarstyle.css">
</head>
<body>
<div id=navbar>
<ul>
<li><a href=/>Home</a></li>
<li><a href=/vatsim>VatSim Online Training</a></li>
</ul>
</div>
</body>
</html>

navbar.css

#navbar {
background-color: #33ccff;
padding: 5px;
}

#navbar li, a {
text-decoration: none;
display: inline;
color: blue;
font-size: 20px;
font-weight: bold;
padding-left: 5px;
padding: 20px;
border-color: black;
border-style: solid;
}

#navbar ul {
margin: 0px;
padding-left: 0px;
}

Answer

You are selecting all <a> tags in your document:

#navbar li, a {
    ....
}

To scope these styles to <a>'s within #navbar you need to remove the comma (,)