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
As a novice web developer I've been trying to build myself a personal webpage from scratch. However I've encountered a problem.
Here's my webpage, it looks ok but when you click any of the links on the left side, and turn a # to display:block from display:none you can see the "bleeding" on the bottom.
I have no idea why this happens, so I'm linking my repo which contains the html and the css for the page.
Put a simple CSS in your Canvas Tag
style="position:fixed"
and its Done
If I understood your question you want to remove the green band at the bottom of the page.
It comes from your background-color:
body {
/* background-color: #A7DBD8; */
}
Juste remove it and it's ok ;)
Remy
Changing the style on the canvas element from
display: inline-block;
to
display: block;
fixes this.
Delete the :
<div class="footer">
from the index.html because you're not using it
Your panes are a fixed width and height: 620px, 500px respectively. If you add padding-top: 100px to a pane (as you did with #links div), it will increase your height to 600px and push things down.
The quick fix is to, instead of adding padding-top: 100px to your #links div, add it to the first paragraph in your #links div.
#links p:first-child {
padding-top: 100px;
}
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 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 5 years ago.
Improve this question
I have just noticed a strange white space gap below the footer of the blog and about which I don't have any idea, as I haven't touched the CSS or any other part of the code of my blog.
Can anybody tell me how to remove that strange white space?
URL - http://examswatch.com
Let me know if I need to provide any more information?
Thanks in advance!
In your header There is margin-bottom:60px in your masthead id please remove it and bottom white space will gone. i am attaching screenshot as well for your help.
Hope it will help you.:)
Remove margin from line number #5577 (Following code)
#masthead {
margin-bottom: 60px;
}
Just a quick tip you should not put everything in header tag. header tag should contain navigation and logo etc not the entire content. I Think you have missed the closing tag for header.
You have to share the piece of code that you think is the problem, and you can not just put the website url here. But for your case I checked the style and here is the problem
#media only screen and (min-width: 959px)#masthead
{
margin-bottom: 60px;
}
You should remove that margin-bottom
The HTML markup is not correct. There are tags which are not closed properly (header tag on line 188) which then results in weird rendering of the HTML markup.
Just remove: margin-bottom: 60px;
that is in #masthead, in style.css file.
remove the below css from your code. I don't why are you using this. but this is the issue.
#media only screen and (min-width: 959px)
#masthead {
margin-bottom: 60px;
}
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 6 years ago.
Improve this question
Here is the link to the page in question:
http://ollapodridawhatuneeda.com/video_viewer2.html
I want space above the video viewer screen, but so far adding margin or padding to the various containers has only resulted in pushing the entire content div down. I want to keep it blue above the video viewer, not white. thus far I have only accomplished pushing the container down while leaving a white band above it, which is not the effect I want.
Any ideas?
Barry Glick
One way to achieve your task is you can add:
padding-top: 100px;
for the <div id="content">, so your new CSS would look like:
#content {
width: 960px;
height: 1000px;
background: #9CC;
margin: 0 auto;
padding-top: 100px;
}
This will push the video container down.
There are two possible methods, depending where you want the distance (just try it):
1.) Add margin: 100px; (or whatever value) to #videoContainer (will add above the light-blue area)
2.) Or add padding-top: 100px; to #content (will add inside the light-blue area)
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
http://thepositiveclassroom.princetonsquarepress.com/dd-product/the-positive-classroom-method/
On this page the Take A Look button is staying to the bottom of its div, and I can't for the life of me figure out how to fix it.
Floated elements need be first in html markup. Or remove float and add display: inline-block;
Take out the empty <p> tags that are encapsulating the "Not Sure" text.
Remove the float:right; from the button.
Then add display:inline-block; to the button. If you want more space between the top and bottom borders, add padding to .product_sample_download
You got to put the
html .singular-dd-product #primary #content .entry-header p {
padding-bottom: 4px;
float: left;
}
on float:left!
Edit: You have a very wicked responsive-design-rule-set.
I would go for
.p ( before button )
{ display:inline-block; }
a. ( the button )
{ display:inline-block; }
Then you can work with vertical-align.
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 made some changes to my Tumblr so that it can match my Wordpress blog. I swapped the header out, but now I have a huge space between the header and the nav bar. Any ideas about how I can get rid of it?
You can see my Tumblr here.
I am trying to replicate my blog as much as possible.
Thanks for any tips.
You have an empty container div.
Either delete the container, or put the following in the CSS;
#container {
display: none;
}
or you could set the padding on the #container rule to 0.
Hope this helps.
EDIT: On closer look, you do need to delete your entire container. Delete all this code;
<div id="container">
<div class="blogtitle">
</div>
<div class="description"></div>
</div>
and then delete the styles for #container, .blogtitle, and .description (unless you think you might need them later).
After reviewing you web site I found the issue: Just you need to make following change in CSS:
div#page{
margin: 0px;
}
#masthead{
margin-top: -15px;
}
That's it.