Solved

need css help on this

Posted on 2016-09-05
10
58 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 58

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 58

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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

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 58

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 58

Expert Comment

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

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

622 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