aye folks!
i spent the last hour searching around the web trying to find a css solution to create something like this this..
i read a lot of 'frosted glass' tutorials.. but like 90% are using two images or blur the whole body of the site while the modal is open.
maybe i just haven't found the right article or it's not possible with css this easily atm. but stack overflow never disappointed me so far. therefore i'm asking you guys if someone does know a solution.
So I have been working on a website using the .NET framework and would like to make the background style look a little something like it does at bons.me. As you can see when you scroll it background stays in the same position, however as you scroll the part of which you see changes. Anyone know how I would go about doing this? Would it be something in css or ...? I'm rather new to web development, but it would also be just as much of a help if you could just point me in a direction or tell me what this is called so I could google it.
This deals with the css property background-position: fixed. David Walsh has a good article describing the technique here.
I am attempting to create a View Slideshow for a website I am designing and the have it so an image-specific caption/description is placed over each image. I've been Googling some solutions and the only thing I could find was a solution for placing captions above or under the image, not on top of it. I feel as if there should be a very simple solution for this sort of thing, however, I have been unable to find it.
First, I would like to know if this is even possible with View Slideshow and if so then how to accomplish this.
Any information that is provided will be greatly appreciated.
Just use CSS! When you think about it, it's not about the views module. Even html doesn't allow you to put two things at the same place. Not without CSS anyway.
I managed to do quite the same on this website (cf. the slideshow of the homepage). I only used the position:relative and then for exampletop:XXXpx and left:XXXpx propreties to position the text wherever I want in the slideshow container.
If you are not familiar with theses CSS propreties, here is a little demonstration of how it works. Have fun!
I'd try to be as short as possible as no one likes to read long stuff and waste time,
now it is a menu with a twisted center image that should look like this - http://bit.ly/dXUZcX
but I wonder how to make it's left and right repetitive parts to repeat one only left and the other only right. I tried some stuff but didn't work out so decided to ask here if someone has idea how it gonna happen.
And these divs are transparent as there is a repetitive bg behind them.
Thanks in advance. :)
You can't to it like that with pure css since there is currently no way to calculate widths. You could do it with Javascript (maybe you try using jQuery) or you can simply use images, if that's an option.
Here's my image based solution:
http://www.fabsn.de/trash/stackoverflow/orchid/index.htm
I have been experimenting with the Majestic template at freecsstemplates.org. So far so good; I really like the look (or to be more specific, my boss really likes the look).
However, I am noticing that the CSS that drives this template seems very brittle; small changes can cause really radical breakage. In particular, if I reduce the size of the header in the CSS (to eliminate some of the empty space at the top of the page), both of the outside columns suddenly disappear.
With small websites, sometimes I cry uncle and just use tables for layout. I realize this is heretical; should I be leaving the design to the professional designers? Or maybe I'm going about this the wrong way, and someone can set me straight.
I honestly think this layout has been made pretty badly. The width of the elements seems to change where they appear on the page, and they're all need to be pixel perfect for everything to be centred.
For some bizarre reason the whole page has been placed inside the div element marked 'header'... This doesn't make much semantic sense for a start.
However, it seems if you decrease the width of every element which has one, then everything does get smaller, and nothing should disappear.
I would recommend looking at some other more sensible layouts, since I don't think this is a very good way of attaining that style -- as you've said, it's brittle. Have you tried using the extension Firebug for firefox? It allows you to make on-the-fly changes to the css, and see how it affects the style, which will help you learn fast.
CSS is delicate, but still easier to deal with than a site full of table layouts. I found Dave Shea's book CSS ZenGarden to be a great help in learning CSS from a designers perspective.
Often in layered templates there are a few places where changes to CSS can be made, and it can be really confusing to follow which selectors are controlling the element you wish to manage. There are many tools out there that can help, but some that have been useful to me are:
Google Chrome and its Inspect Element option
Selector Gadget - a bookmarklet that will help you visually determine the selectors that affect an element
Firefox's Web Developer plug in
One other tip is to learn about the !important modifier - it can come in handy to force a particular property setting when there are multiple CSS selectors affecting the same element.
CSS in my experience is easy to understand in concept, but takes a long time to master.
Brittle CSS can be very brittle, but good CSS can be wonderfully flexible.
As it stands CSS can either make layouts wonderfully simple and flexible or it can make the simplest of tasks an absolute nightmare.
Purists will tell you to use CSS no matter what, a pragmatist will tell you to use what works. If using a table or non-CSS solution makes something infinitely easier to do, then use it!
Personally I try to use pure CSS as much as possible, but there have been times when I want to do nothing but swear when something glorious in FireFox looks awful in IE. This is where the hacks come in. It is these hacks and work arounds that tend to make CSS brittle in the first place.
Half the problems with CSS would go away if all the browsers did precisely what the CSS spec says they should do. Alas, this is yet to happen so we have to live with either using tables, or on occassion, brittle CSS.
The best solution is to make the design as simple as possible. If you find you have a hundred divs and lots of CSS trickery to do something straight-forward, stop. Re-think how you are approaching it and try again.
At the end of the day your website users don't really give a monkeys what your website looks like as long as they can get at the information they want with minimum effort. Successfully manage that and they will not care how photorealistic that shiny nav bar is, or how well the borders line up etc.
That's my 18pence at any rate :)
I agree most css template is hard to read, and different people may have a very different approach to the same layout strategy. Since there are too many hacks/tricks/techniques in css it is really fragile when you try to modify those existing one since almost all cases, the styles are very dependent to each other.
Css doesn't break as long as you don't break it ;) It's a language. Just like a regular one, if you don't use proper grammar people won't understand what your saying.
If a layout doesn't work or suddenly your page looks rubbish, I'll guarantee you it's your fault. Css isn't brittle, the code you wrote with it might be.
So start by learning the basics and don't just dive into some file you found online which might (in your case, does) contain very bad code.
If you end up wanting to use tables for everything may I suggest you start looking at some grid systems like http://960.gs/ and ease your pain.
Gideon