@GregLyons
Posted
Good solution! I don't actually think you're overusing <div>s, and your HTML is pretty semantic (using <p>s and headings). It looks like you have a few HTML warning/errors according to the report. You can read those and take them into consideration, but the two that stood at the most to me were
1) You have an <h2> and an <h4> but no <h3> in between ("Heading levels should only increase by one"). The differences in numbers aren't so much for styles but rather for indicating sub-sections/logical organization of the document. In this case, you using an <h4> is saying that it belongs to a "sub-sub-section" of the Order Summary (the <h2>), when really it's a sub-section.
2) You're nesting an <a> in a <button> ("Interactive controls must not be nested"). I can see where you're coming from with this since it's a button on the form, but they also take the user to new content. I think the "Change" button should just be a <button> (no <a>), as I imagine it just popping up a modal for the user to select a different plan. That's up to interpretation though, maybe it would just be an <a>... For the submit button, there are a few different options, which you can see in Sean Vieira's answer here.
As for your positioning issue, I don't think you'll be able to make the attribution not go over the main card using position: absolute, as that removes the attribution from the flow of the document. This means that it won't be affected by any margins you put on the main card. I see that you're also using absolute positioning to center the card on the page. You didn't mention that as an issue, but I think understanding this will make it easier to position your attribution, so bear with me here.
You can easily center the card horizontally by styling the <body>/<div> containing it with
display: flex;
justify-content: center;
but using align-items: center; probably won't get it just right for you. The issue is that the height of the <body> depends on its content. Right now on your web page it's actually 0 if you inspect it, since you absolutely positioned your content. Were you to remove position: absolute; from your elements, the height of the <body> would increase to contain them, but it still wouldn't be the full height of the page. Thus, if you were to use align-items: center;, then it would center the content relative to the height of the <body> (i.e. not the viewport height). You would want a min-height: 100vh on your body to make its height take up the entire screen. You can read more about this here. The articles on that website are a bit more intermediate level, but you could probably still learn a lot from reading it.
That gives you another way to center your card, but how does it help with your attribution issue? Well, now your card is part of the flow of the document, so elements can be positioned around it (you should've taken off position: absolute from the card if you're using the method above). If you take position: absolute off the attribution, then it can be pushed down by the margin-bottom of the card. So, if you do something like
.container {
margin-bottom: 40px
}
and remove position: absolute from both elements, then the attribution should be pushed away from the card, as you like.
Hope this helps! If so, feel free to mark this post as helpful. Best of luck in your learning!
Marked as helpful
@clarafuwen
Posted
@GregLyons Thanks for taking time to look into the errors and warning for me, and I fixed most of them. Yeah, I like your solution of centering content in <body> element. That looks much elegant than my previous solution, which aims to horizontally and vertically position the card at the center of the background... As for the 'attribution', I eventually changed it to <footer> which fits in the flow more naturally.
@GregLyons
Posted
@clarafuwen Putting your attribution in a <footer> makes sense. Happy I could help!
