Solved

need css help on this

Posted on 2016-09-05
10
53 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
  • 5
  • 4
10 Comments
 
LVL 56

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 56

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
Technology Partners: 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 56

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 56

Expert Comment

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

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
I need help changing the colour of this image rollover please? 3 22
Date on a table 16 33
Debugging Html 8 31
Table doesn't show the lines! 3 23
This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

680 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