Question 205666 in Html Question posted in
Some basic documentation can be found here.

Html – the blue div came out oval

MY teacher gave us the project to make the Laos flag using CSS. she wrote the HTML for us but we can not change/add anything.
this is the HTML


<body>
<div class="flag">
<p>The Flag</p>
<div>
<div>
<p>of Laos</p>
</div>
</div>
</div>
</body>

**
this was the answer she gave, she told us if we did it another way (selectors) that was ok.**


.flag{
width: 900px;
height: 600px;
background-color: #CE1126; (this is red)
position: relative;

    }

.flag > div{
width: 100%;
height: 300px;
background-color: #002868; (this is blue
position: absolute;
top: 150px;
    }

.flag > div > div{
width: 200px;
height: 200px;
background-color: white;
border-radius: 50%;
position: relative;
top: 50px;
left: 350px;
    }
    

p{
margin: 0;
font-size: 5rem;
text-align: center;
color: white;
    }

div div p{color: black;}

I could not finish so I just watch how she did the parts that I didn’t know

.flag{
 width: 900px;
height: 600px;
background-color: #CE1126; (this is red)
position: relative;

 }

.flag > div{
width: 100%;
height: 300px;
background-color: #002868;  (this is blue)
border-radius: 0px;
position: relative;
top: 100px;
left: 0px;
    }

div div{
width: 200px;
height: 200px;
background-color: white;
border-radius: 50%;
text-align: center;
position: relative;
top: 20%;
left: 300px;
}

for some reason the blue box came out as an oval the only way to make it a rectangle was to make the border-radius: 0px; but that not in her answer. the text part I had right but I needed to make the text bigger and make the margins 0

this is what it should look like

Tags:

2

Answers


  1. 0

    The reason you are getting these issues, e.g. the blue rectangle being an oval, is because your CSS selector is too broad: div div means target any div element, that is a descendant (e.g. child, grandchild etc.) of another div. There are two such elements that satisfy this condition in your HTML, the middle one (as it has a parent div), and the innermost one (as it also has a parent div). Therefore by applying the border-radius: 50% to any element that satisfies the div div selector, you are applying a rounded border to both the innermost and middle divs.

    The reason adding border-radius: 0px to the ruleset under the .flag > div selector fixes this issue, is that .flag > div is more specific than div div, hence the border-radius: 0px takes precedence when deciding what border your innermost div should have.

    To fix this issue, in practice, you would add specific classes to each part of the flag to make them easier to target, but I understand that this assignment requires you to play around with CSS selectors. As such, you would need to choose a CSS selector that is unique to each part of the flag (unless you wish to share certain styles across many parts). Your teacher’s example of the .flag > div > div selector targets only the innermost div, hence only the circle part of the flag.

    Login or Signup to reply.
  2. 0

    I will give you a hand but I will not fix the entire homework for you, because the teacher want you to learn and if we help you with the entire homework you will not learn.

    Try this code

    .flag{
 width: 900px;
height: 600px;
background-color: #CE1126; (this is red)
position: relative;

 }

.flag > div{
width: 100%;
height: 300px;line-height: 300px;
background-color: #002868;  (this is blue)

position: relative;margin:0 auto;

    }

p:last-child{
width: 200px;
height: 200px;line-height:200px;
background-color: white;
border-radius: 50%;
text-align: center;
position: relative;
margin:0 auto;margin-top:150px;

}

    As you can see, you can use some very nice tools in CSS like:

    first-child
last-child
first-of-type
last-of-type
nth-child 1,2,3,4,5 etc

    you can without problem use:

    div first-of-type
div last-of-type

    I hope you learn with this

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search