0

I have created a submenu, I want the background color of the divs to change depending on what page the submenu is loaded.

first example (with code working for one page):

HTML 

<div class="tablecontainer">
    <div class="left">
        <p><a href="#">Link1</a></p>
    </div>
    <div class="right">
        <p><a href="#">Link2</a></p>
    </div>
    <div class="left">
        <p><a href="#">Link3</a></p>
    </div>
    <div class="right">
        <p><a href="#">Link4</a></p>
    </div>
    <div class="cell">
        <p><a href="#">Link5</a></p>
    </div>    
</div>

CSS

.tablecontainter{
    width:100%  
}
.left {
    float: left;
    width: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center; 
}
.left a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.right {
    margin-left: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center; 
}
.right a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center;
}
.cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}

jsfiddle: example1

and the second example

HTML

<div class="tablecontainer">
    <div class="left leftYH">
        <p><a href="#">Link1</a></p>
    </div>
        <div class="right rightYH">
        <p><a href="#">Link2</a></p>
    </div><div class="left leftYH">
        <p><a href="#">Link3</a></p>
    </div>
    <div class="right rightYH">
        <p><a href="#">Link4</a></p>
    </div>
    <div class="cell cellYH">
        <p><a href="#">Link5</a></p>
    </div>    
</div>

CSS

.tablecontainter{
    width:100%;
}
.left{
    float: left;
}
.left, .right{  
    width: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center; 
}
.left a, .right a, .cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.leftYh, .rightYh, cellYH{
    background-color: #660066;  
}

jsfiddle: example2

where I have grouped all class with similar attributes and others where the attributes are unique. But this code is not at all working. Any clue anyone where I screwed up?

Thanks

Improve this question
4
  • 1
    Post your code here please.
    – j08691
    Commented Jan 11, 2014 at 18:55
  • you could use scripting to reassign the class on the fly based on what I read here.. hard to help with no code though...
    – Phlume
    Commented Jan 11, 2014 at 18:58
  • someone tried to edit the code into the question, and a mod rejected it. Why?
    – DGM
    Commented Jan 11, 2014 at 19:04
  • You cant link to the fiddle without the code present.. don't bend the rules, follow them...
    – Phlume
    Commented Jan 11, 2014 at 19:06

3 Answers 3

Reset to default
2

your css class names are wrong, they should be .leftYH, .rightYH, .cellYH you had lower case h's

UPDATE

You also need to apply width:50% only to your .left class, and you were missing a . for cellYH

Check out the example below

css

.tablecontainer{
    width:100%
}
.left, .right{
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center;
}
.left{
    width: 50%;
    float: left;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center; 
}
.left a, .right a, .cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.leftYH, .rightYH, .cellYH{
    background-color: #660066;
}

JSFIDDLE

Improve this answer
1
  • Thanks a lot, thats what happens when you are sitting late at night with a idea :P
    – user2371684
    Commented Jan 11, 2014 at 19:35
0

Change line 37 to .leftYH, .rightYH, .cellYH (lower case H and missing . before cellYH).

Improve this answer
0

There are 2 ways to inherit from more then one CSS class~

  • Multi class styles: this states that all classes gain the following attributes

     left a, .right a, .cell a{
       ....

 }

  • multi class elements: you can apply more then one class to any html tag like to

    <a class="left right cell>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.