How can I keep an image visible in browser window on a very long page vertically? (not centered as it is now) Here is the page that has the situation: http://designs-and-more.com/Apparel_Designs.html Note that as you scroll down you will see the links but I want them be visible at all times. Anybody have any help? If anyone knows of a link to an example that would be great since my programming skills are very, very basic. thanks greatly in advance.
The old-school way was to use frames. I believe most websites are not doing this these days (generally menus, side bars, etc. scroll away along with the page content) as they consider keeping the frames design to be undesirable for user interaction.
Ok I have checked your website. You have to add CSS speciality to your declarations.
vertical-aling: top;
.dsR37 {
background-image: url("images/but_Home_BG.png");
vertical-aling: top;
}
Example for home link, your other menu declarations different, so you have to add each other.
You're probably looking for CSS fixed positioning. Here's a demo from David Walsh's site: http://davidwalsh.name/dw-content/css-fixed-position.php
Google "css fixed positioning" and you'll find some demos on how to 'pin' the side nav to be visible no matter where the user scrolls.
Related
I don't know what this is called, but I've seen it on a few websites where when a div scrolls into view it flows to the top hiding the previous block (well scrolling out of view). It like a slideshow but vertically and shows the content. It's kinda like a normal scrolling web page but brings segments into view.
Does this make sense??
Does anyone know what this is called so I can Google how to do it in css or jQuery.
Thanks in advance
If I understand correctly your question you are searching for sticky position. You can see how to do it here: https://css-tricks.com/position-sticky-2/
I'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
I'm working on a single page website with lots of floating divs all height:100%; - On smaller screens (like iPad) and in browsers like FIREFOX you can scroll horizontally to the side of the site and view empty space. This is driving me completely mad.
I have looked through other empty space questions but they're so specific that I can't see a correlation. I have nothing that would make the 100% body width break. Any advice is greatly appreciated.
Test Site is available at http://test.mysteryskin.co.uk/
Might be useful to say that it is unfinished
I was able to resolve the issue on FF by adding position:fixed; to the div with the class trailer. In fact I think the type of page you are trying to pull off will be better off if all of your non scrolling elements are fixed.
Not sure if that will help your iPad issue or not.
I am trying to implement a sticky footer in boilerplate but I can't find a way for this to work. I have tried solutions posted by Michael Gorman and Steve Hatcher but both do not work for me.
I have researched and found that Sticky Footer is not supported by Boilerplate. Have any of you had any luck with this issue.
To see a page where I really need a sticky footer, please go here
Thanks for helping. Cheers
To ensure that the footer is always at the absolute bottom of the page you can use the answer accepted in this question: Make div stay at bottom of page's content all the time even when there are scrollbars
You will prob find that it requires a little fine tuning to work exactly as you require for your design.
If you just want a piece of HTML that stays on the same position of the screen regardless of the scrolling, you can use position:fixed on the element. This will create an effect similar to what you see on facebook, where the blue bar at the top, and the chat window at the bottom stay visible.
I've done this in the past using a method similar to this:
http://javascriptkit.com/javatutors/static3.shtml
but I don't like the "flicker" effect as the page is scrolled and the div needs to move with the scrolling. Lately I've seen a lot of site that have an element (a div or the like I presume) that don't move when the page is scrolled but it's seemless...they're just there and it's a beautiful thing.
Unfortunately I can't seem to recall where I've seen it lately to view the source and try to figure it out so I figured I'd turn here and see what all of you experts can provide as far as assistance / suggestions.
TIA
Try setting "position: fixed" to the element.
I think this does not work with some IE versions, you'll have to us JS for that.
That site you linked to still mentions thing such as IE 4 on it, better no rely on it. It's outdated.
You can position an element to a fixed position with CSS, by doing position: fixed;.
Take a look at google reader.
It has a fixed header and a fixed side bar.