Working on the site www.bedriftsdesign.no I made both the navigation and the #landing-text (on top of the header image fixed.
When I changed their position to fixed though something else happened. Although they'll stay fixed when scrolling vertically, if you scroll horizontally (especially on a small screen) they won't stick to their place.
So my question is, can I make something fixed (vertically) and relative (horizontally)? If so, how?
Here's an example of a site where it works, and approximately what I'm trying to get: www.googleventures.com
Thanks
Related
We're using FullCalendar version 4.3.1. We currently have a problem with the header not properly aligning when scrolling horizontally to the right. It only happens when the scrollbar is fully scrolled to the right.
This is how it should look and how it looks when not scrolled to the right.
This is what happens when I scroll it to the right, but just enough so it won't put it off.
And this is what happens when I scroll it fully to the right. As you can see the header doesn't align with the cells anymore.
My guess is that the body is bigger than the header because of the vertical scrollbar and by scrolling the last part it will fail to align the header with the cells.
Any idea how I fix this?
I am attempting to hold my footer div at the bottom of the site to avoid blank space underneath it on shorter pages. When I set the position of the footer to be absolute, the responsive menu button seems to take its position relative to the footer and no longer to the header. When I change it back from absolute it works normally. It is almost as if it is associating itself with the footer menu rather than the header menu, but I can see no good reason why this would happen. Also, when I am logged in to WordPress, the top menu bar (on the front end) gets pushed down in just the same way. However, this doesn't happen until the viewport hits 600px (I have no media queries at 600px). The responsive menu already appears at a viewport width of 767px.
This is a WordPress website in progress here.
I am using a custom theme and this responsive menu
Does anyone have any idea what might be going on there? Thanks.
You would need to move the #click-menu div & the #responsive-menu div outside of the footer element in order to fix this.
Here's a similar issue w/ some great answers: Absolute positioning inside absolute position
Hi everyone! First time posting on stackoverflow.
I was wondering if there was a way/how to stop the size of a container shifting when a scrollbar is added to it
like, if I take a div and slap overflow-y:scroll; into its style, it adds a nice and nifty scrollbar, but aligns all the dynamically positioning content inside of it to the left a little bit because the scrollbar changes the actual size of the content area?
I'm not great with web dev vocabulary, but I hope you understand what I mean.
I found that on iOS, adding overflow-y:scroll; also doesn't physically add a scroll bar and doesn't change the size of the container; all of the stuff inside of it stays centered
But if I add a scroll bar to a div with items inside of it positioned to a relative percentage, the size of the container will change and therefore all the content will move
tl;dr how do I keep my stuff in the dead center even after I add a scroll bar
I was thinking making it statically positioned but I want the horizontal height to stay relative
can I specify a static position for the x but not the y?
thanks.
you can use overflow-y:hidden;
To preface this question, I am very VERY new to html/CSS so go easy on me please :)
I am currently designing a web-page that has a fixed position header at the top. The header contains a logo, some drop-down menus, and a right floated container showing the name of the person currently logged in.
The problem that happens is if I re-size the screen to be smaller, the elements of the header wrap onto the next line.
The gray background is a parent div (holding the logo, the drop down menus, and the logged in info) with a width of 100%, a fixed height and fixed position. I initially had the logo and the list of menus set to float:left to keep them in-line, but have been playing around with display:inline-block to see if that can help anything (sadly, it hasn't much). The container all the way on the right holding "Logged in as Alex " is set to float: right
I have tried giving the header bar a fixed width, as well as setting its overflow to auto - neither option fixed the problem.
In my perfect world, at the point where the content begins to wrap now, I would like the entire page to horizontally scroll instead of pushing the content to the next line. A good example of the functionality I'm looking for is the top bar on Youtube, where the items squish together as you minimize the screen and the page starts to scroll horizontally when they can't be squished any closer.
I've been struggling with this for many hours over the last few days, and happy help or direction would be greatly appreciated. Thanks :)
I tried to post images but I don't have enough reputation. I have images that I could find a way to send of before-after resizing if anyone wants
You can specify
min-width
and/or
min-height
:)
overflow is your friend:
Use overflow:scroll on the container, that should fix it. More on overflow here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
I have centered a div on a page for a group project and while the div itself is centered, the websites contents are centered with the scroll bar in mind. What I mean by this is that the web page contents are centered so that the width of the screen is measured without the scroll bars width. So if the monitor was originally 100px wide, it gets read as 100-(scroll bar width) px wide. Unfortunately, this has caused my fixed position div to be a scroll bars width off center from the rest of the site and it looks pretty funky. Any way to fix that? Can't use jquery, can potentially use a little bit of JS.
Here's the link to my site so you can see what I'm talking about. http://51713941.nhd.weebly.com/index.html
Lets see some code.
This can normally be sorted out with css. Margin:auto
You should use the box model concept in css to style and place the content on the site
Again, the question seems rather vague.