So i have a navbar on the left of my website it works fine, but it wont "push" the footer like normal data does
#navbar {
float:left;
width: 181px;
position: fixed;
height: 100%;
}
#footer {
border-top:2px solid #a1a1a1;
position:absolute;
bottom:0;
width:100%;
color:white;
height:60px; /* Height of the footer */
background-color: #101010;
}
this is the css, you can see a "working" version at:
version - no data
version - with data
with the second link you will notice how the main content pushes the data, but on the first one if you have a small screen or make the window small it wont show all of the nav bar, is there a way to fix this?
i believe i have covered everything
If I understand your issue correctly, when the page is resized vertically you want the footer to stop when it reaches the navbar.
One possible solution is to modify .navbar css like below:
#navbar {
// remove these styles
// float: left;
// position: fixed;
// height: 100%;
width: 181px; // keep this
}
To get the footer to rest at the bottom of the nav, you need to get the .navbar back into the document flow, float: and position: fixed take it out of the document flow.
You still may want to make this float:left for part of your design, in which case you'll need something else to extend down to stop the footer (probably something in the content section).
Related
I have a problem, my English is not good, but I try to describe my problem completely!
There is currently a window. The screen to be implemented is that the footer should be fixed at the bottom of the container, and should not move down as the content of the white block increases. Then, when the content of the white block is too much, the entire window will not change. Large, and the white block content can be scrolled to view other options.
My example
What I could understand, you need to fix footer.You just need to uncomment your commented code of footer and change position:fixed Or position: sticky; from position: absolute
i.e Your footer code of CSS would be;
footer{
position: fixed;
//position: sticky;
width: 100%;
bottom:0px;
right:0px;
background-color: #f77331;
display: flex;
justify-content:space-around;
padding:10px;
z-index:9000;
.btn{
padding:10px;
border-radius:20px;
}
}
Then if your content hides due to fixed position of footer you can use margin for that content.Hope this would solve your problem.
I have added a logo next to my menu bar, but anytime I minimize the browser window it moves and juts behind the menu tabs. I would like it to stay put no matter the size of the browser window.
Here is my HTML code for the logo:
<div class="headerlogo"><img src="http://passionpreneurenterprises.com/kerrizane/wp-content/uploads/2014/06/kerrizane2-small3.jpg"></div>
Here is the CSS speaking to the logo (I am using Thesis 1.8.4 so that's why the .custom is included):
.custom .headerlogo {
width: 236px;
margin-left: 160px;
margin-top: 0px;
position: absolute;
top: 5px;
left: 0px;
}
Also, here is the CSS code for the menu bar that is next to the logo:
.custom .menu {
margin-top: -474px;
margin-left: 165px;
width: 950px;
margin-bottom: 11px;
}
And here is the CSS code for the header image that is below the menu and the logo:
.custom #header_area {
background: none repeat scroll 0 0 #03989c;
height: 100px;
margin-top: 475px;
}
.custom #header_area .page {
background:transparent;
}
.custom #header {
background:url('http://kerrizane.com/newsite/wp-content/uploads/2013/10/Kerri-Zane-Header.png') no-repeat center transparent;
width: 1265px;
height:400px;
padding-top: 0px;
margin-bottom: 26px;
margin-left: -140px;
border-bottom:0;
}
Here is a link to the site: http://passionpreneurenterprises.com/kerrizane/about-kerri/ if your browser is maximized, you'll see the logo on the top left and the menu to the right of it. But if you minimize your browser window, you'll see that the logo moves and sits slightly behind the menu, which is not what I want. If I can find a way to make it stay put, that would be ideal. Thanks for any help you can give.
UPDATE: I see what was happening, when I was signed in and viewing the site, the admin toolbar was across the top of the site and making things look off when I was trying to position them. So I've removed the admin toolbar and put the logo where it's supposed to go....
BUT, there's still a problem. When I view it on my PC without the admin tool bar, here is how it looks:
The picture above is how it's supposed to look. But when I view it on my phone, here is how the logo appears:
Any suggestions on how to fix this? I have also updated the CSS code of the logo to depict the recent changes I made. Thanks.
Your current page seems to be different than the code you've posted, but see if this helps.
Most smartphones will try to scale images so they fit the screen, so if this isn't giving the result you want, you want to override this default behaviour and tell the smartphone what to do.
Try editing the CSS for your header image to something like
#teaser-image{
margin:0 0 10px 0;
width:90%; /* force image to scale on narrow viewports. to get the results you want, play with this percentage and or the margin values above or a margin on the page */
max-width: 1265px; /* set max width for image */
}
Good luck!
I ended up finding an answer to this in another forum. I needed to adjust my .headerlogo CSS code to include "position: relative" instead of "position: absolute" (the "position: absolute" was part of the original CSS I posted above in my question). Wanted to share in case anyone else came across this problem. The corrected code I used is as follows:
.custom .headerlogo {
height: 71px;
position: relative;
top: -240px;
width: 200px;
}
I have been playing around with my content in order to achieve my desired effect however now my footer will not be at the bottom of the page below all content. I it is currently fixed at the bottom of the page, however this overlaps a navigation bar running down the left hand side. I have the main body of the content inside a div - main container, with the footer outside of this.
HTML for my footer:
<div class="footer">
<div class="footerContent">
<p>Copyright © 2014 www.danielparry8.com</p>
</div>
</div>
CSS for footer:
.footer {
width: 100%;
z-index:999;
bottom:0;
clear:both;
position:fixed;
}
.footerContent {
font-family: sans-serif;
color: #FFF;
float:left;
width:100%;
margin-top: 10px;
margin-bottom: 10px;
}
.footer p {
float:left; width:100%; text-align:center;
}
I understand that fixed positioning is probably not the method to use, however when I use other methods it rises towards the top of the page, and still overlaps my content.
All content is inside a main content div with the following CSS
html, body, #maincontainer { height: 100%; }
body > maincontainer { height: auto; min-height: 100%; }
This has been getting on my nerves for days and no other solutions I have browsed on here have worked, I presume their is an error in my code somewhere I just can't find it!
Thanks!
you need to change position: fixed to absolute end add bottom: 0;
footer and your unit must be located outside of the wrapper
I used a margin-bottom: <footerheight> on the body css. Might be a bit 'cheaty' but seems to work on everything I tried.
Looking for a responsive layout using CSS only that can behave like the images shown. There are 5 basic areas of the site. Header, Lefthand nav, Content, a sidebar and a footer. So far i have everything done besides the content/sidebar relationship. For the desktop site the green sidebar floats inside the content area and to the right and when the sidebar ends the content wraps around it. On the mobile site the sidebar moves below the content. The issues i am having are getting this to happen. I can get it to float left without the wrap and then move below the content but getting the content to wrap the sidebar as well is proving troublesome. Any pointers?
what about this approach;
Please note that the following excerpt is not completed, but it gives you hopefully a good idea:
For the desktop-version:
In order to display the sidebar in the content section properly, the best you could do is to absolute-position the sidebar-section. Like this:
#content {
position: relative;
}
#sidebar {
position: absolute;
right: 0px;
top: 0px;
}
Above code requires that "sidebar" is wrapped by "content" which will cause problems with the following piece of code:
Smartphone / tablet support: To stack all sections nicely on a smartphone:
#media screen and (min-width: 0px) and (max-width: 900px) {
#navigation, #content, #sidebar, #footer {
width: 100%;
float: left;
clear: both;
border-top: 1px solid #ccc;
margin-top: 20px;
background: none;
position: relative;
}
}
Now, our final problem is the fact that "sidebar" is still wrapped by "content".
Couple of approaches to solve this issue;
Use JavaScript to move the #sidebar to and from another block based on the screen width.
What about introducing a second sidebar-section such as #sidebar-mobile which is only visible when you are on a mobile device. Obviously, in that case, the first sidebar will be invisible.
This is your code for content area.
<div id="content">
<div id="sidebar">
sidebar
</div>
content
</div>
<div id="footer">footer</div>
Here is the css for desktop and device as well.
#content {background:yellow; padding:20px;}
#content p{ margin:0;}
#sidebar {background:green; float:right; padding:10px; margin:0 0 10px 10px;}
#footer{background:#2AABE4;}
#media only screen and (max-width: 420px) {
#sidebar{ float:none; margin:0;}
}
Now we have to use the little bit part of jquery to place the side between #content and #footer in device. Here the code for jquery.
function setlayout(){
//alert($(window).width())
if( $(window).width() < 420 ){
$('#sidebar').insertBefore('#footer');
} else {
$('#sidebar').prependTo('#content');
};
};
$(window).on('resize load', function(){ setlayout() });
Above code will work on window resize and window load as well.
When you will resize you browser below 420 it will move the div. You can modify the width as per your requirement.
For working example visit below link. http://jsfiddle.net/rakeshpersonal/hknBb/
You can (ab)use CSS display:table to effectively rearrange divs using just CSS without any Javascript.
Use your initial formatting for the "desktop" view.
In the mobile view (which you can activate by a CSS3 media query), apply display: table to a wrapper around everything else on the page (or directly to the body tag). Then, use display: table-footer-group to push the sidebar and footer to the bottom, and use float: none to remove their float properties.
The following is based under the presumption that your html is like this.
<div id="content">
<div id="sidebar">
</div>
</div>
For desktop:
#sidebar {
position: absolute;
right: 0;
top: 0;
}
For mobile:
#sidebar {
position: relative;
margin-top: 16px;
}
you probably need to have position relative for content, for it to work, but if not there is likely other solutions
#content {
position: relative;
}
i am working on struts2 application.when i am dealing with jsp pages one problem is occurred, when page contents are less footer float below the contents, this will look very bad.but when contents are more than page then it automatically float to the bottom.this is ok for me. Any help will be appreciated...
the code used for footer in css is...
#footer {
height:41px;
background:url(../images/main-bg.png) repeat-x;
width: 100%;
}
For a sticky footer (always on the bottom of the page, no matter the height of the page), use position: fixed;
#footer {
height:41px;
background:url(../images/main-bg.png) repeat-x;
position: fixed;
bottom: 0;
width: 100%;
}
If you are looking for making the footer to be always visible on the browser window that doesn't get affected by scrolling then position:fixed will do. However that will look bad when the content is more and you need scrolling and still the footer stays in the viewing area overlapping the content. A clean solution is to move the footer markup outside the wrapper div. Something like should be good:
SAMPLE DEMO
CSS-
html, body {
height: 100%;
}
#wrapper {
background-color:yellow;
height: 90%; //sharing the height between wrapper and footer
margin:0px;
}
#footer {
background-color:green;
height: 10%;
min-height:20px;
max-height:40px;
}