This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Any ideas on how I could implement a grid-view in CSS? - CSS
I have an example of a dynamic number of divs all floating left:
alt text http://img266.imageshack.us/img266/7717/qaatest1.jpg
...but would like the new row to be tucked up under the previous as in my example desired output:
alt text http://img714.imageshack.us/img714/1527/qaatest2.jpg
I know using columns might be the best way to go but am having trouble with exactly how to go about that. A CSS solution would be great.
I do know how many boxes there will be when i start out. Any thoughts?
Thanks.
This jQuery plugin might be of help:
http://desandro.com/resources/jquery-masonry/
Edit: I don't think a pure CSS solution is sufficient. You may know the number of columns, but you won't know the size of columns without javascript trickery. I recommend the above plugin.
Related
This question already has answers here:
Partially overlap elements using CSS
(3 answers)
Closed 11 months ago.
Currently my site looks like this (making a browser based card game), please ignore the art for now - screenshot - I would like them to overlap slightly rather than wrapping around and creating a new line almost like someone is holding the cards. I have no idea where to even start with this without using js so I was wondering if anyone could help me come up with a solution that just uses pure css solution.
You can use margin-left and margin-right with negative values. Or you can set the card positions by using position: absolute and left and top properties.
This question already has answers here:
Wrap text from bottom to top
(8 answers)
Closed 2 years ago.
Short & sweet question (which probably has been answered already, but I couldn't find it or figure out what keywords to Google for):
is there a way to achieve this (with CSS? Flexbox?)
If I have this scentence:
This is a long scentence and it needs to break.
It now (by default) breaks like this:
This is a long scentence and it
needs to break.
I would like it to break like this:
This is a long
scentence and it needs to break.
So: I would like to have 'the long bit' at the end, not at the beginning.
Is that possible? and if YES: how?
THX!
Unfortunately I don't think want you want to do is possible with vanilla CSS, and it makes sense if you think about it; It won't know where to make that first line break until it knows how many total lines there will be, and it doesn't know how many lines the text will take up until it renders them.
So to my understanding it would need to render the content twice, not just on load but also on resize, which could add to overhead.
A similar question:
Wrap text from bottom to top
Try this: <p> This is a long<br /> sentence and it needs to break. </p>
This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
I tried searching online but I didn't find any good sources on this. Is there a way to style scroll bars with pure CSS so that it is compatible with a maximum number of browsers?
You can style scrollbars in Internet Explorer and Webkit only.
Note that these are not standard properties.
However, you can achieve this with JavaScript. One project that does this is jScrollPane.
Adding my 2 pence a little late, but if you really want to style them I would suggest trying http://jscrollpane.kelvinluck.com/. It's not a pure CSS solution like you are looking for but is a solution of sorts.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to hide text field in Html File Upload
Hi!Is it possible to hide the input-file path keeping just the browse button?
thanks
Luca
Unfortunately the file input isn't style-able, and it shows differently in each browser. So any solutions are sort of hacky, to say the least.
One solution is to place an image behind the input, and setting it's opacity to 0. See here for the tutorial that I follow.
This question already has answers here:
The most semantic way of making this container
(9 answers)
Closed 9 years ago.
I am trying to find out how I can replicate this effect as seen on Aviary
Don't listen to the image lovers, I've solved this very problem with no images or extra markup on two occasions:
The most semantic way of making this container
CSS to create curved corner between two elements?
This about "Discover creations" as if it were a rounded green button.
I think the only way to do this is to use an image; my site uses images. It may be possible with CSS3, but the markup would be horrid!
James
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
This will give you a starter for 10. The rounded corner is probably an image.
According to firebug, they use an image there http://images.aviary.com/images/layout/nav/link.gif.
A messier way to do it would be to use rounded corners so the green part has rounded corners and is positioned over the gray part.
Here are 25 different ways of making rounded corners. Pick one. :)
http://www.devwebpro.com/25-rounded-corners-techniques-with-css/
(It's not actually 25 techniques, but links to 25 different sites that explain how to do it.)
You can do it pretty quick and easy with javascript if you have just a few of them.
See Here