So I have a fluid layout with a min-width on the body of 960px. I have a fixed header, which works as intended, and a right-side nav bar which I want to remain fixed on the vertical scroll... this also works.
However if I resize the window to less than 960px width I would like the right hand nav bar (position:fixed) to stay to the right on the horizontal scroll instead of overlaying the content.
#mainnav {
width:20%;
height:100%;
margin-left:80%;
position:fixed;
}
#mainhead{
position:fixed;
top:0px;
left:0px;
width:100%;
height:46px;
}
#contentcontain{
margin-top:46px;
width:80%;
}
I'm sure I could do it with using JS but I was just wondering if there is a more simple way to it without JS.
Thanks,
Dom
An element with position:fixed is pulled out of the normal flow of document layout and will always sit on top, unless you give it a z-index value.
Related
So I am working on a site and I having an issue. The scrollbar seems to extend passed the window. I cant see the bottom arrow even with max res. It is even worse when I resize the window. The main problem with this is that I can see my footer, but for some users with smaller screen resolutions cant. Here is my css:
body {
display:block;
margin:0;
color:black;
width:100%;
height:100%;
overflow:scroll; }
Here are screens of what I am talking about:
full res: fullres
Resized window: resized
Any help is appreciated.
remove the overflow:scroll; from your body and put it on the specific div where you want the scroll to be
So your body css
body
{
display:block;
margin:0;
color:black;
width:100%;
height:100%;
}
Are you using any position absolute or fixed in your code ? i dont see it as a problem just this short code. I would prefer "auto" over "scroll" for overflow property.
How to clip my top bar with screen. So as I goes down on page i mean scrolling down the page the top bar should also move. Just like in Facebook the top bar moves on screen.
I am searching google from last 2 hours. But unable to get, that what we calls it.
and my HTML/CSS is ..
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
}
HTML
<div id="topnavbar">
</div>
You're talking about fixing the position of the navbar to the top of the screen, right?
top:0;position:fixed;
-
#topnavbar {
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
top:0;
position:fixed;
}
In CSS, positioning elements is a fundamental concept. In this case, you want a fixed position. According to MDN, you should adhere to the following guidelines for fixed position elements:
Do not leave space for the element. Instead, position it at a
specified position relative to the screen's viewport and doesn't move
when scrolled. When printing, position it at that fixed position on
every page.
To reiterate, if you want to keep an element in the same position, regardless of where the page is scrolled, use position:fixed
#topnavbar{
position:fixed;
}
Example
It seems there are some sort of image slider on your page. So what I will suggest you to include z-index also.
#topnavbar
{
width:100%;
height:50px;
background-image:url('top.jpg');
background-repeat:repeat-x;
position:fixed;
z-index:500;
}
What you need to search for is how to use the css attribute position: fixed; to have a div or other element 'stay where you put it' relative to it's containing element.
Really quick and rough example:
http://jsfiddle.net/c93cK/
When I do something like this for the footer css
footer {
position: fixed;
top:800px;
left:0;
width:100%;
height:80px;
}
When I resize the browser window from the bottom upward, of course, the footer does not move and does not overlap my main content which is great however, when viewing the site at different screen sizes, the footer being a fixed footer of course is at the bottom for some screen sizes then larger sizes it isn't at the bottom of course because it's fixed. So ultimately what would I would love to have is a footer like this:
footer {
position: fixed;
top:90%;
left:0;
width:100%;
height:80px;
}
Which creates a footer that stays at the bottom of the page regardless of resizing yet it can overlap content. I want to have a fixed footer that will always stay at the bottom yet never overlap content.
I could use media queries for popular sizes but of course at some sizes it won't work out.
Can anyone help me out?
footer {
position: fixed;
bottom:0;
left:0;
width:100%;
height:80px;
}
Then give your content a bottom padding of at least 80px. Why are you using top anyhow?
Here is the sample code!
If the result area is too small and you will have to scroll down - some of featuresMenu text will hide behind the footer. How to prevent this, how to make featuresMenu to stick until it reaches footer?
Thanks!
body {
margin-bottom:50px;
}
#div_id {
position:fixed;
bottom:0;
right:0;
left:0;
width:100%;
height:50px;
}
this should do the trick, make sure whatever the height of div is you make a margin at the bottom of the page, so stuff doesn't hide there
Set the z-index of the floating div to 1, and the z-index of the footerdiv to -1.
I have a div along the left side of my page for navigation links. Clicking on a header expands a subset of links. I have this div set to 100% of the page height so that the column takes up the entire left side of the page. The problem occurs when all of the sub categories are expanded. The content of the div runs off the bottom of the page, but doesn't add a scroll bar.
I tried setting the height to auto to see if that would fix the problem (ignoring the fact that it doesn't take up the whole left side), but that didn't fix it either.
So, what do I need to do to get a scroll bar when the div expands past the height of the page? Then have the scroll bar go away if it's not needed.
Thank you.
.leftNavigation {
display:block;
position:fixed;
width:200px;
height:100%;
top:140px;
left:0;
background-color:#f0f0f0;
}
<div class="leftNavigation">
<p class="linkHeader" id="townLinksHeader"><img src="img/image.jpg" width="200" height="40" alt="Sunnyvale, CA" /></p>
<div class="links" id="townLinks">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
There are 4 paragraph/div combinations inside the left navigation div. Only the paragraph is show until it is clicked on. The links div is then show. When each of those is expanded, it runs off the bottom of the page but doesn't add a scroll bar.
Adding overflow:auto didn't change anything.
Does the side content div use fixed positioning? Because, that is usually why a scrollbar does not appear. Try setting the overflow:auto css style on that div to add a scrollbar when needed.
Update:
You have top:140px in there and height:100%. This is actually pushing the side div down below the page. If the expandable content is not taking up much space, then it will flow off the bottom of the page and no scrollbar will appear.
Try this:
.leftNavigation {
display:block;
position:fixed;
width:200px;
height:100%;
top:0;
left:0;
padding-top:140px;
overflow:auto;
background-color:#f0f0f0;
}
When something is 'fixed' positioned, it will not add scroll bars. You can either try positioning it with position: relative, or you can set top: 0. If top:0 still isn't enough, you'll have to set the height to a fixed height that is smaller than your window.
.leftNavigation {
display:block;
position:fixed;
width:200px;
height:100%;
top:0;
bottom:0;
left:0;
margin-top: 140px;
overflow:auto;
background-color:#f0f0f0;
}
Now it's correct.