There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
I’ve had a play around with the code for this lesson to explore the use of the position, display and float properties. I’ve ended up with a few questions (see further below) about how I’ve attempted to style the section which includes the survey questions and their answer options. This corresponds to the HTML content originally contained within the 5 <div class="question"> elements, but I’ve now included all of this code within one single <main> parent element.
I’ve included my HTML code for this section below but, first, here’s an overview of my amendments and some of the reasons for them:
Within <main>, I’ve contained each question section (heading and text) and each answer section (the 3 options) within their own <section class="block"> element, because I want to display the answer options alongside each question (rather than beneath). I thought I could achieve this by arranging them across the page as inline blocks. As there are further styling differences between how I need to display the question blocks and the answer blocks (yet uniformity amongst all question blocks and all answer blocks), I have given the question blocks the double class value "block question" and the answer blocks the double class value "block answers". This allows me to display both question blocks and answer blocks as inline blocks, and also create a subdivision to style question blocks differently from answer blocks. I’ve included the relevant CSS below the HTML.
<main>
<section class="block question">
<h4>Question 1</h4>
<h2>Question Statement</h2>
</section>
<section class="block answers">
<div class="answer">
<h3>Disagree</h3>
</div>
<div class="answer">
<h3>Neutral</h3>
</div>
<div class="answer">
<h3>Agree</h3>
</div>
</section>
<!-- continues here with the same code for questions/answers 2-5 -->
</main>
body {
text-align: center;
margin: 0;
}
main {
position: absolute;
top: 280px;
left: 110px;
<!-- This offset position is to account for:
(i) a fixed navigation menu: width 110px; runs the full length of
the page on the left; and
(ii) a fixed 'Welcome' section: height 280px; at the top of the
page. -->
z-index: 2;
<!-- This z-index value allows the <main> 'question and answer'
section to scroll over the fixed 'Welcome' section. -->
background-color: white;
padding: 10px;
}
.block {
display: inline-block;
float: left;
}
.block.question {
box-sizing: border-box;
width: 65%;
height: 250px;
padding: 0 10px;
}
.block.answers {
box-sizing: border-box;
width: 35%;
height: 250px;
padding: 20px 0 10px 10px;
}
.answer {
border: 1px solid #466995;
margin: 10px;
}
<!-- In my full CSS, the CSS rule sets for the elements which render the
text for the questions and answers do not contain any additional
declarations affecting box-model dimensions (i.e. there are no
additional values for margin, padding, border, width or height other
than those included in the CCS rule sets above). -->
Questions
Is my use of double classes correct? Specifically, by having the 2 double classes of "block question" and "block answers" in the HTML, does that mean that I can create CSS rules with (i) selector .block which applies to both of the double classes; and (ii) selector .block.question or block.answers which each apply to just one of the double classes?
Adding the declaration float: left; to the .block selector rule set allowed me to obtain a much better horizontal alignment between the content of each question and its answers (both in their own separate inline block). This really happened by accident, through trial and error, as I was experiencing a lot of difficulty with this before experimenting with float. Why is this? I don’t understand why using float improves the alignment here…
Before adding float, I wasn’t able to enter width % values totalling 100% and still keep 2 blocks ( a question and its three answer options) together horizontally across the page.
e.g. .block.question {width: 65%;} + .block.answers {width: 35%} resulted in each set of answers being rendered below its question; whereas reducing the % slightly for one of them (say 35% to 30%) worked.
Purely by chance, when I added the float property (as in the code above) I didn’t have this problem anymore. Why is this?
Apologies, if this isn’t the right place to ask questions which go into so much detail. If it isn’t, could you let me know where would be better, and if I need to set out my queries in a different way e.g. more succintly. Thanks!
I would like to second @jon_morris in his points, as well as ask another pointed question:
This section of lessons - in particular, the display and position properties - were rather confusing overall. While reviewing the available code I was trying to understand how the “Relative” position operated, and was surprised to see that removing this declaration from the .welcome class indicated to the generated page that this <div> was meant to be at the top of the page, just like the <header>. Is this strictly due to the HTML structure, of which <header> and <div> are not communicating actual structured elements to the browser (such a <p> or <h#>?
In the situation you are querying, is the <header> styled with a fixed position? (As I’ve altered the code for this lesson, I can’t see what the different elements’ position properties were originally set to.)
If it is fixed, then this element has been removed from the normal flow, and so the <div class="welcome"> will occupy the first position (at the top of the page). Before scrolling, this won’t be visually apparent if the <div> has a relative position which offsets and positions it as if the <header> wasn’t in fact fixed. However, if you remove its relative position (effectively defaulting to static position) it will now appear at the top of the page and overlapping with the <header> (assuming of course that the <header> has been fixed at the top of the page).
static and relative:
Position elements within the normal flow, with relative allowing an element’s position to be offset without affecting the position of other elements.
absolute and fixed:
In contrast, these remove elements from the normal flow, which in turn affects the position of the other elements.
The difference between the two is that a fixed position is not affected by scrolling, whereas an absolute position moves with scrolling.
I hope that helps to answer your question. However, if your code (and position properties) are different to what I’ve assumed, let me know what you’re working with, and I’ll have another go at an explanation
If I wanted to move the footer down a bit, would it be better to give it a position of relative and move it down, or would it be better to add some bottom margin to the 5th .question element by giving it an id or another class
Hey guys. I just finished the broadway challenge project and wanted to challenge myself even more. So I decided to create the broadway website from scratch
I have the same question! Just completed the Broadway project but I couldn’t make the footer fixed/sticky at the end of the page despite following instructions from W3 school on how to create a fixed footer (link: How To Create a Fixed Footer). Please elaborate!
Hi, also a newbie in CSS but I think I figured your question out.
To “fix” the <footer> to the bottom, we can use the same properties as for the <header> part:
position: fixed;
width: 100%;
But now the <footer> disappeared because it’s located behind the <main> part of the page. As we learned we can use the z-index property to set how far or forward an element is on the page, lets do this:
z-index: 1;
Unfortunately, the footer is still invisible because it’s not “at-the-right-positon” where we want it to be.
To set it fix to the bottom of the page, we need to offset it there.
bottom: 0;
I’m sorry for my english as it is not my native tongue but please let me know if my approach to set the footer fix to the bottom was wrong, thanks.
I also just did the footer task at the end of the Broadway project, and since it’s at the bottom of the page I managed to just do this…
position: sticky;
bottom: 0;
… which works on the footer but I think just because you can’t scroll beyond it. (I tried applying the same to the header section from the first few exercises, but it didn’t work because when you scroll past “sticky” things they continue in the flow of the html, it seems).
Not sure if someone can confirm whether that’s the case, or correct me if I’ve got the wrong end of the stick?
Could you please tell me how do I make it so that these “question cards” never go behind the fixed header – regardless of its actual height? I mean I can offset the question class by, say, 80px or so from the top, but once you begin resizing the window, the measure fails to fulfill its purpose
I feel like this is a dumb question but im having trouble understanding this definition:
The [z-index] of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements.
when it says how far forward or back, does it mean up/down or left/right
Here’s kind of my background knowledge so you know where im coming from.
Let’s say theres a ball in the middle of the screen, when you say move it forward you could mean either making the ball go upwards or to the right both of these generally mean forward likewise
when you say move it back you could either mean go downwards or the left.
) below.
) to up-vote the contribution!
