Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • Last Modified:

CSS3 multiple background colors

Hello Experts,

I'm using Foundation 3 for my responsive framework and I would like to have a background color for each "row" so that when the content increases so does the background color. Please see my html layout below. Also, each .row class has the following css markup below.

Sample HTMl Markup:

Notice that each "row" has content within it. I would like to add a specific background color to each of those different "rows". Not  sure how to do that. I also need the background color to increase in size if the content increases.

    <!-- Header -->
    <div class="row">
        <div class="seven columns">
            <h1><img src="img/logo.png" /></h1>
        </div>
        <div class="five columns">

        </div>
    </div>
    <!-- End Header -->

    <!-- Navigation -->
    <div class="row">
        <div class="twelve columns">
            <nav class="top-bar contain-to-grid">
                <ul>
                    <li class="name show-for-small">
                        <h1><a href="#">Menu</a></h1>
                    </li>
                    <li class="toggle-topbar"><a href="#"></a></li>
                </ul>

                <section>
                    <ul class="left">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">OUR STORY</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">SPONSORSHIP</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </section>
            </nav>
        </div>
    </div>
    <!-- End Navigation -->

    <!-- Orbit -->
    <div class="row">
        <div class="twelve columns">
            <div id="featured">
                <img src="holder.js/1200x250/text:Slide_1" alt="slide image">
                <img src="holder.js/1200x250/text:Slide_2" alt="slide image">
                <img src="holder.js/1200x250/text:Slide_3" alt="slide image">
            </div>
        </div>
    </div>

Open in new window


CSS for .row:
/* The Grid ---------------------- */
.row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.row.collapse .column, .row.collapse .columns { padding: 0; }
.row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.row .row.collapse { margin: 0; }

.column, .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.column.centered, .columns.centered { float: none; margin: 0 auto; }

[class*="column"] + [class*="column"]:last-child { float: right; }

[class*="column"] + [class*="column"].end { float: left; }

.one, .row .one { width: 8.33333%; }

.two, .row .two { width: 16.66667%; }

.three, .row .three { width: 25%; }

.four, .row .four { width: 33.33333%; }

.five, .row .five { width: 41.66667%; }

.six, .row .six { width: 50%; }

.seven, .row .seven { width: 58.33333%; }

.eight, .row .eight { width: 66.66667%; }

.nine, .row .nine { width: 75%; }

.ten, .row .ten { width: 83.33333%; }

.eleven, .row .eleven { width: 91.66667%; }

.twelve, .row .twelve { width: 100%; }

Open in new window

0
asp_net2
Asked:
asp_net2
  • 3
  • 2
1 Solution
 
COBOLdinosaurCommented:
Maybe it is just me, but I don't have a clue what you are asking for.  

What does "I also need the background color to increase in size " mean?  Colors do not have a size. The are a property either gets applied to an element or does not get applied.

Perhaps if you post a link to the page I will be able to see what you are trying to do.

Cd&
0
 
asp_net2Author Commented:
What I need:

As you can see from my example COBOLdinosaur I have content within a class called "row". I was wanting to supply a different background color to each the "row" divs.

What I meant by increasing the size of the background color. What i meant was if I keep adding content to a specific div with the class of "row" I want the background color to continue and not end.
0
 
COBOLdinosaurCommented:
If a background color is applied to a div, it is for the complete div.  If the size of the div changes the background will still apply to the complete div.

If you want a different color for each row then:

div.row:nth-of-type(1) {background-color:blue}
div.row:nth-of-type(2) {background-color:red}
etc...

The rows need a common parent so you might need to put a wrapper around them.
Only works in modern browsers.  IE8 and earlier do not support it.

Cd&
0
 
asp_net2Author Commented:
So the CSS that you supplied does not support IE8 down?

Is there a solution that will work for IE7 and up?
0
 
COBOLdinosaurCommented:
For old junk you need to either setup a rule for each row with a different background, or use javascript to set the background dynamically.; or you set the background color inline from the server side when you generate the page. All are more work for the minimal value of doing a tiny effect for users who have little appreciation of the effort or they would be using a modern browser.

Cd&
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now