I have a dilemma that appreciates and tries any suggestion put forward. I have a localhost running wordpress using the theme The Fox. I have everything running perfectly except for the footer.
I have some pages that the content does not extend a page, while others extend more than a page and the issue I have is that the footer starts exactly where the text ends and I dont want to add white space because of view port dissimilarities. As you can see below, I have a screenshot of a sample page with small content.
I hope you noticed the extra white space after the footer, which is also on the screen taking the footer to the center of the page.
I want the footer to extend to the end of the page no matter the length of the content or the size of the screen.
Inside the CSS, there is a footer section and it is here on Pastebin but I think the most important one is as below;
footer
{
bottom:0px;
right:0;
left:0;
overflow:auto;
padding:0px;
min-height:70px!important;
height:auto;
position: relative;
z-index: 9000;}
In the footer, I am using just a single column and I think this code handles that... also in pastebin.
.footer_1_col .widget_wrap
{
width:100%!important;
float:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-right:10px!important;
}
And on the footer type, I use type 8, which uses the code;
/**************************************************
Footer Type 8
**************************************************/
.footer_type_8 .widget_wrap {
margin: 10px 0px 0px 0;
}
.footer_type_8 .widget {
margin:0px 0px 0px 0;
}
.footer_type_8 .widget h2 {
font-size:10px;
text-transform:uppercase;
font-weight:900;
letter-spacing:normal;
line-height:14px;
margin-bottom:0px;
padding-left:0px;
position: fixed;
}
.footer_type_8 .widget_line {
display:none;
}
Please what am I doing wrong and where do I need to make changes? If you need to see some other code, please let me know and I will post it on pastebin.
Thanks.
Special thanks to #Firasd for his comments that made this possible.
All I did was to look for the body element using the browser inspector, and then recalculate the size for that element using the already known static height of the header and footer.
This Was Added to the Page's CSS Section
html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);}
The theme uses Bakerly Visual Composer and I just had to add the above code to the page I want the changes.
Note that if you have a slider, you will need to put that in your calculation too except if your slider is in a row element.
Related
for some reason my Blogger page won't let me create transparent space between my footer and the bottom of the page. I would like the footer to moved up (tried both margin and padding, but nothing) so that the background is seen for about 10px but need help with what code to use! Please help, thanks!
Link to blog: http://thewordswecarve.blogspot.ie/
Just add this to your css.
.content-cap-bottom.cap-bottom {
height: 10px;
}
This will make sure this div stays 'open' so you can see the background below it.
In you css sheet add this:
body { margin-bottom: 10px; }
I inspected your page and added this to .content-inner
.content-inner {
margin-bottom:10px;
}
And it seemed to work fine.
I'm coding a comment page on my website and it all works fine, but when you make it bigger part of my pages (notifications) move across the page. I've coded the text area to the position I wanted using position relative. Here is the css code I've use:....
#mainSection{
text-align:left;
margin-top:3px;
margin-bottom:50px;
margin-left:270px;
position:relative;
bottom:650px;
}
#mainSection .newPost{
width:500px;
height:125px;
}
You can prevent the user from resizing the textbox altogether:
textarea {
resize: none;
}
I have just got a developer to redesign my website and I have noticed one thing.
In Google Chrome my web page has a nice margin around it, about 2". But on IE the page goes right up to the edge of the page and makes the page look super big.
I want them both to have a margin around the page.
The web page I am talking about is, web design quotes.
Is the code I need to change in the CSS?
Any help is appreciated.
This link will show you how to make 'responsive web designs' so it fits all resolutions.
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
You can try this. it helps you when it does not work in IE
body {
margin:50px 0px; padding:0px;
text-align:center;
}
#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
in your body you give the margin and in your content you do an margin auto.
as explained here: http://bluerobot.com/web/css/center1.html
The background of my css class footer does not go across the entire width of the browser depending on how wide I keep the browser. It is making the page look odd because the footer is ending before the main content ends. The site is up at avidest.com so you can see what I'm referring to. Here is the css:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}
The css was originally:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9;}
but that didn't work either.
How do I make the footer go all the way from the left to the right side of the browser?
Thank you.
Looking at your webpage with chrome inspector, this error seems to be related with floating all the columns and header.
When you float an element, that element gets 'out' of the document flow. What this means is that this element actual size wont' be taken into consideration when it's time to layout things.
I usually don't want to have this behaviour on floated elements, so one way to avoid this is to set overflow: auto in the parent container.
Also, your header layout looks really strange. I'll update this when I have a definitive solution.
First update:
I have added said overflow: auto to every parent with floated elements and now it works for me. Please add that rule to the following elements:
.Header
.Logo
.body
Please note that with these changes your page will look messy (specifically, there'll be many scrollbars around).
This is because you have been a little too much strict setting things' size. I would let things flow more naturally instead. For example:
Settings logo size shouldn't be neccessary.
Bullet points on Header have too few height. I would remove it too.
Another thing I would do is to split the background image in 3 (or 2 at least, header and content). That way, things are a little more decoupled and easier to change. Try to think of each 'logical' block (header, footer, sidebars, login form) as an independent module that shouldn't share things with the rest (images, classes, etc).
I'm sorry that all this can't be explained in a comment, but please don't hesitate to ask me anything.
Have you tried left and right pixels at 0 maybe?
.Footer { left:0px; right:0px; padding-bottom:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}
I think it may be the container it is within
Im using wordpress, and my own version of a twenty eleven theme.
I have a site where the main header has a z-index:9999, then completely independent of that I have a slider, that has z-index:1. The slider is completely independent of the header and main content page. Yet for some reason in IE7 when I use the dropdown menu, the submenu hides behind the slider. This has nothing to do with the sub-menu though, it is the entire header (its just the sub-menu is where the user sees that its being hidden)
Here is the header..
#access {
background:transparent;
clear: both;
display: block;
float: left;
margin: 0 0;
width: 980px;
height:70px;
position:relative;
z-index:99999;
}
Here is the slider,
#top-slider {
width:1920px;
position:absolute;
margin-top:70px;
height:300px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
left:0px;
background: #000;
z-index:1;
}
Im confident that these are the only two elements that are causing the issue, because when I remove the z-index:1 from top-slider, the header can be seen fine, the only reason I cant do that though is because then the slider starts hiding behind the main page.
Thank you for any help.
Take a look at this writeup (https://stackoverflow.com/a/3998006/859324) and see if it helps. It mentions specific problems in older versions of IE and how siblings compared z-index values. So maybe the #top-slider div is comparing its z-index to the #page div, instead of #access.
Another similar issue I found mentioned changing the z-index of #top-slider to -1 instead of 1, though I can't say I sufficiently know all the ramifications of doing so.