Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I building a website with HTML and CSS as part of an exercise. However, I have stumbled across some odd space I need to get rid of. Inspecting the webpage, it seems like there is extra empty content being displayed above my images. This happened after I added navigation arrows.
If anyone have any suggestions on how to deal with this situation I'd be very happy.
The website is as following: http://folk.ntnu.no/nikolahe/gloshaugen/gloshaugen.html
html: http://pastebin.com/micJCBq1
css: http://pastebin.com/WW9i52qc
Suggestions towards layout and good practices are also much appreciated.
This happens because you use position:relative on the #previous and #next elements. Like this they are repositioned but still use up the space they would originally occupy.
Use the following css instead:
.block-wapper {
position:relative;
...
}
#previous {
position: absolute;
left: 10px;
...
}
#next {
position: absolute;
right: 10px;
...
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
After checking examples and trying one of them for myself, I have realized that there's a blank hole that appears under the sidenav. It's probably not related with sidenav, but after you click the menu icon on the top-left most corner, (after sidenav opens) there's huge blank hole appears at the bottom of the page and I couldn't find the reason for that behaviour.
Here's the stackblitz link for that:
https://stackblitz.com/edit/angular-material-sidenav-generate-nav
Thanks for any explanation, have a good day.
you missed to add css to your <mat-sidenav-container> like in Material example :
.example-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #eee;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I've a page and in a particular section I'm seeing and extrange white space beneth the footer.
I was wondering what could be possible be happeing as it only happens in this seccion of the website:
https://stickersgallito.pe/carrito_de_compras/
Selected it says it is outside the HTML tags:
It's happening because the content of the page is not enough to fill the viewport/screen-size.
So If you add a few more contents to this page, it will solve your problem.
If you don't have more content & want to show footer at the bottom of the page, here is the solution:
#footer-navbar {
background-color: rgb(239, 239, 239);
position: absolute;
width: 100%;
bottom: 0;
}
Use this CSS only on this page.
Thanks
Take a look at your footer-navbar selector. You have an odd margin applied to it that is forcing that section rather than letting it flow properly.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
You can find the staging environment over here:
http://axces-staging.houston-1.hybridmedia.be/
I have a lot of unnecessary spacing above the title "Onze aanpak".
I only have this issue on Firefox. It looks fine on chrome and safari.
Cannot find what causes this. Does someone have any idea?
Thanks.
It's due to two values in the elements above that space:
1.) The top: -30rem in homepage-middle__wrapper
2.) The margin-top: 30rem in section--products homepage-middle background--primary
Erase both to eliminate that space.
First of all, remove the negative value for top here:
.homepage-middle__wrapper {
margin-bottom: -27rem;
padding-top: 2.5rem;
position: relative;
top: -30rem;
}
Remove the margin-top here:
.homepage-middle {
margin-top: 30rem;
padding-bottom: 0;
}
At a padding top to the container or wrapper to achieve the same effect as before.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have unwanted space at bottom of the page. Cant figure out whats the problem.
I also searched for this tried every answer but no solutions
Its the height from hidden sub menu from the nav.
It's being caused by the length of the "Electrical equipment & parts" section of your product menu. You'll notice that the page height exactly matches the height of that part of the menu.
Also, in the 'Chemicals' section of the products menu, "Anti-Corrusions" is misspelled. "Anti-corrosion."
The first problem is that you have a min-height: 800px css rule set on your body tag -- get rid of that to start. The problem you'll have after that is that you want your footer to stick to the bottom of the page. You can do this by adding:
.blog-list-page {
position: relative;
min-height: 100%;
}
footer {
position: absolute;
width: 100%;
bottom: 0;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm not sure how exactly I can make this "Live Chat - Online" button appear inline next to the "Login" button.
I've tried a few methods like using inline-block display, floating, etc. but I honestly feel like the issue is that I can't embed the parature div id inside the <form action ="/webapps/login"> form tag. Being outside of the tag makes this a positional nightmare.
Problem is this page doesn't actually allow me to directly insert my parature div id in it because some of the page is constructed from dynamic javascript on the fly that I don't have access to. Is there a proper way to align the Login button with Live Chat - Online horizontally? Ignore the blurry text I am going to fix it later.
site: https://com-bb-dev.com.edu/
You can use:
#loginBox{
position: relative;
}
#parature {
border-radius: 3px;
position: absolute;
bottom: 0;
left: 220px;
}