This has got to be the most resilient footer i've ever seen in my life. Please observe subject A:
URL: https://xavier-jackson-ovac.squarespace.com
Hello, this website that I'm working on, I'm trying to find a way to have the background of this page to stretch the entire window no matter how i resize it similar to a cover page but theres always that grey footer underneath it. I tried:
in Code Header injection
<style>#header {
display: none !important;
#preFooter {
display: none !important;
}
#footer {
display: none !important;
}
#page {
width: 100% !important;
min-height: 700px !important;
padding:20px !important;
margin: 0px !important;
max-width: 100% !important;
}</style>
In page settings
<style>
#footer {
display: none !important;
}
</style>
It gets rid of the footer content and the prefooter, but for the actual footer? Nothing worked....
How can I have it so the background stretches the entire window? I'm basically trying to make it look like a cover page but with html functionality so i can add things like javascript / jquery. I have a similar theme using this template but I just need to get rid of that pesky footer. Help?
Its the white block at the bottom of my current page. Please help me destroy it... http://prntscr.com/aaelvf
it's the grey block on the bottom the standard template. Please help me destroy it... http://prntscr.com/aaeo8m
All help is appreciated. Thanks.
The footer IS hidden (you've hid the hell out of that thing). What's left is just an empty html tag. You'll need to add some content to make the page wrap further, or set the height initially to be higher (which will at least give it a white background), ie.
#page {
width: 100% !important;
min-height: 1200px;
padding: 20px !important;
margin: 0px !important;
max-width: 100% !important;
}
However, idk that you want to set the page to be 1200px by default. You might want to take a look at the image itself, and adjust the height that's being set by squarespace (806px).
style="top: 0px; left: -135px; width: 1210px; height: 806px; position: relative;"
Related
I've been working on my website again, but have come across this very bizarre issue. Most of the chartcontainer's adjust to the width of the web page. However, the top 2 are being overridden by what looks like the element.style attribute as shown here:
This means that when the web page is first loaded: http://newton-poppleford-weather.co.uk/trends.htm, the width of the top 2 charts are wider than what the page allows for (100%).
I've tried to code style specific HTML after the 'div id="containerx"' to try and override it but that doesn't work. For example:
<div id="chartcontainer1" style="width: 100% !important">
I'm not sure how/if I can edit the element.style code as after researching it seems that this is set in stone.
Thanks for your help.
William
Add css this way
#chartcontainer1 {width:100% !important;}
The main reason for the horizontal scroll is that you have a 100% wide content and additional padding on left and right here:
#content {
width: 100%;
padding-left: 10px;
padding-right: 10px;
padding-top: 120px;
}
Change it and leave out the left and right padding to:
#content {
width: 100%;
padding-top: 120px;
}
I'm currently using React and I'm having issues getting a div to equal 100% of the height of the page. Originally, I had an issue with there always being about 24px of empty space above the body. I couldn't fit it no matter what. I eventually used this on my app.css (a reset)
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
It fixed the issue, but still, a measurement of 100% or 100vh doesn't actually equal 100% of the total view. Here's a screenshot of the page:
https://gyazo.com/3407b6bd0032f402f3bb97acdb725e40
The blue div is a div that fills 100vh. Yet, it doesn't fully fill the page. I tried 100% as well.
Blue div:
.loginWrapper {
margin-left: 260px;
height: 100vh;
background-color: #29B6F6;
}
I noticed that the html had this styling on it, yet even when removed no changes were noticeable:
html {
box-sizing: border-box;
}
If someone could please explain this phenomenon, I would be very grateful. If you need any extra information, just let me know. Thanks!
You will have to reset the basics margin and padding if applied from html and other top level tags.
body, html {margin: 0;padding: 0;}
Or just use something like reset.css
http://meyerweb.com/eric/tools/css/reset/
So I have a problem with empty space at bottom of the website. Here is website: click
Repo of website: https://github.com/bdevelops/feditor
I read questions on stack, tried to find solution, but nothing works.
Sorry for bad English, if it is.
In your CSS class .box is margin-top:30px or height:100%. This is what makes white space at the bottom of your website
box {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
height: 100%; **//Set it to "auto"
margin-top: 30px; **//or this one, change it to 0px or remove**
overflow: hidden;
width: 100%;
}
I've been presented with the following layout:
where:
A = header, width: 100%
B = page content, max-width: 960px; margin: 0 auto
C = footer, width: 100%
The problem I've got is with the H1. The design has a background to the H1 which comes in from the very far left of the screen and stretches all the way across to line up with the right hand side of the content below. If the browser window is less than 960px then obviously it just appears as a solid bar stretching across the whole screen.
I'm genuinely at a loss for how to even start this. I thought about some kind of negative left margin + padding left but without knowing a fixed size it's hard to rely on percentages to accurately line up the elements.
The closest I think I've come to a solution is to have a massive background image which is centred on the H1, or maybe on a container surrounding the H1. Not ideal as it's just a solid colour so to use an image goes against my moral judgement.
Any ideas? Here's the structure of the page:
<header>
<h1>This is my title</h1>
</header>
<article></article>
<footer></footer>
CSS
header,
footer {
width: 100%;
min-height: 100px;
background: #eee;
overflow: hidden;
}
article {
margin: 0 auto;
max-width: 500px;
height: 100px;
background: #ddd;
}
h1 {
margin: 30px auto;
width: 500px;
background: #bbb;
}
There are several ways you could try and do this.
A jQuery solution would provide the most accurate result, but it's abit heavy for this kind of problem, and I personally don't like using Javascript for something that's a CSS problem.
You could do some kind of trick with a background image, you might have to depending on your actual design, but as far as a single background colour, I'd probably solve the problem with an element positioned behind the header with a negative margin-top, and a set width of 50% (That way it should always remain hidden behind your header). All you'll need to do is match up its height and margin-top to blend it in with the header.
.header-botch {
background: #bbb;
height:37px;
width:50%;
margin-top:-67px;
}
http://jsfiddle.net/duFnR/1/
If for some reason you hate the idea of using a negative margin, you could position: absolute the element instead
http://jsfiddle.net/duFnR/2/
Why not use jQuery and calculate H1.width = (B offset left) + B.outerWidth() ?
A solution which doesn't involve images appears to be wrapping the H1 in something and applying a background gradient to that element, see the fiddle. I've made the H1 background green to make it more obvious which background colour is which.
Pros:
Ability to manage the colour in CSS
The height is variable based on the height of the H1 allowing for multi-lines if necessary
Cons:
The width must be set no greater than that of the H1, otherwise on very thin windows it will appear out the other side. Also it has the weird behaviour of disappearing completely once the specified width has been reached (not a problem when smaller because you won't see it disappear).
On very large windows, the width will not be enough and a gap will appear on the left of the H1.
Code
<div class="h1Wrapper">
<h1>This is my title</h1>
</div>
CSS
.h1Wrapper {
/*background: #bbb;*/
background-image: -webkit-linear-gradient(left, #BBBBBB 300px, #FFFFFF 300px);
background-position: center;
}
h1 {
margin: 30px auto;
width: 500px;
background: lime;
}
In my website, some pages are having contents that exactly fit in the screen and some pages having scrolling content. All the pages are having, same html structure.
<body>
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
#header {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #EDEDED;
height: 172px;
margin: 0 auto;
overflow: hidden;
padding-top: 2px;
width: 900px;
}
#contentArea {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
padding: 0 0 25px;
text-align: left;
width: 900px;
}
#footer {
border-top: 1px dashed #CCCCCC;
margin: 0 auto;
padding: 0;
text-align: center;
width: 900px;
}
When i move to different pages, in some pages the scroll bar appears due to the content, at that time it looks like the whole webpage moved towards left side for some 20px.
How to make the <body> to adjust itself when the scroll bar appears?
Thanks!
The simplest trick is to always display a scroll bar. This is what HTML5 Boilerplate does:
html { overflow-y: scroll; }
if this doesn't fit your needs you will have to use JavaScript. On page load, detect, if body's height is larger than window's height and if not, move #header, #content and #footer to the left, e.g. via padding, or via margin on the body.
However, you have no simple means to find out, how wide the scrollbars themselves are. This, too, needs a detection via Javascript. (Basically: Create an element -> make it's content scrolling -> see how the content width changes.)
i belive you should specify WIDTH css attribute for BODY class:
body {
width:100%;
}
<body style="height:100%; width:100%; overflow:auto;">
<div id="header"></div>
<div id="contentArea"></div>
<div id="footer"></div>
</body>
Here is a jsfiddle link: http://jsfiddle.net/NGWgz/2/
Without fully testing, I suspect the reason you're seeing this is because you have an absolute width of 900px defined for the various elements that appear in the body of the page.
When the scrollbar appears, that's then eating into your screen real estate, and so the content shifts to maintain its 900px width. I would move to a more fluid sizing model, or at least wrap the content in a container of some sort, so that the scrollbar doesn't interfere with it.
The easiest way for me to do this is to use the min-height and max-height properties, that way you will not have to use the Overflow element and therefore the content will not move.
min-height: ... px/em/%
max-height: ... px/em/%
So you will write in your case:
min-height: the original height that you wanted in pixels, percentage or ems;
max-height: auto;
This way it doesn't matter how much content you put inside your box/wrapper/div , it will make the page height bigger without having to change it every time you add something to your page.
You also have the same properties for width but I have not try them.
My sources:
1-I am making a web page and studying software engineering at SB
2-http://www.w3schools.com/cssref/pr_dim_max-height.asp
PS: I know this is already solved, but I think it might be useful for someone else when they are working on their web pages.