Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

need css help on this

Posted on 2016-09-05
10
Medium Priority
?
62 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 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 59

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 59

Expert Comment

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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

670 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