I am trying to create a floating header nav menu and a floating footer nav menu, both customized. However, I can't figure out where to put it in the code, so that it doesn't scroll away.
The website is here http://steppetsgame.com. The grey bar at the bottom is suppose to stay at the bottom as I scroll down. As you can see it is stuck to something and I can't figure out how to stop this from happening.
I am using a parallaxing theme by themify on wordpress.
<div class="footer_custom">
Footer Text/Code
</div>
.footer_custom {
background-color: #d7d7d7;
position: absolute;
z-index: 9999;
bottom: 0;
left: 0;
width: 100%;
padding: 0;
margin: 0;
height: 100px;
}
I do not know if I understand what you want to do with the header menu, but to position it at the top of your site you can use this:
#nav-bar {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
z-index: 9998;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
margin: 0px;
}
The "fixed" value combined with the top property will position your nav at the top of your site and it works when scrolling.
For your footer menu is very similar:
.footer_custom {
background-color: #D7D7D7;
position: fixed;
z-index: 9999;
bottom: 0px;
left: 0px;
width: 100%;
padding: 0px;
margin: 0px;
height: 100px;
}
The "fixed" value combined with the bottom property will position your footer nav at the bottom of your site and it works when scrolling.
And both codes work with responsive design.
Related
The header position of my website is always aligning to the left side in IE.
But it should be in the middle, in Chrome and Firefox its working without problems.
May i ask for your expertice for this?
Homepage:
CSS Code:
.header {
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
Please try this code for proper solution.
For header class you need to add below CSS
.header {
width: 100%;
}
and for navigation part, you need to update left side margin with below CSS.
.nav .ul .li {
margin-left: 32px;
}
By margin auto and max-width fixed no need to give left and right .It will automatically placed in the center of the page.
So just remove left and right
.header {
top: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
max-width: 950px;
height: 141px;
background: url(../img/bg_top.jpg);
background-size: cover;
color: #FFF;
z-index: 100; }
I have the a page that looks like this:
What I want to do is that when I scroll the page, only the bottom half should move. I did it but because of the padding it makes it like this:
This is my css file:
.sites-list {
height: 40%;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 400px;
padding-left: 18rem;
padding-top: 5%;
background-color: #ffffff;
text-align: left;
font-size: 30px;
line-height: 40px;
color: #396aba;
}
When I inspect it in browser and uncheck top and padding-top it works fine:
How should I change it to make the white border be there if there is no scrolling but when I scroll to make the text go beneath the blue part as in the last picture?
I don't know exactly how your bars look like in CSS, but here is a working example that uses position: fixed.
.Bar {
position: fixed;
left: 0;
width: 100%;
height: 20vh;
z-index: 10;
background: #175f8f;
}
.Bar-top {
top: 0;
}
.Bar-bottom {
bottom: 0;
}
.Content {
position: relative;
z-index: 0;
padding-top: calc( 20vh + 100px ); /* set to the same height as the bar would be */
/* If you want to increase the padding and mix relative with absolute dimensions, use calc. Otherwise just add them up for a slightly better performance */
height: 2000px; /* we cheat a bit so we have something to scroll */
}
<div class="Bar Bar-top"></div>
<div class="Content">
Having your content here.
</div>
<div class="Bar Bar-bottom"></div>
You could set the blue bar to the following:
Position: fixed;
top: 0px;
z-index: 1;
And then set the element which you want the bar
to go over to:
z-index: 2;
This basically means that the blue bar is 'Fixed' to the top of the browser at all times. The nav element underneath it may require a margin-top of however tall the blue bar is to push it below the blue bar before it has been scrolled.
I have 3 divs inside my div#all (simple html). Left - Main - Right.
Left & Right have just a background image (their content won't change).
Main div will have all my text etc.
Option 1: I need to have the left/right divs to expand their height (so my image background gets repeated) to reach the height that my divMain may have.
Option 2: I can do position:fixed my Left/Right divs as well so they stay in place when I scroll. My issue on this plan is that I cannot position/float my right div at the desired place.
Any working option is ok with me.
css code:
body{
margin: 0 auto;
padding: 0;
width: 100%;
background-color: #fff;
overflow-y: auto; overflow-x: auto;
}
#all{
position: absolute;
top: 0; left: 50%;
height: 100%; width: 1366px;
margin-left: -683px;
}
#temp-left{
position: absolute;
top: 0; left: 0;
height: 100%; width: 183px;
background: url(image/bg-lft.jpg) repeat;
}
#temp-right{
position: absolute;
top: 0; right: 0;
height: 100%; width: 183px;
background: url(image/bg-rgt.jpg) repeat;
}
#main{
position: absolute;
top: 0px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -500px;
text-align: justify;
}
If I properly understand your question i suggest you to use jquery
You can try this out.
$(document).ready(function() {
// Check if body height or width is higher than window height and width:)
if (($("body").height() > $(window).height())||($("body").width() > $(window).width())) {
$('body').css('background-image', 'url(image/bg-lft.jpg) repeat;');
}
else
$('body').css('background-image', 'url(image/bg-lft.jpg) no-repeat;');
});
I'm developing a mobile website that has essentially three divs a header, content, and footer. I want the header and footer to be fixed and the content scrollable if there is over flow. Right now my css is:
#header{
top: 0;
left: 0;
height: 8%;
width: 100%;
position: fixed;
text-align: center;
text-height:font-size;
}
#content{
top: 8%;
left: 0;
bottom: 15%;
width: 100%;
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}
#footer{
height: 15%;
width: 100%;
position: fixed;
text-align:center;
bottom: 0;
left: 0;
z-index: 1;
}
This works perfectly, however in the content I have some text fields and on a mobile device when the keyboard pops up the header and footer also get pushed up making the content field too small. Is there anyway to keep them fixed but not have them get pushed up when entering in text?
You could just hide the footer using JavaScript every time a textfield gains focus, since the fact that the website gets smaller is hard-coded in the operating system (which is responsible for showing the keyboard)
This can be done using jQuery, or for mobile even better (because smaller): zepto.js
Hope that helps
#content{
top: 8%;
left: 0;
bottom: 15%;
**width: 100%;**
position: fixed;
margin: 0;
padding: 0;
overflow: auto;
z-index: 0;
}
Change this highlighted text into px value.
% values adjust the object based on your browser size.
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.