Solved

CSS3 multiple background colors

Posted on 2013-01-28
5
318 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
ID: 38827743
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
ID: 38827975
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
ID: 38828192
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
ID: 38828935
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
ID: 38831255
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

820 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