CODEWITHSUNDEEP
htmlcss
user2021539
user2021539

Reputation: 967

How can I override CSS inherited properties

I've got a CSS file that I use to define a navigation bar. The navigation bar itself works and looks great. The problem is that it has taken over the LI and A tags so that when those tags are used later in the page, they look completely wrong. I'm just getting starting with CSS files (haven't done any web development in a very long time) so I'm not sure how to fix the later tags while still being able to keep what makes the navbar work. I can get most of the properties fixed by assigning a class to the later LI tags, but not all (for example margin and padding seem to not be changed by redeclaring them in the class). Any ideas to clean it up?

CSS for the navbar:

ul {
    width: 100%;
    padding: 0;
    margin: 10px auto 50px auto;
    position: relative;
    background: #000;
}   

li {
    padding: 0;
    margin: 0;
    position: relative;
}

li a { 
    display: block;
    color: #000;
    background: #0C9687;
    text-align: center;
    border-bottom: 3px solid #000000;
    height: 100%;
    white-space: nowrap;
    text-decoration: none;
}

li a:hover, li ul li a:hover {
    background: #06B7F9;
    color: #fff;
}

/*sub menus*/
ul li:hover ul {
    display: block;
}

ul li ul {
    display: none;
    position: relative;
    z-index: 1;
    height: 0;
    width: 100%;
    margin: 0;
}

li li a {
    white-space: normal;
    width: 100%;
    border-bottom: 1px solid #ddd;
}

ul.flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

ul.flex li {
    display: block;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
}

ul.flex li a {
    height: auto;
    white-space: normal;
}

ul.flex ul {
    position: absolute;
    top: 100%;
    z-index: 1;
    height: auto;
}

And here is the class I defined to try to set it back to normal:

#dfltli {
    display: block;
    list-style: disc outside;
    background: linen;
    padding: 20;
    margin: 20;
    position: relative; 
}

Which is called in html like:

This is an unordered list
<ul>
  <li>The marker (disc) should be lined up with the first letter</li>
  <li>in the line above it. But instead it is far to the left so</li>
  <li>padding and margin seem to be ignored. The Dev Options show</li>
  <li>that margin and padding are set to 0</li>
</ul>

Upvotes: 0

Views: 314

Answers (1)

r3mainer
r3mainer

Reputation: 24557

This is normally done by restricting the scope of the CSS rules that relate to the navigation bar.

For example, write your HTML like this:

<div class="navbar">
  <ul>
    <li><a href="/home">Home page</a></li>
    <li><a href="/stuff">Stuff</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

and then prefix the CSS rules for your navigation menu with .navbar, e.g.:

.navbar ul { margin: 0; padding: 0 }
.navbar li { list-style-type: none; }
/* --- etc --- */

Upvotes: 6

Related Questions