When I access the site with an anchor set (...#xxx) the image on top is shifted outside the viewport.
Normal behaviour: http://soc.org/index.php?id=4
Corrupted design: http://soc.org/index.php?id=4#c272
The top image is positioned absolute.
There are some blank lines directly after the google-analytics code. If I delete them, it works.
Thanks for any suggestions!
It's easier to see what's going on if you turn off the overflow:hidden on div.upperPage
You can see the anchor is causing the scroll on the contents of that, rather than on the page as a whole. However, I don't know of any specifications that state what elements should scroll to achieve the anchor requirement.
Related
this is my code:
Link to Codepen
How do I make the website stop scrolling down where the content actually ends?
overflow-y:hidden;
in body element, it won't work because it will not give me scroll the page at all. but I need to scroll it down where my content ends.
How can I do it or prevent it in the most simple way except using js or bootstrap?
The problem happening because every new element goes lower and lower.
Thank you for help !
It happens because many elements has position:relative. Position relative saves place where element should be rendered by default.
You need change html structure and css.
Example: codepen
I have an ASP.net 4 app with a bunch of pages, all using the Site.Master as the primary layout which is a colored background, border, menu at the top and a gif in the bottom right corner of the border.
I've positioned everything using position:absolute and just set all of the elements in the site.master and the individual elements that appear on each page by using style:"left:100px top 100px" etc
So when you launch the app in normal IE mode everything looks perfect, however if you go full screen or you minimize IE, everything goes completely out of shape and all over the place.
What do I need to do in order for it to be consistent no matter whether you're in normal IE/Full screen/Minimized? Do I need to change the way I have used style:position tags on all of the elements or is it something else that I need to do?
My solution to this was to put a
div style="position:relative;"
inside and at the start of the BodyContent of each page then use absolute positioning on each of the elements which keeps all of them within the BodyContent border and shifts them properly when the browser is minimized or full-screened. Is this a good approach? It seems to have solved the problem I had but I'm concerned it may cause more problems I'm not currently aware of?
Page is not holding your settings because the width off page changes when you change browser size.
To make things all the same no mater what is the size of browser window set this with off body element.
Something like this:
<body style="width:1024px">
I'm putting together a horizontally scrolling layout to display nested content (think files within folders within folders ad infinitum). For purposes of graceful degradation, is there any way whatsoever to load the page initially scrolled all the way to the right, without JavaScript? It's easy to scroll it all the way to the bottom by adding <a id="foo"></a> to the end of the page and appeding #foo to the URL, but that doesn't seem to work horizontally.
Yep! Check out this fiddle. You can see that I'm using an anchor to reference an element way on the right of the page (the yellow div), and the browser is scrolling that element into view just as it would scroll downward to bring an element into view that was below the window's edge.
Noormally you can select text with left click function
I work on this Site and am not able to select text in the top areas of the page.
What is wrong with the code?
HTML: link
CSS: link
The footer is on top of the text. Just remove position:absolute form #footer
EDIT:
I can't replicate your issues because my solution is working. Here you can see it
I right clicked the offending text in firefox and used the "inspect element" option, which helpfully tells me what element is sitting directly below the mouse.
Your #footer div is sitting ontop of the text, due to having position:absolute; set with no actual positioning.
If you remove the position:absolute; from #footer and reposition it properly, your problem should go away.
Related note:
I notice that the way you're handling positioning content on the page is a bit weird - you're using position:absolute for nearly everything?
It's outside of the scope of this answer but seriously consider moving away from this -- it's causing this problem and will probably give you a headache in future. That thing you're doing where the contents of your footer have massive margins to push them further down the page past the content? That's an unstable solution and a good sign that your layout has gone wrong somewhere.
This is a fairly simple layout and can be handled fine by basic flow control like floats...
The footer div blocks the text so only the upper part is unselectable. You might want to change your layout or structure of your html and css to avoid blocking the text.
Take a look at this:
I'm looking to produce the effect that is on this page: http://jonrohan.me/guide/css/creating-triangles-in-css/ - but with just CSS, no JavaScript (this would be trivial with JavaScript).
The effect I'm talking about is as follows:
Initially you see both the page header and the article title.
when you scroll the page header disappears.
The article title becomes fixed to the top of the page, so you always see it as you scroll.
The best I've managed to achieve so far is this:
http://jsfiddle.net/nottrobin/2FSvx/
But I don't like the duplication of the <nav> inherent in my solution.
Does anyone have any clever CSS/3 techniques they can think of to make it so that when you scroll down and the <header> disappears, the <nav> would naturally ride up to the top of the page?
Your example has some issues, if I scroll the webpage down or up sometimes the two navs overlap and the content is displayed twice and overlapping.
As far as I know, there is no such technique to obtain the same effect using only CSS, JS is required.
You can position elements using CSS only in a static way (normal page flow), fixed way (relative to browser window), or absolute/relative (relative to the nearest parent with a position set to relative).
You cannot "listen" to a scroll event like you would do with JavaScript, hence you cannot position an element relative to the amount of scrolling, nor change its position value in real time, because you will need JavaScript even for this.
CSS is a presentational markup language, properties you assign to elements using CSS rules cannot be changed on an event-basis.
You could do something like you did, but that means more markup language, more CSS and more maintenance difficulties.
You should use JS to optimize the user's experience, if a user has JS disabled, he/she will see the normal page behavior, otherwise the nav element will remain still, like all other websites do.