• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How do I create different background colors for different sections of my page, which act like #wrapper color?

Explorer ,
Aug 31, 2015 Aug 31, 2015

Copy link to clipboard

Copied

My design calls for three blocks of color, each behind specific content. I have tried defining new background colors under the <section> element, but it only fills in that width of the page. I can't get any of them to work besides the #fff defined by the wrapper.

Any ideas?

Views

489

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 31, 2015 Aug 31, 2015

Copy link to clipboard

Copied

Use 100% width section as a container for other elements like this:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

<style>

section {width:100%;}

.red {background:#990000;color:#FFF;}

.blue {background: #009; color: #FFF}

.green {background: #363; color: #FFF;}

aside, article, header, footer {width: 80%; margin:0 auto; padding: 2%;}

</style>

</head>

<body>

<section class="blue">

<header>

This is a blue section

</header>

</section>

<section class="red">

<article>

This is a red section.

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

</article>

</section>

<section>

<article>

This is a default section.

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

</article>

</section>

<section class="red">

<article>

This is a red section.

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

</article>

</section>

<section class="green">

<footer>

This is a green section

</footer>

</section>

</body>

</html>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 31, 2015 Aug 31, 2015

Copy link to clipboard

Copied

Hi,

Use three different DIV to create different sections

You can use DIV styling to add background colors :

<div style="background-color:#E82E2E">Enter your content here

</div>

Thanks

Prabhakar Kumar

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 31, 2015 Aug 31, 2015

Copy link to clipboard

Copied

In addition to the ideas already given above, you could alternate your section background-colors with CSS nth-child or nth-child-of-type pseudo-selectors.   The advantage is you don't have to specify classes on all your <section> tags = leaner markup. 

<style>

section {width:100%;}

/**every 3rd section starting with 1st**/

section:nth-of-type(3n+1) {background:#990000;color:#FFF;}

/**every 3rd starting with 2nd**/

section:nth-of-type(3n+2) {background: #009; color: #FFF}

/**every 3rd starting with 3rd**/

section:nth-of-type(3n+3) {background: #363; color: #FFF;}

</style>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 31, 2015 Aug 31, 2015

Copy link to clipboard

Copied

Nancy:

I so appreciate your help. I haven't worked with nth classes before, so do I use this code as written or do I need to change the  nth code to a number?


If so, can you please give me an example?


Thanks - -


Deborah

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 01, 2015 Sep 01, 2015

Copy link to clipboard

Copied

Here are the basics of those nth selectors...

CSS3 :nth-of-type() Selector

CSS3 :nth-child() Selector

The only issue worth mentioning is certain older browsers (OK, pretty much just IE 8 and lower) won't see the settings on nth selectors. If you MUST code for IE8 or lower, you probably won't want to use them.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 01, 2015 Sep 01, 2015

Copy link to clipboard

Copied

LATEST

IE8 will see the default body colors & background. I might not use nth-child selectors for content but appearance is not going to make or break a web site for IE8 users.  Besides, they won't know what they're not seeing.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines