Long time learner, first time poster.
Here's my dev site: http://kcyc.webstuffdepot.com
I'm using a bit of jquery to add a class - 'sticky-header' - to the header of the site. Sticky-header makes the header scroll with the user. Here's my CSS:
.sticky-header {
z-index: 99999;
position: fixed;
width: 100%;
border-bottom: 1px solid #ccc;
min-height: 60px !important;
background: #fff;
}
I've used this setup many times with the same Genesis theme and it's been great. With this application, however, something weird is happening. As you scroll, the header flickers in and out, interacting with elements below it.
The part of the header that blinks in and out is always consistent, as though it is being interrupted by an unseen page element. I can't find any page element that is consistent throughout the site that would be causing this behavior.
I'm wondering if you fine fellows could point something out to me, or know some aspect of the CSS I'm trying to use that's causing confusion in the display.
You would have to set the width and position on your wrapper div as well because you are floating your aside and setting it at a width of 50%.
Since the wrapper div does not have a set width, the wrapper doesn't know what width to take (50% of what?). The wrapper div also needs to be relative to the header position to inherit the z-index. I used the below code and it fixed the problem.
.sticky-header .wrap {
padding: 10px 0px;
width: 100%;
position: relative;
}
Related
I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
I'm trying to get a simple page layout where the navbar sits vertically along the right side of the user's window, taking up no more than 20% of the available space. The remaining 80% of space to the left is used for content.
I want the entire page to be resizable, so no matter how big or small the browser window is (within reason), the content will resize to the user's screen. Everything works and resizes great, but there's one problem with the navBar. Here's a CSS excerpt:
body{
background-color: #111111;
font-family: Roboto;
color: #cccccc;
font-weight: 300;
font-size: 14pt;
height: 100%;
}
#content{
width: 80%;
float: left;
}
#navBar{
width: 20%;
height: 100%;
background-color: #00C9FF;
float: left;
position: absolute;
}
#welcome{
background-color: #222222;
text-align: center;
margin: 1%;
}
The Problem:
If I leave the code above as is, the navBar renders on the right side of the screen, as it should, but it is not 100% the height of the browser window. Note it still resizes when the browser window's WIDTH is changed.
If I set navBar's position to absolute (position: absolute) the navbar renders exactly how it should render, except it floats to the left side of the browser, basically making it on the complete opposite side of where it should be.
Demo: http://codepen.io/anon/pen/YPyvzO (remove position: absolute to see where the navBar SHOULD render)
I have tried several different things including setting "HTML" in CSS to height: 100% and several different position properties for navbar, all to no avail. I'd like for this to be done only in CSS, but I'm not sure if it's possible.
Add the following:
position: absolute;
right: 0;
to #navBar. One thing that took me a long time to understand is that position: absolute overrides everything, even floats.
when you resize the browser the width and height change, so for this purpose you have to use media query in CSS and in this you have to tell the browser that in this width the navbar should be in given width. and another option is that you can use bootstrap, in bootstrap you not write too much css. and all the work become easy.
I'm building a website for our church and I'm using joomla 2.5 to do so. The template i used was wsnone2. I know a bit of code but not a lot i've tried to play around to sort out this issue but i cant seem to do it. Basically when there is very few lines of text as here http://www.smass2.co.uk/index.php/en/hymns/annual/deacon-responses/liturgies the footer comes up and covers the space. How do i stop that without making the position fixed. i tried using ryanfait sticky footer, and several others, but that didnt seem to work. can anyone people provide me with any more suggestions? if possible could the solution be done through CSS?
Thanks.
Actually, this is going to be harder than it looks at first glance. You have a couple things working against you here. First, your footer is actually contained in 2 divs, region9wrap and region10wrap. Doing as #gartox suggests will only move part of the footer to the bottom of the page. You would also need to do the same for the other part. To do so you would need this CCS -
.region9wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 30px; /* height of div below*/
width: 100%;
}
.region10wrap {
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
}
That will move both parts of the footer down, but now you will have a huge dark stripe where your background does not extend to the footer. Now you have to fix the background. First you need to remove the background from region4wrap completely.
Then add the background to the body tag -
body {
background: url('http://www.smass2.co.uk/images/Cross.jpg') no-repeat #0D0D0D;
}
This will make the background extend all the way down to the footer of the page without causing a big dark stripe.
You need do this:
In the class .region10wrap add this properties:values
.region10wrap
color: #999;
position: fixed;
left: 0px;
bottom: 0px;
height: 30px; /* your height footer*/
width: 100%;
}
Easiest way to do this is to have the footers background on the actual page (behind the whole site), so when the footer can't reach the bottom, it will look like it's stretching all the way down.
I want to nest a div inside another div so that the outer div grows with the inner div as the inner div has text placed inside it. Would appreciate any help. Here is a link so you get the idea. You will need to open your browser up to full screen to see the bottom of it correctly.
Hello Slalvenko, Have posted up both your code (thank you kindly) and my code which I know is not perfect but I'm learning. Yes I am aware of css reset styles that set browser default values to 0 and I did download one once. But I'm hoping that in a years time I will be aware of all of this and just write it into my code. I suppose a reset saves time and trouble but I'm enjoying pottering around what with all of this being new to me. Here is your code and my code. Mine is slightly different because I was wanting to add two more divs to it later which I will show you when I get there. Mike http://www.hnw7.com
.outer {
background-color: #CCF;
margin-top: 0px;
right: 0px;
margin-right: 0px;
bottom: 0px;
margin-bottom: 0px;
}
.inner {
width: 535px;
background-color: #E6E6FF;
color: black;
padding: 20px 50px 20px 50px;
overflow: hidden;
margin: 0 auto;
}
I'm not sure if this was your question but try this. The floats in your .inner div are making the parent's height 0, since the floats take those elements from the document flow. You need to clear those floats if you want your parent to have actual height. I find that easiest way to do so is to add overflow:hidden; to the parent element.
You can read about clearing floats here
I have read a vast amount of posts on the subject of css heights filling the viewport and have failed to find a working answer. So I'm reluctantly starting yet another thread about this in the hope of finding the missing part of the jigsaw I have probably been staring at without seeing it.
My DOCTYPE is xhtml transitional and I'm currently testing on IE6, FF6 and Safari 5 with the same problem.
I have a container div that also displays an image driven border within a table and I want this to fill the browser window, no bigger, no smaller but adaptable to each browser (minimum heights will be set to ensure all content is contained to account for older resolutions).
I have set the html and body styles as follows:-
html {
height:auto !important;
height: 100%;
min-height: 100%;
border: solid;
border-color: black;
overflow: hidden;
}
body {
height: 100%;
height:auto !important;
min-height: 100%;
border: solid;
border-color: black;
}
As you can see I have added a border to each of the elements so that I can actually see the size of each when I view the page. The html element fills the window fine, but the body element doesn't. It just shows a short box along the top of the window.
Can anyone offer a suggestion as to what may be causing the problem?
This is all you need for the css:
html,body {
padding: 0;
margin: 0;
height: 100%;
}
Live example: http://jsfiddle.net/tw16/gyAKJ/