Solved

CSS3 multiple background colors

Posted on 2013-01-28
5
317 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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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 …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

831 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