I'm working on a simple page but got into a trouble with fixed position. Wonder if anyone has the time to give me a hand.
It will be too much to copy and paste all the codes here but I will paste a link
http://et4891.com/lecture/protosite.shtml
for the header with the nav I want both being fixed which means when I'm scrolling down the page the whole header with nav will always be there. But no matter how I do it things just keep on messed up. The nav is with css dropdown and floating.
Anyone able to give me a hand? I want to fix the position only with css not jquery though.
Thanks in advance.
Throw header and nav into a div. Give that div position: fixed;. Make sure you increase margin-top for proto-main-content as this section is no longer affected by the header and nav's position.
Related
Here is the link to the portfolio page I'm currently working on in react. When you collapse a div the content gets scrunched and I'm not sure what the solution to this is. I thought it was "white-space: nowrap;" but that doesn't seem to be doing anything for me. I'm sure it's something super simple but can't pinpoint what's happening.
Appreciate any help. Thank you!
https://goresometimes.netlify.app/
This happens as the width of your content drawer is 100% and the content flows dynamically to this width. You'll want to use fixed width like width: 100vw on relevant container elements instead. The actual value needs to be adjusted according to what you need*
remove height:100% on .navbox also remove in media query
I have been looking for tutorials on this for a while now and am coming across a problem. I have a layout with a fixed header at 100px in height and a fixed footer at 50px in height. In my content, I have a menu on the left at 200px wide and content on the right that fills the rest of the screen. My header, footer and menu all have styles applied for background colours and borders.
What I want is for my footer to remain at the bottom of the window, or at the bottom of my content, if the content is longer. I want for the menu to be the same height as the content, so that the styles I have applied will remain intact. What I get is either the footer sticks to the bottom of the content because the content is shorter than the menu, or there is a gap between the bottom of the menu and the top of the footer.
Every tutorial I have found fixes this, but requires the menu to have no background (it takes the background styles from the <body> tag. As I said, the styles I have applied are attached to the menu. Is there a way to fix this?
UPDATE: My source can be found at http://jsfiddle.net/53SZd/3/. That is what I have now (apologies if the floats cause all manner of headaches), but if there are ways to have it looking how I want, I am very open to suggestions.
UPDATE 2: I think my way of explaining this is wrong. I have uploaded some images of what I want to my Google Drive that should explain what I want.
Whilst I do sincerely appreciate the help that I am getting here, there is always one caveat that appears. Many thanks to Waz for his help, I do really appreciate it, but I am coming across one issue or another with each answer. I never realised that getting the effect I want could be so hard -_-"
seems that u might be using float property on the menu, if that is the case you would have to clear float with the footer or a div, but seeing the codes would be great help for your answer
one way to do it is to put a margin-left on your content of 220px (200 for the menu +20 for it not to be just aside the menu)
had the same problem, this solved it.
for the footer, the solution of james is the best ( put clear : both on your footer)
here is how it works : http://jsfiddle.net/53SZd/19/
EDIT : I understood the prolem was for the content.
give your menu top= 111px(100 size of header, 11 for padding) and bottom=51px (50 height footer,1 border) and your footer bottom=0px;
My nav bar correctly links to my 'work' section, but if I click ABOUT on the nav bar, it drops down to about 300px above the 'about' h2. I feel it may have to do with positions, displays? I can get the ABOUT anchored link to correctly go to the about section if I add
#about{
margin-top: 360px
}
Although this appears to be a poor patch on a larger problem with my construction. I've tried doing a lot of different things but I keep ending up with my work, about, and contact section starting to overlap into each other which I can't understand either. The divs dont seem to be stacking properly or something. ANY help is greatly appreciated.
http://wrobbins.me is the site. Thanks.
The link takes you exactly to where the about element is, it's just that the text in the element is pushed down by the job elements in the block above.
The problem is the jobwrap element. The floating elements inside it doesn't affect its size, so it has the height zero.
Add overflow:hidden to the #jobwrap style, and it will contain its children, and the about element will start below it.
When you use floats you should "clear" its parent or block you want to be below. Now your #jobwrap block have zero height and there is the problem with #about position. Use #about{cloar:both;} as hotfix and read more about floats and clearfix.
here is the layout
http://timsegreto.com/cssmock/mock.html
i need the background image to scroll concordant with the text block in the right column.
ive tried many different ways with no success.
any ideas would greatly appreciated.
not sure if its possible or what t research to make it work.
thanks!
It seems to me that you have fixed positioning on the wrong element. Try making #framecontent position fixed and remove it from #maincontent.
EDIT It's 'quirks' mode that's causing you IE issues. Get rid of the:
<!--Force IE6 into quirks mode with this comment tag-->
from the beginning of your html. I'm sure this is supposed to be solving other cross-browser issues but it's ruining fixed positioning.
Have you adding an extra div and setting the background image on that instead of on the body? You could absolutely position this extra div in the body with top: 0 - it would scroll with the page then...
not sure if thats what you're looking for exactly...
I had posted a similar question previously, when I was looking for help in doing the javascript portion.
I now have figured out how to get the javascript working to reproduce this affect in the images below, I need help getting my "MIDDLE" clickable div into place though.... scroll down to see the question portion
Ok here is a page with the code I have this far on jsfiddle.
Mu updated attempt, got it mostly working but it seems kind of hacky the way I had to do it
http://jsfiddle.net/jasondavis/HRq6G/5/embedded/result/
I have a container div with header, content, sidebar, footer areas. Right now when you click on the header div it will toggle the sidebar and content areas.
I would really like to figure out how I can get a middle DIV in between the article content and the sidebar, I will then make that div be the trigger to toggle it all.
In the image you can see that the new center div should always stay attached to the right side of the article div
If you are good with this kind of stuff I would greatly appreciate any help I can get with it, I have spent hours trying to get a div to position like I am describing with no luck. The div should also be the height of the article div
-----UPDATE-----
http://jsfiddle.net/jasondavis/HRq6G/6/embedded/result/
I have it working now. It can most likely be improved, I had to do some hacks like setting some negative margins, I would imagine someone with better knowledge could do it without that
Your explanation was a little hard to understand, but I think this is what you want. Basically there is a thin div between the sidebar and the main content area. Clicking on it causes the sidebar to relocate. Clicking it again restores the sidebar.
http://jsfiddle.net/HRq6G/4/
To accomplish this I chose to absolutely position the middle div along the right edge of the article div. I called the middle div 'trigger.'