layout help

Question

I have a few layout problems in my code using w3.css
https://code.sololearn.com/W3haACbLMTWa/?ref=app
first of all, I added some borders to make it easier to debug the layout
body>purple
.w3-container>pink
.card>red
.w3-panel .w3-card>orange
.card-body>yellow
my problems:
1. the top and lower navbar hides content, and I would like the card to be 10px away from the sides and both nabvbars

2. „Slide:“ counter should be centered
Please help me!!!
Thank you in advance

Answer 1

Galaxy-Coding wrote, "Josh Greig but if I remove the position: fixed, the navbar isn’t sticky and scroll with the body."

Yes.

I wasn't suggesting you remove the position: fixed. The padding-top and padding-bottom from my previous answer is what I recommend to fix it.

I thought you might want to know why the content was overlapped, though. The position: fixed basically moved the #staytop and #staybottom elements into a separate layer and leaves 0 height for them in the same layer as most of your content. For this reason, you need to add the space separately like the padding-top and padding-bottom on the body element.

Answer 2

Josh Greig sorry, I made a typo. I meant to say that the top and lower navbar hides content, and I would like the card to be 10px away from the sides and both nabvbars

Answer 3

The following fixes the Slide center problem.

<div id="staybottom" class="w3-bar w3-black" style="display:flex;">
<button name="prev" class="previous w3-btn w3-red w3-card-4">Previous</button>
<div id="counter" style="flex-grow:1"></div>
<button name="next" class="next w3-btn w3-red w3-card-4">Next</button>
</div>
I solved it using inline styles to indicate display: flex and flex-grow: 1. I also changed your span to a div since I wanted a block displayed element that would fill the available width instead an inline element. You can move that to the CSS file. Inline styles just seemed like the clearest way to pass it on to you. I don't see any occurrences of flex or table-row in https://www.w3schools.com/w3css/4/w3.css so custom CSS looks like the best option.

This fix makes your margin: auto in CSS useless but your text-align: center is important.

I'm not sure what you mean by "navbar hisense upper content". I don't see a navbar or any occurrence of "hisense". I see that "Introduction" looks awkwardly high and some elements might be getting cut off.

Unrelated to layout, your initHighlightingOnLoad() function is undefined. You also have an unmatched ending </div> tag near the bottom of your HTML.

Answer 4

Galaxy-Coding, adding the following CSS should help with the overlapped content at the top and bottom. The content is overlapped because your #staytop and #staybottom elements use position: fixed.
body {
padding-top: 30px;
padding-bottom: 40px;
}

When I ran it, there was a JavaScript error with your "else if () {" line.
This superficially fixes that but I didn't dig deep into what you were trying to do:
if(initnow==total){
$(".next").prop("disabled",true);
}
else {
$(".previous").prop("disabled",false);
}

You said "I would like the card to be 10px away from the sides and both nabvbars". When I ran it I see you already have a padding for the #staytop and #staybottom of 1em as expressed in your CSS which evaluates to 15px for me. You can replace 1em with 10px if you prefer that. Also, you could indicate padding-left and padding-right instead of just padding if you don't want to change the padding-top and padding-bottom.

Answer 5

Josh Greig but if I remove the position: fixed, the navbar isn’t sticky and scroll with the body.