Assessment wanted for Structuring a page of content - Double Backgrounds in main area

MDN Learn
#1

Can i know why am i getting the double background in the main area ?? Below is the code of HTML and CSS. Thanks in advance.

<html>
<head>
<meta charset="utf-8">
<title>Birdwatching</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300|Cinzel+Decorative:700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Birdwatching

a simple dove logo 
  <nav>
   <ul>
      <li><span>Home</span></li>
      <li><a href="#">Get started</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Gear</a></li>
      <li><a href="#">Forum</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
  <header>
    <h2>Welcome</h2>
  </header>
  <article>
    <p>Welcome to our fake birdwatching site. If this were a real site, it would be the ideal place to come to learn more about birdwatching, whether you are a beginner looking to learn how to get into birding, or an expert wanting to share ideas, tips, and photos with other like-minded people.</p>

    <p>So don't waste time! Get what you need, then turn off that computer and get out into the great outdoors!</p>
  </article>
  </section>
<aside>
  <h2>Favourite photos</h2>

  <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="Small black bird, black claws, long black slender beak, links to larger version of the image"></a>
  <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress, links to larger version of the image"></a>
  <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="Top half of a large bird with white plumage, very long curved narrow light colored break, links to larger version of the image"></a>
  <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak, links to larger version of the image"></a>
</aside>

This fake website example is CC0 — any part of this code may be reused in any way you wish. Original example written by Chris Mills, 2016.

  <p><a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a> by Lorc.</p>
</footer>

/* || General setup */

html, body {
margin: 0;
padding: 0;
}

html {
font-size: 10px;
background-color: #a9a9a9;
}

body {
width: 70%;
min-width: 800px;
margin: 0 auto;
}

/* || typography */

h1, h2, h3 {
font-family: ‘Cinzel Decorative’, cursive;
color: #2a2a2a;
}

p, input, li {
font-family: ‘Roboto Condensed’, sans-serif;
color: #2a2a2a;
}

h1 {
font-size: 4rem;
text-align: center;
text-shadow: 2px 2px 10px black;
}

h2 {
font-size: 3rem;
text-align: center;
}

h3 {
font-size: 2.2rem;
}

p, li {
font-size: 1.6rem;
line-height: 1.5;
}

/* || header layout */

header {
margin-bottom: 10px;
display: flex;
flex-flow: row wrap;
}

body > * {
background-color: red;
padding: 1%;
}

main, header, nav, article, aside, footer, section {
background-color: rgba(0,255,0,0.5);
padding: 1%;
}

h1 {
flex: 5;
text-transform: uppercase;
}

header img {
display: block;
height: 60px;
padding-top: 20.15px;
}

nav {
height: 50px;
flex: 100%;
display: flex;
}

nav ul {
padding: 0;
list-style-type: none;
flex: 2;
display: flex;
}

nav li {
display: inline;
text-align: center;
flex: 1;
}

nav a, nav span {
display: inline-block;
font-size: 2rem;
height: 3rem;
line-height: 1.7;
text-transform: uppercase;
text-decoration: none;
color: black;
}

/* || main layout */

main {
display: flex;
}

article, section {

flex: 4;

}

aside {
flex: 1;
margin-left: 10px;
padding: 1%;
}

aside a {
display: block;
float: left;
width: 50%;
}

aside img {
max-width: 100%;
}

footer {
margin-top: 10px;
}

#2

@Tejas-Teju hi there!

Please can you put your code into an online code editor, like codepen or glitch, and send me the link so i can see it live? It would be a lot easier for me to debug like that.

#3

Hi @chrisdavidmills, below is the link:
[https://codepen.io/Tejas-Teju/pen/KKpreLx]

#4

@Tejas-Teju thanks!

By “double background”, do you mean the layering of the green boxes on top of one another?

This was intentional, and occurs because the <main>, <section>, and <header>/<article> elements (which are nested inside one another - three levels of nested elements) ALL have the following CSS set on them:

background-color: rgba(0,255,0,0.5);

The fourth parameter in the CSS rgba() function is the color’s alpha channel - a value of 0.5 is semi-transparent, so as you layer multiple greeens on top of one another the visual effect is a brighter green - the colors are additive.

1 Like
#5

@chrisdavidmills First of all, thanks for coming back.

How will i be able to get 2 layers of background instead of 3, because i tried removing -section, article but the structure of it is getting changed and i am not able to get as that of the original HTML page. The only problem is with the layers of background.

#6

@Tejas-Teju the way that you have it now is not wrong - we have it like that in our version.

But if you wanted to remove one of the layers, you’d have to edit the CSS. The CSS rule that adds the background layers is here:

main, header, nav, article, aside, footer, section {
  background-color: rgba(0,255,0,0.5);
  padding: 1%;
}

If you wanted to remove that styling from the <section> element, you’d update it to this:

main, header, nav, article, aside, footer {
  background-color: rgba(0,255,0,0.5);
  padding: 1%;
}
1 Like
#7

Since this is HTML assessment I thought of not editing CSS code and I thought there is some other way other than editing CSS code. Anyways, @chrisdavidmills thanks a lot for your time in helping me out, I have understood it clearly.