So I found the CSS attribute position: fixed and I am wanting to implement that into my site. (I would prefer it to work in IE6 as well, because I still have roughly 25-75 visitors a day with IE6) I do not have a left sidebar (my site is 1000px wide at the moment), but I would like to add a small (165px by 700px) scrolling sidebar that keeps "connected" to the orange portions of my website (ie: it stops when going too high and stops when getting near the bottom) when people are scrolling around the site, but I have two seperate pages it needs to be on that have different heights to the top of the page. Here are a few images I mocked up to try to get the point across of what I am wanting to do. This is roughly what I am looking for on individual posts And this is what I need on homepage and subsequent pages of the main index.php file. I am only wanting to place the social icons and the ad on the left side so as to keep the full frame of what I am doing on pretty much all pages (minimum viewing size on my site is roughly 1024X800 so this would almost fill the entire page top to bottom). Using this method I would think it would cause people to look at that object that is staring them in the face and either bookmark it, or click the ad. Site can be found here - http://dailyfailblog.com with the CSS file at http://dailyfailblog.com/wp-content/themes/scarlett/style.css Any suggestions or other coding help would be very much appreciated. Thanks!
As someone who does have a command of CSS - my advice is Don't. Fixed positioning has crap for cross-browser support (thanks IE) and even when it works makes scrolling annoying, at different screen sizes can cover up content getting in the users way, and in general does little more than make a royal pain in the ass out of itself. It's on my list of things NOT to do when designing a site. Let's face it, the reason we don't see it used a hell of a lot is it sucks. That said, if you are going to resort to it anyways, my advice is still don't use position:fixed, instead fake it! How do you fake it? http://battletech.hopto.org/html_tutorials/fixed_element.html Setting height:100% and overflow:hidden on both BODY and HTML prevents there from EVER being scrollbars on those elements. This means that inside BODY anything that is absolute positioned is treated as if it had position:fixed - even going all the way back to IE 5.5... To get our scrollbar for the content we want to scroll we make a div#container that is height:100% and overflow:auto on it. When the content gets bigger than #container, we get scrollbars on it - but all elements outside #container remain fixed. Actually pretty simple, though it is more code than saying position:fixed it works even in legacy browsers and there's no reason for it to stop working in newer ones - so you don't need any of that 'sending each browser different versions' bull either.
Thanks for the advice! Ya I saw that the position: fixed had a few browser support issues (retarded IE), I am just not very good with css yet. Do you code for people?
I used to full time, but I've had to cut back and retire due to health issues (parkinsons and lupus), only supporting existing clients, though I'll still take on the occasional odd job. I just have trouble committing to deadlines when I might have three good days in a row where I do the equivalent of twenty days work from other people, followed by two weeks of flat on my back in a hospital bed. In other words, I make manic depressives look like rank amateurs.
lol At least you still have your sense of humor. No one can take that away from ya. Thanks for the tips and hopefully I can find a way to get what I want implemented.