Solved

need css help on this

Posted on 2016-09-05
10
54 Views
Last Modified: 2016-09-13
I d like to change the background color of this element but I could not drill to find it.

  <nav class="top-bar" data-topbar="topbar" role="navigation">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">Employee Activity</a></h1>
                </li>
                <li class="toggle-topbar menu-icon right"><a href="#"><span>Menu</span></a>
                </li>
            </ul>

            <section class="top-bar-section">
                <ul class="right">
                    <li><a href="#">Home</a></li>
                    <li class="has-dropdown">
                        <a href="#">Persons</a>
                        <ul class="dropdown">
                            <li><a href="#">Add Person</a></li>
                        </ul>
                    </li>
                </ul>

            </section>
        </nav>

Open in new window


all I wanted to is change the background color of this ...

  <li class="name">
    <h1><a href="#">Employee Activity</a></h1>
  </li>

Open in new window


here's my css so far but not working.. Thanks for help.

 
.name.a
        {
              background-color:#2c3840;

        }
        .top-bar{
            
            background-color:#2c3840;
           height:80px;
           padding:0;
        }
     
          .title-area.name.a{
              line-height:80px;
              background-color:#2c3840;
          
          }        

Open in new window


I'm learning foundation..
0
Comment
Question by:zachvaldez
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41785637
.name.a
...
.title-area.name.a{

Open in new window


The above css statements are saying
Find all elements with a class name AND a CLASS a

When refering to elements you cannot put a '.' in front of them otherwise you change them from an element to a class.

Try
.name a

Open in new window


Background colour
.top-bar{
  background-color:#2c3840;
  height:80px;
  padding:0;
}

Open in new window

If the above is not working it is possible that another style is overriding it. This can be for two reasons.
1. This style comes before the overriding one
2. The overriding style is specified with a path that is not matched in this one.

To fix we would need to see a link - if that is not possible then what you need to do is right click on the <nav> element and look at the style in the CSS inspector of the console.
Find where the background is being set and copy the path for that style exactly.
0
 

Author Comment

by:zachvaldez
ID: 41786455
1. This style comes before the overriding one
 2. The overriding style is specified with a path that is not matched in this one.

How is this possible?

I  wrote a style within the page which takes priority over what the foundation css provides default for top bar..
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41786476
If you have a style

.someclass li a.someotherclass {
    color: white;
}

Open in new window

And you add
.someotherclass {
   color: red;
}

Open in new window

It will not affect elements that match the first style because the style paths are not the same. You would need to match the path i.e
.someclass li a.someotherclass {

Open in new window



Your main problem though was specifying elements as a class i.e.
.a

Open in new window

instead of
a

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:zachvaldez
ID: 41787005
I'll test this  and report to you my finding
0
 

Author Comment

by:zachvaldez
ID: 41787030
You are 100% cool and correct.
I'm not paying attention to the details and not understand the path you're talking until I went and place my cursor and it described the path. So I copied the path and pasted it and changed the bg and there finally got it.
How will I center the text in the topbar?
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41787252
text-align: center

Open in new window

0
 

Author Comment

by:zachvaldez
ID: 41796650
thanks
0
 

Author Closing Comment

by:zachvaldez
ID: 41796652
thanks!
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41796732
You are welcome.
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question