Solved

CSS3 multiple background colors

Posted on 2013-01-28
5
315 Views
Last Modified: 2013-01-29
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
Comment
Question by:asp_net2
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 4

Author Comment

by:asp_net2
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 4

Author Comment

by:asp_net2
Comment Utility
So the CSS that you supplied does not support IE8 down?

Is there a solution that will work for IE7 and up?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
Comment Utility
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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now