Is there a CSS-only way to fix a nav bar (or any element really) below a header, but at the top of the page when scrolling past the header?
I know how to do it with js, I was just curious if there was a clever way to do it with CSS.
No, you can't conditionally style elements based on the scroll value of the page, simply because CSS doesn't care, and doesn't measure that parameter. JavaScript however does. So your solution would have to involve JavaScript.
I think there's no fix with pure CSS.
If :target would work without clicking any element maybe yes. But I think not.
Related
From what I understand Gmail doesn't accept CSS blocks in the head at all, which is why I have been adding a bunch of inline CSS to my email template to make it work.
However, I'm struggling with the CSS positioning property. I want an image to sit on top of a background image so I set the parent div of both to position: relative and the image to absolute. However, for some reason Gmail removes the style attribute that declares the position: relative from the div. It keeps all other inline CSS though.
Any idea? Any workaround?
Sadly, I suspect you may have to abandon your perfectly reasonable ideas of divs and positioning when designing for email. CSS support in email clients is a tangled nightmare.
The only (relatively) surefire way of forcing layout on email is to go with an old school tables layout, which is unfortunate, but unavoidable.
Campaign Monitor has an excellent summary of email client CSS support here.
I experienced similar layout problems when sending email newsletters. The solution was to use tables to position things properly. It's dated, but I think it was the only way to make things look the way they should.
Click this link to see my concept image regarding the subject: http://i45.tinypic.com/k33c0i.jpg
Hi! Is it possible to do such custom "sliders" for overflowing content without the default Scrollers? It doesn't matter how the actual transition goes (could work just like the regular horizontal scrollbar for i care, just without the ugly default gray buttons/bar). Preferably i would like to do it just with CSS, but if not, i'll consider other ways to do it aswell. Or i'll just simply create another page to the remaining images.
http://www.visioville.fi/en/
Thanks!
You can get rid of the scrollbars by setting
overflow:hidden
in CSS, which will "clip" the DIV contents.
I don't think there is a pure CSS way to scroll it. That is easily doable with jQuery.ScrollTo - just bind hover() or click() events to your arrow icons.
Take a look at this site, I believe it will be of some use to you. It's what I've used in the past: http://jscrollpane.kelvinluck.com/
I'm aware of this hack for inline-block property, but as it really is a hack for the poor browser support, I was wondering if there is a more elegant solution to use CSS sprites without the necessary line-break of block elements.
To illustrate the idea: in the footer of this website the icons which are inside the footer-text paragraph at the very right bottom of the page should get a nice rollover image. The most elegant technique I know for this is CSS sprites, but that would of course add a line break before the images.
Am I missing something?
Any insight is much appreciated!
Best, Alex
Personally I inline-block hack stuff all over the place, but if you're looking for an alternative, the answer is right on the page you use for an example, in the other social icons list nearer to the top of the page.
Just use display: block and float the links.
I have a #main div nested within a container div that I want to fill the page down to the sticky footer. I've tried several angles, but can't seem to get it to work. If you don't use firebug, just ask and I'll provide CSS, etc.
Thanks.
site: http://www.dentistrywithsmiles.com
I've tried to do sticky footer many times and I never seem to learn that they are really hard to do. Your situation seems complicated and what you have now doesnt seem half bad.
I think I would use JavaScript to detect page resize and adjust the heights appropriately. Either that, or do something tricky with background images spanning both the footer and #main.
That's probably not what you want to hear but this is a tough problem for only using CSS - tougher than I would care to invest in.
With Jquery
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
or css only:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
or
http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm
Is there a way to change scrollbar from right to left in divs? I tried applying direction: rtl; but apparently it does not have any affect in firefox. I would prefer a pure css solution but do not mind using js for this.
I don't think it's possible with pure css and html, but you can use a jQuery plugin, like jScrollPane that gives you the ability to use custom scrollbars, and choose their position in the page.
There is no way to this, except for implementing your own scrollbar functionality from scratch. The reason is that the scrollbar is actually an ui element inherited from the operating system, and not something the browser "owns" - and since the operating system doesn't support putting the scrollbar on the left hand side, neither does the browser.