Solved

need css help on this

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

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 54

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
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 

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 54

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 54

Expert Comment

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

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How would I do a website like this? 5 60
Change of column alignment in div 2 18
DataTables + iCheck + pagination Issue 2 24
Center div containing a script 6 17
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

832 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