Here is a picture example of what is happening.
I'm trying to build one of those one-page scrolling websites.
The white background indicates one page, the grey background indicates the beginning of another page.
As I start filling my white page with content, I notice that my button slowly starts sliding down and is now encroaching into the grey page. I don't want that to happen but rather for the white page to extend.
Here is my CSS for the pages:
#white-page
{
background-color: white;
height: auto;
min-height: 100vh;
text-align: center;
}
#grey-page
{
background-color: grey;
min-height: 100vh;
}
Here is my CSS for the button.
.download-center
{
text-align: center;
margin-top: 60px;
}
.btn
{
text-decoration: none;
border: 1px solid gray;
padding: 10px 20px 10px 20px;
border-radius: 25px;
color: inherit;
}
Here is the relevant HTML
<section id="white-page">
//page content here
<div class="download-center">
<a class="btn font-r" href="docs/resume.pdf" target="_blank">
<img id="download-pic" src="pic/download.svg" />Download Résumé
</a>
</div>
</section>
<section id="grey-page">
//page content here
</section>
I tried setting the height to auto for the white page but it doesn't seem to work.
Basically, I just want the page to extend as the content requires but with a minimum of vh so that it takes up the whole of the screen first.
Edit: By removing the margin-top property, here is the result. All it does it pushes the button closer to my content but still encroaches on the page borders.
The reason is you have restricted height and used margin-top:
.download-center {
text-align: center;
margin-top: 60px;
}
Adjusting margin-top to a lesser value, say 30px will make the button stay inside.
Reduce margin from top and add position as like:
.download-center {
text-align: center;
margin-top: 40px;
position: absulote;
}
I'm answering my own post because removing margin-top was not the solution that worked for me. Instead, it was increasing margin-bottom.
margin-bottom: 40px;
Related
There's a small gap between all my content on my website and the end of the browser window, and I can't figure out why it's there. This is what my CSS code looks like for my Hero Image.
And this is my HTML for that image, as well as for a banner underneath the image with which I have the same separation problem.
.container {
position: relative;
text-align: center;
color: white;
}
.full-width-banner {
position: auto;
background-color: #466995;
padding: 200px;
top: 20px;
text-align: center;
height: 100px;
text-height: 40px;
width: 73%;
overflow: none;
color: white;
font-family: 'Oswald', sands serif;
font-size: 20px
}
<div class="full-width-banner">
<h2> “Change will not come if we wait for some other person or some other time. We are the ones we’ve been waiting for. We are the change that we seek.” </h2>
<p>Barack Obama<p>
</div>
This is a picture of what that creates, an empty gap between the image and the end of the browser page on the left side. The picture is supposed to completely cover its portion of the browser with no border on either side.
I don't know why this is happening or how to fix it.
By default your browser will add a few px of margin or/and padding to your body, just make sure to cleanse that at the beginning of your CSS like so:
body {
margin: 0;
padding: 0;
}
img {
display: block;
}
<img class="full-width-banner" src="https://ijnet.org/sites/default/files/styles/full_width_node/public/story/2020-07/cooper-baumgartner-J9QvzfkQM44-unsplash.jpg?h=8c0e36cd&itok=F6g99LH1">
So I reset my grid layout on a temporary practice page, though not entirely since this page's layout is extremely similar to the home page (the previous page I styled). Though, immediately I started having problems with the footer. It appears beside the content part and seems to stick there like this, no matter what I do.
The only thing that works is putting position: absolute; bottom: 0;. This does force the footer to be at the bottom, though when I do this there is a white space to the left that is ~10px which looks like this, identical to the default browser padding that should have already been disabled to start with. Nothing I do makes this spacing go away.
The home page has no problems with the footer, so I don't understand what's breaking the footer.
Relevant code:
<div class="content">
<div class="parPlaceholder">stuff</div>
<div class="footer">
<div class="footerStuff">footer placeholder thing</div>
</div>
.footer {
background-color: black;
color: white;
grid-row-start: 3;
grid-row-end: 4;
display: grid;
padding: 15px;
width: 100%;
grid-gap: 10px;
align-content: center;
}
.footerStuff {
margin: 10px 5px;
padding: 10px;
background-color: #1f1f1f;
color: white;
text-align: center;
border: 1px solid black;
}
The white space is being caused by the default browser styles on the body. This can be fixed by overwritting them with the style below.
body {
margin: 0;
}
I have some div containers which expand when the 'view recipe button is clicked, but all 3 across the bottom will hide underneath the footer container, i'm unsure which element to alter to have the expanded containers appear above and not underneath.
live url: http://bit.ly/1hQuzRI
I've attached the css of the elements which are appearing underneath the footer and some from the footer too. I can paste the html but there is loads which will end up showing up. maybe best to just view direct on site.
.box2-container-collapsed {
padding: 10px;
width: 270px;
height: auto;
background-color: #F5F2E9;
display: block;
float: left;
margin-right: 20px;
margin-top: 20px;
position: relative;
}
.box2-content {
margin-left: 0px;
font-size: 0.9em;
min-height: 200px;
display: none;
}
#footer {
background-color: #F3F3F3;
padding-top: 10px;
padding-bottom: 0px;
bottom: 0;
position: relative;
margin: 0 auto;
width: 100%;
}
Set the z-index in the footer to a negative number. Also try setting the z-index for the div that expands to a higher number.
Edit:
Your div with the class="content-container" has overflow:hidden. I removed that in my Chrome-Dev tools and the expanding div was visible after that. Side Note: It's difficult to see where the recipe ends and the footer begins. You may want to put a light border around the recipe div, too.
as you can see this site has a horizontal scrollbar. The problem happens only in the pages with the comments field - the <div id="commentsbackground">.
I want to keep the same style, the same view, however I want the scrollbar to disappear.
<div id="commentsbackground">
<section class="comment">
<section class="commentsMain"></section>
<section class="fbcommentbox"></section>
</section>
</div>
The CSS is the following:
#commentsbackground {
width: 6000px;
margin-left: -1172px;
background-color: #EAECF3;
overflow: auto;
section.comment {
height: 500px;
margin-left: 1172px;
margin-top: 20px;
.commentsMain {
width: 500px;
padding-left: 20px;
float: left;
border-right: 1px solid rgba(0,0,0,.13);
padding-right: 20px;
background-color: #E8E8E9;
padding-top: 10px;
.fbcommentbox {
width: 434px;
float: left;
margin-left: 0px;
background-color: #E8E8E9;
padding-left: 15px;
padding-top: 10px;
If I remove margin-left: -1172px; from #commentsbackground and I remove margin-left: 1172px; from section.comment the scrollbar is still there, but the left side becomes white.
If I also remove the width: 6000px; then the two comment boxes break, and the white appears in the right side as well.
If instead I remove only width: 6000px;, but I keep the margin-left's, then it breaks and I see white on the right.
I can't find a reasonable solution because the <div id="commentsbackground"> is inside the <section class="middle_single"> and the latest has a width of 892px... but I need the background of <div id="commentsbackground"> to be grey... for every resolution of the screen... the same as you can see it now. But without scrollbar.
I hope somebody can help.
[EDIT] - Today I tried to put the whole comment box in the footer.php file. Just before the footer-bottom div. It worked fine, however the site started to have other problems such as: the comments box was showing everywhere, also on the homepage and in the pages and posts with the comments disabled from the wp-admin. So I think that also this was wasn't the right solution for me.
The whole idea of 6000 pixel width and a thousand pixel offset is rediculous. Try changing some of this CSS to remove that crap, seems to work for me.
These will get rid of the scroll bar, but it will make the elemtents sit on top of eachother due to being too wide.
.commentsbackground { margin-left: 0; width: 100%; }
.comment { margin-left: 0; }
This will reduce the size of the right column, letting the comments and form sit side by side. Please adjust this.
.fbcommentbox { width: 335px; }
<span style="height: 200px; width: 335px;"></span>
<iframe width=335>
Hey guys I am having trouble with keeping things aligned on my website. Here is an example of what the website should look like:
Now, here is where it makes unaligned.. When I resize the window to be smaller, the Text shifts over like so:
Currently these are the css attributes applied to my tag which is on the text.
#header_title_container {
width: 1000px;
margin: 0px auto;
padding-left: 85px;
padding-top: 50px;
}
#header_title {
font-size: 33px;
color: #FFFFFF;
font-weight: bold;
}
What would the proper way to approach always having "Title" aligned with the corner of the darkest gray box?
Thanks.
Because your title container has padding inside it, the text "Title" is kept at least 85px from the screen edge. Because it's left-aligned, that means its left-hand edge is always at 85px.
So, when your sidebar gets smaller than 85px, the text cannot align with it.
You could fix this by fixing the size of the sidebar, by eliminating the padding-left directive and replacing it with an element sized as the sidebar is (or replacing it with the same amount as your sidebar width!), or by setting min-width on the sidebar.
Is this the kind of result you are after?
http://jsfiddle.net/2ScZZ/5/
html
<div id="container">
<div id="header_title_container">
<div id="sub_header_title_container">
<div id="header_title">
Title
</div>
</div>
</div>
<div id="middlebit">
</div>
</div>
css
#container {
background-color: lightgray;
}
#header_title_container {
width: 100%;
background-color: black;
}
#sub_header_title_container {
width: 900px;
margin: auto;
padding-right: 20px;
}
#header_title {
font: 33px verdana;
color: white;
padding: 50px 0 10px 0;
}
#middlebit {
margin: 0px auto;
width: 900px;
height: 100px;
background-color: gray;
}