Currently, I am using a text widget with HTML and CSS to create my footer. For some reason, on a specific page on my website there is a huge white space above my footer. The space also increases as the resolution increases. It can mainly been seen starting with resolution widths 1440x900 and up. I am sure it has something to do with my footer but I am not sure what exactly.
Can be seen here: http://museiam.ca/vault/
Footer CSS:
.gbtr_dark_footer_wrapper .container_12 .grid_3 {
z-index:99999 !important;
background-color: #fff;
background:rgba(255,255,255);
background:rgba(255,255,255, 0.5);
position: fixed;
bottom: 0 !important;
left:0;
width: 100%;
}
Thanks for looking!
Your footer is fixed to the bottom of the window due to
.gbtr_dark_footer_wrapper .container_12 .grid_3 {
position: fixed;
bottom: 0 !important;
}
As your resolution increases, the content will fill up only the top of the page, and the footer will stay at the bottom, leaving a huge whitespace in between.
Related
I am trying to build a layout where I have two divs in the background that span 100% of the page and then a full height wrapper div of a smaller size for content that sits centered on the page. The issue I am having is while I can get the wrapper to sit correctly on top of the top div; I cannot get it to behave correctly on the bottom div. Here is an example:
html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.index-banner {
background: #265f7a;
height: 60%;
width: 100%;
}
.wrapper {
background: #444;
height: 200%;
margin: 0 auto;
position: relative;
top: -60%;
left: 0;
right: 0;
width: 50%;
}
.footer-bg {
background: #888;
height: 250px;
position: relative;
top: -85%;
left: 0;
right: 0;
width: 100%;
z-index: -1;
}
<body>
<div class="index-banner"></div>
<div class="wrapper"></div>
<div class="footer-bg"></div>
</body>
Now the issue with the above code is by using a negative positioning, then I leave a massive gap at the bottom of the page. However I have also tried:
Using an absolute positioning on the wrapper div. Works perfect in keeping the page the correct size however then the bottom div floats to the bottom of the viewport
Using a faux method of making the bottom div look like a full width div by using a background image on body; unfortunately this just sticks it to the bottom of the viewport instead of the bottom of the page due to no content being between both background divs.
Now I have thought about keeping the wrapper occurring naturally between both of the background divs so they do not overlap at all and then put divs inside of those background divs lined up with the wrapper however that becomes a bit of a nightmare that I want to avoid because then I have to struggle to try and align the content that overlaps them as each of those "section divs" would have to be split into two (imagine trying to make a paragraph look like one because it is spread between two divs).
So my question is - am I going about this the wrong way and overlooking something that I could be doing differently to make this work?
I have a contentWrapper class which contains all of the elements on my page. For some reason, the navigation takes up what appears to be 100% of the body and then some. I cannot however get the following elements, the slider and divs below, to stretch to fill the same width. There is always extra room to scroll to the right which displays the background color. I have made it pink in the fiddle its easy to see.
body {
background-color: black;
}
.contentWrapper {
height: 100vh;
width: 100%;
background-color: black;
}
http://jsfiddle.net/o5y26tqw/
Any suggestions? I feel like it could be an easy fix, deleting sections of the page at a time did not seem to remedy the issue.
So it looks like your .cycle-overlay is 100% wide and left is set to 20px. This is pushing everything over and revealing the background. Setting the width to 300px got rid of it for me.
JSFiddle
.cycle-overlay {
position: relative;
top: -200px;
left: 20px;
z-index: 999;
width:200px;
}
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I have a problem of howto remove the white space caused on the bottom of the page - when i remove the gear image it works fine.
html, body{
height: 100%;
width: 100%;
font-size:10pt;
}
.footer_fg{
float: left;
position: relative;
width:455px;
height:358px;
background: url('/include/images/Final-Website2_11a.png') no-repeat 0 0;
top: -150px;
border:0;
}
this is the CSS for the site.
Using position: relative it is not the same as margin-top. position:relative first places the item on it's original position (and messures the size of the parent element with this position) and then just moves it. So there will always be white space where this item was before. If you just want to move it without leaving this white space you should think about using margin-top: -150px instead. As we don't see the rest of your code it is hard to tell if this would work for your site.
#logo {
background: url(/images/logo.png) 0 0 no-repeat;
width: 268px;
height: 96px;
position: fixed;
top: 10px;
left: 10px;
z-index: 1000;
}
This is my logo css and when I change the height and width to x% It just cuts of the bottom and right side of my logo image. How can I style my logo so that it stays at 5% of the browser width while maintaining aspect? Thanks
Your image has to be an <img> tag, not a background, and the CSS of this <img> tag :
#logo_img{
width:5%;
}
assuming the parent of #logo_img is 100% in width.
By using the <img> element for images, of course.
It is possible in a background image. See this demo at CSSplay. Ethan Marcotte has also detailed techniques that may fit your application.