I have a top banner which is styled position: fixed. But then this block the contents coming after the banner in the HTML. I've tried to added a margin to the content following the fixed banner, but this is not working well across devices. So how can I place the contents aside from the banner underneath the banner?
Edit: What is especially troublesome is I have an input field underneath the fixed banner, so that on a mobile device, the keyboard that pops up pushes the input field into the banner area, and completely hides the input element.
Any element in your HTML that you put position: fixed on gets removed from the context of the page, that is it moves to a different stacking context with respect to the rest of the page elements and every element that is made position: fixed get itself positioned with respect to the view-port of your browser window. So, did you try adding a padding-top to the body & the value should be equals to the height of your fixed element? And then once the padding-top is added make your fixed element top: 0 & left: 0, width: 100% so that it is placed at a 100% width of the view-port positioned from the top and then rest of the elements on the page will display at a space equals to the height of the fixed element, from the top.
Related
I'd like to have many elements fixed, but then have the main text block scroll.
Before I start coding, I'd just like some advice on the best way to do this. Should I wrap ALL the fixed elements together, and then inside that, have a relative element for the scrolling part?
Here is what I am trying to do:
I think you should create a main wrapper for your page which will have a relative position and that you center horizontally on your page (using margin: 0 auto; for example).
Then add inside that wrapper a <nav> for your top navigation and set its css position property to fixed, and then do the same for the sidebar with a <aside>.
Then add inside the wrapper a <div id="content"></div> for instance for your content and set its css position property to relative. If you want the content of this div to scroll vertically, you can add the following css : overflow: auto;
If I understand you well, you want your content to change without the page being reloaded & that the content scrolls, but not the rest.
You can :
Wrap your content into an iframe, so you can change the content without refreshing the whole page with a fixed height,
Just use a fixed height to your content div, and set this :
#yourDivId{
overflow:scroll;
overflow-y:none;
height: XXX px; //Fixed height;
}
Note : your mouse will have to hover the content to scroll it.
Well an advice?
Create separately three blocks; for fixed Nav, Fixed sidebar(for category) and scrolled main block(article). It'll be easy to order, I guess.
How many Category will display on the fixed sidebar? if the list heigher than window's screen, some category will be hidden unless you make it 'overflow:auto'. also consider about possibility of user resizing the screen.
Happy Coding !
I'm working on an interface that utilizes a list of items within a scrollable div, some of which utilize a rollover menu on hover that extends outside of the div. Disabled scripting compatibility is a priority for the site, so I'm trying to see if the interface can be done with only CSS before I start getting into other compromises.
I've got some examples below. The menu in question is on the right side with heading 'select projects'. The third list item from the top in each page contains a rollover menu.
In order to keep the rollovers positioned relative to the their parent when scroll position changes, I positioned the parent li's relative and the child ul's positioned absolute.
EXAMPLE 1
Of course, once overflow:auto is on and the scroll in place, the rollovers are cut off from displaying.
EXAMPLE 2
I tried removing the relative positioning of the parent li's, and retaining the absolute positioning of the rollovers to free them from the div, but then they do not position properly when scroll position is changed.
I can only post two links but if you want an illustration, it's here: eypaedesign.com/markets-rollover-issue-no-relative.htm
With the exception of changing the UI, is there a combination of properties I'm not seeing here that can be used to make this interface work on CSS? I could position the entire div as absolute, and add a large amount of left padding for the rollovers to appear in, but that seems pretty inelegant.
Thanks folks -
With only CSS, you are limited to only one or the other: overflow: auto or overflowing hover-menus. Using separate visible and auto properties for overflow-x and overflow-y doesn't work, so I think your best bet is to go with the padding solution you were considering.
With proper use of absolute positioning and z-index (in case you are concerned about padded menu container hit-blocking any elements under the padding), you should be able to do it without destroying the rest of your layout. You'll have to control the size of all child elements inside the scrollable container of course, so that they don't extend to the full width of their padded parent.
Adding these properties - with no other changes - seems to work on your site, so perhaps you can get away with it easily:
#project_menu {
padding-left: 300px;
margin-left: -300px;
}
.center {
position: relative;
z-index; 10;
}
if you put a height of 293px in your class nav it should be ok.
Or in you project_menu ID, As I can see that ID has a height of 218px and your UL is 293px.
By changing one of those 2 you should be ok. It depends on how you set it affect other element.
But using project_menu ID should be just good.
I want to build a fluid template where there is a content container with fixed margin on all 4 sides of the web page. If browser is resized, content box would change on all sides too keeping the same margins but changing height and width. Because of the height 100% issues I am not able to get the bottom margin correctly done if content is too long. In my case content just stretches without stopping and adding scrollbars.
See example:
http://jsfiddle.net/QzgHm/1/ (section element needs to keep bottom margin)
Try position: absolute; and then define pixels values for top, bottom, left, and right. This will essentially give you your set margin all the way around. I couldn't tell on your example which div or section you wanted these margins set on, so just be sure to use position: relative on the parent element
http://mehulkar.com/CD
This is driving me insane. I have a fixed position header and a fixed position footer. I want the page class to scroll between the two.
For some reason, my page class starts at top:0 of the entire document, instead of starting below the header.
I could bypass the problem by relative positioning all contents of the div by the appropriate height, but I will be using page IDs to navigate the page. So when I navigate to an #ID using an a link, it navigates to the top of the document.
How do I fix this!?
Your header position is fixed, which takes it out of the flow of the document. Not only does that mean it sits where you put it, but it also means it doesn't push the content below it downwards.
Easy fix would be to add a margin to the page div that's exactly the size of the "always-on-top" header.
your css class "cleared" seems to have a height of 0. make sure the min-height is set to 100px
To start with try changing your page class property:
margin:0 to margin-top: 100px
To move the footer to the left, if that is what you want remove:
right: 0 from your #footer css.
Also remove position:absolute from #content css and add margin-left:200px;
And add margin-bottom:50px to the .wrap class in css.
Once all these changes have been made you should have your header at the top, footer at the bottom, both left aligned. And the content of the page readable and scrollable between the header and footer, with it all being visible with scrolling.
Any questions just ask.
Check my website, and see the Divisions left menu. When you have maximized your broswer there is no problem, but when you restore it to half of screen, the left menu overlaps to the right.
Here is the CSS code. Can someone help me?
It's because your "divisions" div is absolutely positioned.
You can remove "position: absolute" and increase the width of the "divisions" div to 300px.
Your left menu is absolutely positioned that's why it overlaps other content when window size is too narrow. But the solution for this problem is quite tricky and actually depends on what you want to achieve.
Percentage
One possible solutions would be to set width on "divisions" and "content" div in percentage. This way they'll never overlap. But it depends if you can afford to have dynamic width for your "content" div.
Repositioning
If your content must be fixed width... You'll first have to decide how would you like your content/menu to appear when window is too narrow (maybe even narrower than content width)... And work from there.
Body element width
Set minimum window content (as in <body>) width. Either by using:
transparent image at the beginning of your document <img src="t.gif" width="1250">
set body's minimum width css as min-width: 1250px; has to be 1250px wide, because content is centrally positioned, so it must have equal space on the left and on the right (right one being useless empty space just allowing non overlapping space on the left of content)
The last one is actually the simplest and works. It only makes it a bit wide for smaller screen sizes, but your content width (including menu on the left) already exceeds 1030px anyway...
A very straight-forward and simple
and quick-fix solution would be with CSS :
#content {style.css (line 17)
left:-270px;
margin:0 auto;
padding:30px 10px 0 550px;
position:relative;
width:780px;
}
I tried this in my Firebug and it worked fine. hope it'll suit you're needs :)
next time just use css floats:
put the side menu and the content div in a wrapper,
float:left for the menu, and give the wrapper a fixed width, and center align it.
you can also make the navigation menu go "out" from the left with negative left positioning it.